在谷歌地图infowindow中嵌入推文

时间:2014-01-04 11:44:13

标签: javascript google-maps google-maps-api-3 twitter

我想使用tweet的嵌入代码并将其设置为谷歌地图v3 infowindow内容并在地图上显示完全样式的推文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();

1 个答案:

答案 0 :(得分:6)

您需要在infowindow上使用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");
});

从infowindow内容中删除脚本,只留下blockquote。见http://jsfiddle.net/upsidown/eh4Kp/

你可能需要调整infowindow大小以适应推文,祝你好运!