使用 Ajax 将 Youtube 剪辑放入 Google 地图信息窗口

Question

对于 Udacity 项目，我正在尝试使用 Google 地图 API 以及 Knockout 和 Ajax 创建邻域地图以使用另一个第三方 API.由于我 class 中没有其他人使用过 Youtube，我决定关注我附近的酒吧并使用 Ajax 在 Youtube 上搜索该酒吧的任何相关视频（我查看了每个酒吧以确保在每个至少有一个视频）。我让我的地图只使用一个嵌入式视频，只是为了确保它能正常工作，但我在尝试 Ajax 调用 infoWindow 特定视频时遇到控制台错误。这是 Ajax 调用。

var yt_url = "https://www.googleapis.com/youtube/v3/search" + markerList[i];
        var ytRequestTimeout = setTimeout(function(){
        console.log("failed to get Youtube resources");
    }, 8000);
        google.maps.event.addListener(marker, "click", function(){
          //make some room for youtube ajax call and supporting code here.
        $.ajax({
          type: "GET",
          url: yt_url,
          datatype: "jsonp",
          success: function(response){
            var ytWindow = new google.maps.InfoWindow({
              content: '<object width="425" height="344"><param name="movie" value="am name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src=yt_url type="application/x-shockwave-flash" width="425" height="344" allowscriptaccess="always" allowfullscreen="true"></embed></object>'
              })
            ytWindow.open(map, marker);

          }

        })

如果您想查看相关的 HTML 和 CSS 以及整个 JS 文件，这是我的代码笔。 http://codepen.io/anon/pen/azMGBq

谢谢

Answer 1

...src=yt_url type... 不会将 url 插入到字符串中，您必须进行一些字符串连接 ...src='"+yt_url+'" type...

content: '<object width="425" height="344"><param name="movie" value="am name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="'+yt_url+'" type="application/x-shockwave-flash" width="425" height="344" allowscriptaccess="always" allowfullscreen="true"></embed></object>'

使用 Ajax 将 Youtube 剪辑放入 Google 地图信息窗口

Putting a Youtube clip in the Google Map infoWindow using Ajax

javascript

youtube

ajax

jquery

google-maps