Google Maps javascript loop problem

[joemccarroll]

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.

<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 advice is appreciated. I’ve searched for a solution but cannot find one.