title: Google Maps API with Multiple Markers and InfoWindows
body: <p>I'm making a simple page using Google Maps API 3. My first. One marker with InfoWindow works great. I added a second marker but I can't get each to display its own InfoWindow. I'm sure it's simple but it's not working.</p>
  
  <pre><code>function initialize() {
      var myLatlng = new google.maps.LatLng(37.8736111,-122.4555556);
      var myOptions = {
          zoom: 13,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      }
  
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  
      // Marker1  
      var marker1 = new google.maps.LatLng(37.8736111,-122.4555556);
  
      var contentString1 = '&lt;div id="content"&gt;'+
      '&lt;div id="siteNotice"&gt;'+
      '&lt;/div&gt;'+
      '&lt;h2 id="firstHeading" class="firstHeading"&gt;Blackie&amp;#8217;s Pasture&lt;/h1&gt;'+
      '&lt;div id="bodyContent"&gt;'+
      '&lt;p&gt;&lt;b&gt;Historical Marker No. 1&lt;/b&gt;&lt;/p&gt; '+
      '&lt;p&gt;The pasture where Blackie lived &lt;/p&gt; '+
      '&lt;a href="images/harvey.jpg" alt="Harvey" width="185" height="209" target="_blank"&gt;' +
      '&lt;img src="images/harvey.jpg" alt="Harvey" width="93" height="104"  /&gt;&lt;/a&gt;' +
      '&lt;img src="images/marker-test.jpg" alt="Marker placque" width="93" height="104"  /&gt;&lt;/a&gt;&lt;br /&gt;' +
      '&lt;em&gt;Click on a photo to enlarge it&lt;/em&gt;' +
  '&lt;/div&gt;'+
      '&lt;/div&gt;';   
  
      var infowindow = new google.maps.InfoWindow({
          content: contentString1
      });
  
  var marker1 = new google.maps.Marker({
          position: marker1,
          map: map,
          title: "Blackie's Pasture"
      });
  
  google.maps.event.addListener(marker1, 'click', function() {
          infowindow.open(map, marker1);
      });
  
      // Marker2
  var marker2 = new google.maps.LatLng(37.8837959515249951,-122.46597290039062);
  
  var contentString2 = '&lt;div id="content"&gt;'+
      '&lt;div id="siteNotice"&gt;'+
      '&lt;/div&gt;'+
      '&lt;h2 id="firstHeading" class="firstHeading"&gt;Marker Number 2&lt;/h1&gt;'+
      '&lt;div id="bodyContent"&gt;'+
      '&lt;p&gt;&lt;b&gt;The second marker&lt;/b&gt;&lt;/p&gt; '+
      '&lt;p&gt;Just another place &lt;/p&gt; '+
      '&lt;a href="images/harvey.jpg" alt="Harvey" width="185" height="209" target="_blank"&gt;' +
      '&lt;img src="images/harvey.jpg" alt="Harvey" width="93" height="104"  /&gt;&lt;/a&gt;' +
      '&lt;img src="images/marker-test.jpg" alt="Marker placque" width="93" height="104"  /&gt;&lt;/a&gt;&lt;br /&gt;' +
      '&lt;em&gt;Click on a photo to enlarge it&lt;/em&gt;' +
      '&lt;/div&gt;'+
      '&lt;/div&gt;';
  
      var infowindow = new google.maps.InfoWindow({
          content: contentString2
      });
  
  var marker2 = new google.maps.Marker({
          position: marker2,
          map: map,
          title: "Marker Number 2"
      });
  
  
      google.maps.event.addListener(marker2, 'click', function() {
          infowindow.open(map,marker2);
      });
  }
  </code></pre>