Google Maps v3 - Infowindow always assumes the last marker's position

Question

I\'m running into an issue with the position of my infowindows. I am generating the markers in a for-loop, but when I click on an infowindow, the position is always set to the m

Answer 1

You have to use closures to solve this problem.

The below in a working sample

Use the JS method AddInfoWidnow from below code to add InfoWindow to a marker.

function AddInfoWidnow(marker,message)
{
     var infowindow = new google.maps.InfoWindow({ content: message });

     google.maps.event.addListener(marker, 'click', function() {

     infowindow.open(marker.get('map'), marker);

    }); 

}

call the AddInfoWidnow method inside the for loop

function ShowOnMap(ContainerId, mapItems) {

var DefaultLatLng= new google.maps.LatLng('12.967461', '79.941824');

var mapOptions = {
    center: DefaultLatLng,
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    marker: true
};

var mapCust = new google.maps.Map(document.getElementById(ContainerId), mapOptions);

var arrJsonObject = JSON.parse(mapItems);

for (var y = 1; y <= arrJsonObject.length; y++) 
{

    var myLatLng1 = new google.maps.LatLng(arrJsonObject[y - 1].Latitude, arrJsonObject[y - 1].Lonngitude);

    var marker = new google.maps.Marker({
    position: myLatLng1,
    map: mapCust,
    title: 'Marked at '+ arrJsonObject[y - 1].markedDate
});

    addInfoWindows(marker,y-1,arrJsonObject);


    marker.setMap(mapCust);

}
}

Using the below snnipet I called it.

  var mapItems='[
  {
    "Latitude": "22.575897",
    "Lonngitude": "88.431754",
    "CustomerCode": "*$$$*",
    "CustomerName": "*@@@*",
    "markedDate": "2/20/2014 12:04:41 PM"
  },
  {
    "Latitude": "22.615067",
    "Lonngitude": "88.431759",
    "CustomerCode": "*$$$*",
    "CustomerName": "*@@@*",
    "markedDate": "2/20/2014 3:02:19 PM"
  }
]';
    ShowOnMap(containerId2, mapItems);

The thing is you have to add the info window using closure and This works for me.

Reference