将Google Maps API与Facebook评论插件集成

时间:2012-11-26 23:50:54

标签: javascript facebook google-maps-api-3 google-maps-markers facebook-comments

好的是similar question,但仍未解决。

是否可以在每个infowindow中添加Facebook评论功能?一旦您点击地图上的点,我希望在每个信息窗口中显示不同的Facebook评论流。我目前正在尝试,但如果有人知道该怎么做,如果你能提供一些帮助会很有帮助!

这是我到目前为止所做的:

<script type="text/javascript">

        var map;
        function initialize() {
        var myOptions = {
            zoom: 3,
            center: new google.maps.LatLng(46.073231,-41.865238),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
                map = new
                    google.maps.Map(document.getElementById('map'),
            myOptions);


        var locations = [
            ["Event",51.526902,-0.085588,"London, UK","Jan 23, 2012"],
            ["Event",34.083517,-118.389373,"Los Angeles, USA","Jan 25, 2012"],
            ["Event",40.716428,-73.966241,"New York, USA","Jan 30, 2012"],
            ["Event",40.723454,-73.986497,"Queens, USA","Jan 31, 2012"]
        ];

        var infowindow = new google.maps.InfoWindow();

        var marker, i;

        for (i = 0; i < locations.length; i++) 
        {
            var iconImage, heading;

            switch(locations[i][0]) {
                case "Event":   
                    iconImage = "img/event.png";
                    heading = "<h2 class='event'><img src="+iconImage+" />" +locations[i][3]+"</h2>";
                    break;

            marker = new google.maps.Marker({
                icon: iconImage,
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map
            });
            google.maps.event.addListener(marker, 'click', (function(marker, i, heading) {
                return function() {
                    markerContent = heading+"<p><b></b> "+ locations[i][4]+"</p>";
                    infowindow.setContent(markerContent);
                    infowindow.open(map, marker);
                }
            })(marker, i, heading));  // end marker click function
                }}; // end for loop     
    </script>

1 个答案:

答案 0 :(得分:0)

只需为每个标记创建唯一的信息窗口,并确保每个标记内的fb插件指向有效的唯一网址。如果你没有使用标记并允许用户点击地图中的任何地方,那么纬度+经度哈希可能会解决。

如果您在创建唯一信息窗口时遇到问题,这可能有所帮助:google maps api multiple markers with info windows