title: Google Maps API Multiple Markers with Infowindows
body: <p>I am trying to add multiple markers each with its own infowindow that comes up when clicked on. I am having trouble with getting the infowindows coming up, when I try it either shows up only one marker without an infowindow. </p>
  
  <p>Thanks, let me know if you need some more information</p>
  
  <pre><code>&lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"/&gt;
  &lt;style type="text/css"&gt;
  html {
      height: 100%
  }
  
  body {
      height: 100%;
      margin: 0;
      padding: 0
  }
  
  #map_canvas {
      height: 100%
  }
  &lt;/style&gt;
  &lt;script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&amp;sensor=false"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  var locations = [
      ['loan 1', 33.890542, 151.274856, 'address 1'],
      ['loan 2', 33.923036, 151.259052, 'address 2'],
      ['loan 3', 34.028249, 151.157507, 'address 3'],
      ['loan 4', 33.80010128657071, 151.28747820854187, 'address 4'],
      ['loan 5', 33.950198, 151.259302, 'address 5']
  ];
  
  function initialize() {
  
      var myOptions = {
          center: new google.maps.LatLng(33.890542, 151.274856),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
  
      };
      var map = new google.maps.Map(document.getElementById("default"),
          myOptions);
  
      setMarkers(map, locations)
  }
  
  
  function setMarkers(map, locations) {
  
      var marker, i
      for (i = 0; i &lt; locations.length; i++) {
  
          var loan = locations[i][0]
          var lat = locations[i][1]
          var long = locations[i][2]
          var add = locations[i][3]
  
          latlngset = new google.maps.LatLng(lat, long);
  
          var marker = new google.maps.Marker({
              map: map, title: loan, position: latlngset
          });
          map.setCenter(marker.getPosition())
  
          var content = "Loan Number: " + loan + '&lt;/h3&gt;' + "Address: " + add
  
          var infowindow = new google.maps.InfoWindow()
  
          google.maps.AddListener(marker, 'click', function (map, marker) {
              infowindow.setContent(content)
              infowindow.open(map, marker)
          });
      }
  }
  
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="initialize()"&gt;
  &lt;div id="default" style="width:100%; height:100%"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>