javascript - 在谷歌地图信息窗口中嵌入推文

Question

我想使用推文的嵌入代码并将其设置为谷歌地图 v3 信息窗口内容并在 map 上显示完全样式化的推文 iframe。但 iframe 不会加载。我在这里做了测试用例http://jsfiddle.net/kN7yZ/58/单击那里的标记。

这是测试用例代码:

var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker=new google.maps.Marker({
  position:myCenter,
  });

marker.setMap(map);

var text = '<blockquote class="twitter-tweet" lang="en"><p>EVO KAŽU DA NAŠA DECA NE VISE TOLIKO NA INTERNETU-PA NE MOGU DA STIGNU OD RODITELJA JEBOTE.</p>&mdash; Nichim Izazvan (@NichimIzazvan) <a href="https://twitter.com/NichimIzazvan/statuses/419180893035827200">January 3, 2014</a></blockquote>';
text += '<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></'+'script>';

var infowindow = new google.maps.InfoWindow({
  content:text
  });

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
  });
}
initialize();

Answer 1

您需要在信息窗口上使用 domready 事件并从那里添加 twitter 脚本。

google.maps.event.addListener(infowindow, 'domready', function () {
    ! function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (!d.getElementById(id)) {
            js = d.createElement(s);
            js.id = id;
            js.src = "//platform.twitter.com/widgets.js";
            fjs.parentNode.insertBefore(js, fjs);
        }
    }(document, "script", "twitter-widgets");
});

从您的信息窗口内容中删除脚本，只保留 block 引用。参见 http://jsfiddle.net/upsidown/eh4Kp/

您可能需要调整信息窗口大小以适合推文，祝您好运!