title: Javascript Google Maps Marker Clustering with InfoWindows - Possible?
body: <p>I have worked out how to make a google map using Marker Clusterer and it works just the way I want.</p>
  
  <p>So, I next moved on to try and work out how to add InfoWindows to markers but I have got myself in a muddle.</p>
  
  <p>What ever I try, the infowindow information is always the details of the last item in the markers.txt file. ie "Bathtub - 122 Byron Road, CHELMSFORD, CM2 6HJ"</p>
  
  <p>I think it's to do with creating the markers inside the loop. But I cannot work out how else to do it. I was following this post which didn't say that it didn't work.</p>
  
  <p><a href="https://stackoverflow.com/questions/7580923/infowindow-on-marker-using-markerclusterer">InfoWindow on Marker using MarkerClusterer</a></p>
  
  <p>I have put up a demo of my work to date so you can see what I mean here:</p>
  
  <p><a href="http://googlemap.azurewebsites.net/2clustermapwithinfowindows.html" rel="nofollow noreferrer">http://googlemap.azurewebsites.net/2clustermapwithinfowindows.html</a></p>
  
  <p>and this is my code:</p>
  
  <p>any help would be very much appreciated!</p>
  
  <pre><code>&lt;!DOCTYPE&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;MarkerClusterer v3 Example&lt;/title&gt;
  
  &lt;style type="text/css"&gt;
  
      #map {
          width: 100%;
          height: 100%;
      }
  &lt;/style&gt;
  
  &lt;script src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/markers.txt"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
      var infowindow = new google.maps.InfoWindow({});
  
      function initialize() {
          var center = new google.maps.LatLng(54,-2);
  
          var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 5,
              center: center,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          });
  
          var stack = [];
          var markers = [];
          for (var i = 0; i &lt; data.count; i++) {
              var dataPhoto = data.clustermarker[i];
              // obtain the attribues of each marker
              var lat = dataPhoto.latitude;
              var lng = dataPhoto.longitude;
              var marker = new google.maps.Marker({
                  position: new google.maps.LatLng(lat, lng),
                  map: map,
                  title: "This is a marker"
              });
              google.maps.event.addListener(marker, 'click', (function (marker, i) {
                  return function () {
                      infowindow.setContent("&lt;div id='pano' style='width: 400px; height: 400px;'&gt;&lt;/div&gt;&lt;div&gt;" + dataPhoto.businessname + "&lt;/div&gt;" + "&lt;div&gt;" + dataPhoto.fulladdress + "&lt;/div&gt;");
                      infowindow.open(map, marker);
                  }
              })(marker, i));
              stack.push(marker);
          }
          var mc = new MarkerClusterer(map, stack);
  
      }
      google.maps.event.addDomListener(window, 'load', initialize);
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="map"&gt;&lt;/div&gt;
  &lt;div id="pano"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>