Google Maps javascript loop problem

[Joe McCarroll]

Hi everyone,

I'm having an issue trying to add infowindows to markers on Google Maps APIv3.

When I click on any of the markers the final infowindow in the loop always opens.

Be great if someone could point me in the right direction to open the correct infowindow. There are two markers on the map below, Alicante and Ibiza.

Code JavaScript:

 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 
 
<script type="text/javascript">
  function initialize() { 
 
	var jet2Styles = [
  {
     elementType: "labels",
     stylers: [{ visibility: "off" }
     ]
   },{
     featureType: "administrative.province",
     stylers: [
       { visibility: "off"}
     ]
   },{
     featureType: "poi",
     stylers: [
       { visibility:"off"}
     ]
   },{
     featureType: "administrative",
     stylers: [
       { visibility: "off" }
     ]
   },{
     featureType: "administrative.country",
     stylers: [
       { visibility: "on" }
     ]
   },{
     featureType: "administrative.country",
	 elementType: "labels",
     stylers: [
       { visibility: "off" }
     ]
   },{
     featureType: "landscape",
	 elementType: "all",
     stylers: [
       { visibility: "off" }
     ]
   },{
     featureType: "landscape",
	 elementType: "geometry",
     stylers: [
       { hue: "#FFFFFF" },  { lightness: 0 }, { saturation: 0 }
     ]
   },{
     featureType: "water",
     stylers: [
     { hue: "#0077FF" },  { lightness: -22 }
     ]
	 },{
     featureType: "road",
     stylers: [
       { visibility: "off" }
     ]
   }
 ];
 
 
  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var jet2MapType = new google.maps.StyledMapType(jet2Styles,
    {name: "Jet2.com Destinations"});
 
 var myLatlng = new google.maps.LatLng(43.716135, 10.396584);
    var myOptions = {
      zoom: 5,
      center: myLatlng,
      mapTypeControlOptions: {
	  mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'jet2destinations']
    }
	};
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
	//Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('jet2destinations', jet2MapType);
  map.setMapTypeId('jet2destinations');
 
 
 
 
 
var alicante = 'alicante';
 
 
var infowindow = new google.maps.InfoWindow({
    content: alicante,
	maxWidth: 300
});
 
var alicanteImage = new google.maps.MarkerImage('alicante.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(150, 15),
      // 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, 0));
 
var alicante = new google.maps.Marker({
        position: new google.maps.LatLng (38.345210, -0.480994), 
        map: map,
		icon: alicanteImage,
        title:"Alicante"
}); 
 
 
google.maps.event.addListener(alicante, 'click', function() {
infowindow.open(map,alicante);
});
 
 
 
 
 
 
 
 
 
var ibiza = 'ibiza';
 
 
var infowindow = new google.maps.InfoWindow({
    content: ibiza,
	maxWidth: 300
});
 
var ibizaImage = new google.maps.MarkerImage('ibiza.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(150, 15),
      // 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, 0));
 
var ibiza = new google.maps.Marker({
        position: new google.maps.LatLng (38.908857, 1.432378), 
        map: map,
		icon: ibizaImage,
        title:"Ibiza"
}); 
 
 
google.maps.event.addListener(ibiza, 'click', function() {
infowindow.open(map,ibiza);
});
 
 
 
}
</script>


Any help is much appreciated here - thanks

 

[Rossko]

> When I click on any of the markers the final infowindow in the loop always
> opens.

I don't see any loop in your code.
You re-use the same variable 'infowindow' twice, so its content gets
left at the last value for whatever may get clicked later.

There are in fact a lot of similar posts in the group that might be
worth looking at
http://groups.google.com/group/google-maps-js-api-v3/search?group=google-maps-js-api-v3&q=last+infowindow
Well worth looking into 'function closure' for the easy fix for your
problem