Solved: JavaScript - need google maps info window to open with correct marker?

Hi,
I am trying to open an info window when a corresponding marker is clicked but the same info window opens regardless of marker clicked?

Can anyone tell me what I am doing wrong.

Thanks...
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Complex Icons</title>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
      function initialize() {
        var mapOptions = {
          zoom: 10,
          center: new google.maps.LatLng(-37.7, 143.75),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById('map_canvas'),
                                      mapOptions);

        setMarkers(map, our_stores);
      }

      /**
       * Data for the markers consisting of a name, a LatLng and a zIndex for
       * the order in which these markers should display on top of each
       * other.
       */
      var our_stores = [
        ['Store One', -37.745647, 143.925672, 4,'<b>some info here about Store One</b>' ],
        ['Store Two¿', -37.767122, 143.752098, 5,'<b>some info here about Second Store¿</b>'],
        ['Head Office', -37.584975, 143.721239, 3,'<p>Info Here about Head Office</p>']
      ];

      function setMarkers(map, locations) {
        // Add markers to the map

        // Marker sizes are expressed as a Size of X,Y
        // where the origin of the image (0,0) is located
        // in the top left of the image.

        // Origins, anchor positions and coordinates of the marker
        // increase in the X direction to the right and in
        // the Y direction down.
        var image = new google.maps.MarkerImage('http://developers.google.com/maps/documentation/javascript/examples/images/beachflag.png',
            // This marker is 20 pixels wide by 32 pixels tall.
            new google.maps.Size(30, 30),
            // 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, 32));
        var shadow = new google.maps.MarkerImage('http://developers.google.com/maps/documentation/javascript/examples/images/beachflag_shadow.png',
            // The shadow image is larger in the horizontal dimension
            // while the position and offset are the same as for the main image.
            new google.maps.Size(37, 32),
            new google.maps.Point(0,0),
            new google.maps.Point(0, 32));
            // Shapes define the clickable region of the icon.
            // The type defines an HTML &lt;area&gt; element 'poly' which
            // traces out a polygon as a series of X,Y points. The final
            // coordinate closes the poly by connecting to the first
            // coordinate.
        var shape = {
            coord: [1, 1, 1, 20, 18, 20, 18 , 1],
            type: 'poly'
        };
		
        for (var i = 0; i < locations.length; i++) {
          var our_store = locations[i];
		  var infoHead  = our_store[0];
		  var contentString = our_store[4];
		  
          var myLatLng = new google.maps.LatLng(our_store[1], our_store[2]);
          var marker = new google.maps.Marker({
              position: myLatLng,
              map: map,
              shadow: shadow,
              icon: image,
              shape: shape,
              title: our_store[0],
              zIndex: our_store[3]
		  });
		 
	

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });
		 
		  
		google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });	  
		  
        }
     

	   

	 
	 
	  }
    </script>
<style>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map_canvas {
  height: 450px;
  width: 600px;
}

@media print {
  html, body {
    height: auto;
  }

  #map_canvas {
  height: 450px;
  width: 600px;
  }
}

</style>
  </head>
  <body onload="initialize()">
    <div id="map_canvas"></div>
  </body>
</html>
Open in new window