Question

我为路易斯维尔的酒吧和餐馆项目创建了一张邻居地图。我需要让iFrame在点击标记时为每个位置填充相关视频。我使用Youtube Data API根据地理位置检索videoId，并在我的控制台中检索信息正确。我遇到的问题是＆＃39;推动＆＃39;将视频ID放入index.html文件的IFrame中。我尝试了几种不同的方法，从仅将url字符串附加到连接的url，到尝试将整个IFrame对象附加到div中，但没有任何工作。 IFrame在那里并使用静态视频网址，但到目前为止我还无法根据用户活动获得动态更新（点击标记）。

这是小提琴（地图不会出现在JSFiddle上，但确实出现在Chrome btw中）。这是我的javascript文件中有问题的片段。

http://jsfiddle.net/smith1jason/mp5czfj9/

                var ytRequestTimeout = setTimeout(function () {
                console.log("failed to get Youtube resources");
            }, 10000);
            google.maps.event.addListener(marker, "click", function () {
                var yt_url = 'https://www.googleapis.com/youtube/v3/search?part=id&q=' + this.title + '+louisville&maxResults=1&callback=?&key=AIzaSyActmR_LWyXc0Y9CxHucYh-C73C09Om318';
                //make some room for youtube ajax call and supporting code here.
                $.getJSON(yt_url, function (response) {
                    console.log(response);
                    var title = response.items[0].id.videoId;
                    var playerUrl = 'src="https://www.youtube.com/embed/' + title + '"';
                    $player.append(playerUrl);
                    //var contentString = '<iframe width="320" height="200" src="//www.youtube.com/embed/'+title+'" frameborder="0" allowfullscreen></iframe>';
                    //var ytWindow = new google.maps.InfoWindow({
                    //content: contentString
                    //})
                    //ytWindow.open(map, marker);

                }

非常感谢任何帮助。我已经在Stack Overflow上搜索了相当多的youtube和google map api问题，并收到了很多与此问题无关的帮助。

Answer 1

终于搞清楚了！

https://developers.google.com/maps/documentation/javascript/infowindows

它位于contentString中url的串联中，如Google Developers infoWindow文档中所示！

Halelujah！

如何将JSON调用中的特定Youtube视频ID附加到IFrame中

1 个答案: