Google Maps - Multiple markers - 1 InfoWindow problem

I can't get my markers to display different infowindows. The markers always display the content of the last "contentString".

I've read a few other posts but none of them seem to help.

This is the code:

    function setMarkers(branches, map) {
        var bounds = new google.maps.LatLngBounds();
        var contentString = null;
        var infowindow = null;
        infowindow = new google.ma开发者_运维技巧ps.InfoWindow();
        for (var i = 0; i < branches.length; i++) {
            var marker = null;
            branch = branches[i];
            var myLatlngMarker = new google.maps.LatLng(branch[0], branch[1]);
            contentString = '<p>' + branch[3] + '</p>';

            var marker = new google.maps.Marker({
                position: myLatlngMarker,
                map: map,
                title: branch[2]
            });

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

            bounds.extend(myLatlngMarker);
        }

        map.fitBounds(bounds);
    }

Can anyone see what am I doing wrong?

Thanks

Right,

I found a solution. I added an extra property to the marker called 'info' and then referenced it from the 'addlistener' event 'infowindow.setContent(this.info)'.

Here is the updated code:

function setMarkers(branches, map) {
    var marker = null;
    var infowindow = new google.maps.InfoWindow();
    var bounds = new google.maps.LatLngBounds();

    for (var i = 0; i < branches.length; i++) {
        branch = branches[i];

        var myLatlngMarker = new google.maps.LatLng(branch[0], branch[1]);

        var marker = new google.maps.Marker({
            position: myLatlngMarker,
            map: map,
            title: branch[2],
            info: branch[3],
            icon: '<%=Icon%>'
        });

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

        bounds.extend(myLatlngMarker);
    }

    map.fitBounds(bounds);
}

The reason it always displays the last contentString is because that is what it is set to when the click event fires. It gets overwritten in each iteration of the for loop.

You should assign the event handler using a closure and pass contextString as an argument to the function, returning the real handler.

google.maps.event.addListener(marker, 'click', function(content) {
    return function(){
        infowindow.setContent(content);//set the content
        infowindow.open(map,this);
    }
}(contentString));

Have you tried declaring the infowindow and contentString inside the for-loop, instead of outside the loop?

function setMarkers(branches, map) {
        var bounds = new google.maps.LatLngBounds();

        for (var i = 0; i < branches.length; i++) {
            var infowindow = new google.maps.InfoWindow();
            var contentString = "";
            var marker = null;
            branch = branches[i];
            var myLatlngMarker = new google.maps.LatLng(branch[0], branch[1]);
            contentString = '<p>' + branch[3] + '</p>';

            var marker = new google.maps.Marker({
                position: myLatlngMarker,
                map: map,
                title: branch[2]
            });

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

            bounds.extend(myLatlngMarker);
        }

        map.fitBounds(bounds);
    }

Im having the same problem. I was able to get the title show up different though using this code:

  setMarkers(map, airports);
 }

 function setMarkers(map, locations) 
   {
     //you only need 1 infoWindow
     var infowindow = new google.maps.InfoWindow({
       content: "holding" //content will be set later
     });

     for (var i = 0; i < locations.length; i++) 
     {
       var airport = locations[i];
       var myLatLng = new google.maps.LatLng(airport[1], airport[2]);
       var marker = new google.maps.Marker({
             position: myLatLng,
             map: map,
            title: airport[0],
            zIndex: airport[3],
             html: airport[4],
      });




       google.maps.event.addListener(marker, 'click', function() {
               infowindow.setContent(this.html);//set the content
               infowindow.open(map,this);
       });
     }
   }

One way you can get seriously dynamic info into an infoWindow, assuming you have php or such like is to set content of infoWindow as an iframe with src that takes info from the position or ID of the marker in question. So in initialize function or wherever.

var pos_info = new google.maps.InfoWindow({pixelOffset: new google.maps.Size(0, -5), maxWidth: 350, position: posit, ID: "pos_i"});

var pos_mark = new google.maps.Marker({map: map, position: posit, clickable: true, draggable: true, ID: "pos_m", icon: therm2});

pos_mark.addListener('mouseup', function () {
var lat = pos_mark.getPosition().lat();
lat = lat.toFixed(4)
var lng = pos_mark.getPosition().lng();
lng = lng.toFixed(4)
var contentString = "<iframe class='info' src='pos_info.php?lat="+lat+"&lng="+lng+"'></iframe>"
pos_info.setContent(contentString);
pos_info.open(map, pos_mark);
})