多个谷歌地图信息窗口答案

【问题标题】：Multiple Google Maps infowindow多个谷歌地图信息窗口
【发布时间】：2011-05-21 20:21:58
【问题描述】：

当前我有一个谷歌地图，它会在我的数据库中的地图上显示一些标记...我想在用户点击标记时添加一个信息窗口。

我让它工作了，但问题是它只显示在最后一个加载的标记上，这是为什么呢？

这是生成标记和信息窗口的代码。

<script type="text/javascript">
function initialize() {
    var myOptions = {
        zoom: 3,
        center: new google.maps.LatLng(41.850033, -87.6500523),
        disableDefaultUI: true,
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    setMarkers(map, offices);
}


/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var offices = [<cfoutput>#officeList#</cfoutput>];

function setMarkers(map, locations) {
    // Add markers to the map
    // Marker sizes are expressed as a Size of X,Y
    // where the origin of the image (0,0) is located
    // in the top left of the image.
    // Origins, anchor positions and coordinates of the marker
    // increase in the X direction to the right and in
    // the Y direction down.
    var image = new google.maps.MarkerImage('images/pin.png',
    // This marker is 20 pixels wide by 32 pixels tall.
    new google.maps.Size(14, 26),
    // The origin for this image is 0,0.
    new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at 0,32.
    new google.maps.Point(0, 32));

    for (var i = 0; i < locations.length; i++) {
        var office = locations[i];
        var myLatLng = new google.maps.LatLng(office[1], office[2]);

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image,
            title: office[0],
            zIndex: office[3]
        });

        var contentString = "Hello!!!";
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
        });
    }
}
</script>

【问题讨论】：

标签： javascript google-maps

【解决方案1】：

我也偶然发现了这个问题。

这是我修复它的方法：

我使用函数将标记绑定到信息窗口。

var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image,
            title: office[0],
            zIndex: office[3]
        });

var contentString = "Hello!!!";
var infowindow = new google.maps.InfoWindow;

bindInfoW(marker, contentString, infowindow);

}

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

【讨论】：