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

问题描述

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

I want to use tweet's embed code and to set that as google map v3 infowindow content and display fully styled tweet iframe on the map. But iframe wont load. I made test case here http://jsfiddle.net/kN7yZ/58/ Click on marker there.

这里是测试用例代码:

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();

推荐答案

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

You need to use the domready event on the infowindow and add the twitter script from there.

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");
});

从信息窗口内容中删除脚本，只保留块引用.请参阅 http://jsfiddle.net/upsidown/eh4Kp/

Remove the script from your infowindow content and leave only the blockquote. See http://jsfiddle.net/upsidown/eh4Kp/

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

You might need to adjust the infowindow size to fit the tweet and I wish you good luck there!

这篇关于在谷歌地图信息窗口中嵌入推文的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！