In my page, latitude, longitude and info window content are present in an array of objects named obj.

So if I need the latitude of property of the 1st object, I can call obj[0].latitude.

The infoWindow content for each object is stored in obj[i].text.

I'm using the below loop to loop through the lat & long values and display the markers and infoWindows.

  for (x=1; x<=obj.length; x++)
  {
      var latlng1 = new google.maps.LatLng(obj[x].latitude, obj[x].longitude);


  var marker2  = new google.maps.Marker({
    position : latlng1,
    map  : map,
    icon     : prevIcon
    });

  infowindow = new google.maps.InfoWindow();

  info = obj[x].text;

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

The above code works, but all the infoWindows are showing the content of the last obj[i].text.

How do I associate the infoWindow content of a particular infoWindow (obj[x].text) to that infoWindow instance only?

It would be better if someone can point out a solution without using jQuery or any other external libraries.

Thanks,

In my page, latitude, longitude and info window content are present in an array of objects named obj.

So if I need the latitude of property of the 1st object, I can call obj[0].latitude.

The infoWindow content for each object is stored in obj[i].text.

I'm using the below loop to loop through the lat & long values and display the markers and infoWindows.

  for (x=1; x<=obj.length; x++)
  {
      var latlng1 = new google.maps.LatLng(obj[x].latitude, obj[x].longitude);


  var marker2  = new google.maps.Marker({
    position : latlng1,
    map  : map,
    icon     : prevIcon
    });

  infowindow = new google.maps.InfoWindow();

  info = obj[x].text;

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

The above code works, but all the infoWindows are showing the content of the last obj[i].text.

How do I associate the infoWindow content of a particular infoWindow (obj[x].text) to that infoWindow instance only?

It would be better if someone can point out a solution without using jQuery or any other external libraries.

Thanks,

• javascript
• google-maps
• google-maps-api-3
• infowindow

• 2 Javascript has no block scope, you're writing over the same variables each loop. At the end, there's only 1 info variable and contains the text of your last obj. – BGerrissen Commented Feb 4, 2011 at 11:15
• Could you provide some working demo? Maybe on jsfiddle – mdrg Commented Feb 4, 2011 at 11:16
• I'm sorry, but the page contains PHP code to fetch data from MySQL table. It wouldn't work on jsfiddle :( – Sparky Commented Feb 4, 2011 at 11:26

2 Answers 2

Should get you a long way.

function attachMarker( data ) {

    var latLng = new google.maps.LatLng( data.latitude, data.longitude );

    var marker = new google.maps.Marker({
        position : latLng,
        map      : map, // global variable?
        icon     : prevIcon // global variable?
    });

    google.maps.event.addListener(marker, 'mouseover', function() {
       infowindow.setContent( data.text );
       infowindow.open(map, this);
    });

    // add marker here.

}

// afaik, you only need 1 instance of InfoWindow if you only change content.
var infowindow = new google.maps.InfoWindow();

var i = obj.length;
while ( i-- ) {
    attachMarker( obj[ i ] );
}

BGerrissen's ment above helped a lot.

I managed to achieve function closure on the info variable.

The following Google Groups post explains how to.

https://groups.google./group/google-maps-api-for-flash/browse_thread/thread/befeb9bf2d1ebcc9

Thanks everyone :)