javascript - Multiple Google Maps infowindow

Question

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>

Answer 1

I've also stumbled across this problem.

Here's how I fixed it:

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