title: google maps api multiple markers info window only showing last element
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/11106671/google-maps-api-multiple-markers-with-infowindows">Google Maps API Multiple Markers with Infowindows</a>  </p>
  </blockquote>
  
  
  
  <p>I am creating a Google Maps for a school project. Being a JavaScript newb, I got the code from a tutorial I found online. My problem is that I have an array of markers and multiple info windows, but whenever you click on a marker (doesn't matter which one), the info window only shows the content in the last element. Now I know this problem has been mentioned many times, unfortunately, I was unable to take the solutions mentioned in the other posts and apply it to my work.</p>
  
  <p>here a is a link to the map:
  <a href="http://urloritdidnthappen.appspot.com/320001" rel="nofollow noreferrer">link to google maps</a></p>
  
  <p>please let me know how to fix my problem. thanks.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
   &lt;style&gt;
      body { font-family: Helvetica; }
      .map-content h3 { margin: 0; padding: 5px 0 0 0; }
   &lt;/style&gt;
   &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"/&gt; 
   &lt;script&gt;
      // Set the Map variable
      var map;
  
      function initialize() {
          var myOptions = {
              zoom: 9,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
  
          var all = [
              ["Location 1", "Summerdale Rd", "Elon", "NC",
              "27253", "36.150491", "-79.5470544"],
              ["Location 2", "7205 Olmstead Dr", "Burlington", "NC",
              "27215", "36.069974", "-79.548101"],
              ["Location 3", "W Market St", "Graham", "NC",
              "27253", "36.0722225", "-79.4016207"],
              ["Location 4", "Mt Hermon Rock Creek Rd", "Graham", "NC",
              "27253", "35.9826328", "-79.4165216"],
              ["Location 5", "415 Spring Garden St", "Greensboro", "NC",
              "27401", "36.06761", "-79.794984"]
              ];
  
          var infoWindow = new google.maps.InfoWindow;
          map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  
          // Set the center of the map
          var pos = new google.maps.LatLng(36.0621881, -79.5101063);
          map.setCenter(pos);
  
          function infoCallback(infowindow, marker) {
              return function() {
                  infowindow.open(map, marker);
              };
          }
  
          function setMarkers(map, all) {
              for (var i in all) {
                  var name = all[i][0];
                  var address = all[i][1];
                  var city = all[i][2];
                  var state = all[i][3];
                  var zip = all[i][4];
                  var lat = all[i][5];
                  var lng = all[i][6];
                  var latlngset;
                  latlngset = new google.maps.LatLng(lat, lng);
  
      /*var marker = new google.maps.Marker({  
      map: map,  title: city,  position: latlngset  
      });*/
  
                  var content = '&lt;div class="map-content"&gt;&lt;h3&gt;' + name + '&lt;/h3&gt;' + address + '&lt;br /&gt;' + city + ', ' + state + ' ' + zip + '&lt;br /&gt;&lt;a href="http://maps.google.com/?daddr=' + address + ' ' + city + ', ' + state + ' ' + zip + '" target="_blank"&gt;Get Directions&lt;/a&gt;&lt;/div&gt;';
  
      /*var infowindow = new google.maps.InfoWindow();
      for(var i=0; i&lt;all.length; i++)
      {
      infowindow.setContent(content);
      google.maps.event.addListener(
      marker, 
      'click', 
      infoCallback(infowindow, marker)
      );
  
      }*/
  
                  var infowindow = new google.maps.InfoWindow();
  
                  for (var i = 0; i &lt; all.length; i++) {
                      var marker = new google.maps.Marker({
                          map: map,
                          title: city,
                          position: latlngset
                      });
  
                      google.maps.event.addListener(marker, 'click', (function(marker, i) {
                          return function() {
                              infowindow.setContent(content);
                              infowindow.open(map, marker);
                          }
                      })(marker, i));
                  }
              }
          }
  
          // Set all markers in the all variable
          setMarkers(map, all);
      };
  
      // Initializes the Google Map
      google.maps.event.addDomListener(window, 'load', initialize);
   &lt;/script&gt;
   &lt;/head&gt;
  
   &lt;body&gt;
      &lt;div id="map_canvas" style="height: 100%; width: 100%;"&gt;&lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>