多个谷歌地图信息窗口 [英] Multiple Google Maps infowindow

问题描述

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

Current I have a google maps that will display some markers on the map from my DB... I would like to add a infowindow when the users click on the marker.

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

I got it to work, but the problem is that it only display on the last marker that was loaded, why is that?

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

Here is the code to generate the marker and the infowindow.

<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>

推荐答案

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

I've also stumbled across this problem.

这是我修复它的方法:

我使用一个函数将标记绑定到信息窗口.

I used a function to bind a marker to an infowindow.

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

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