title: InfoWindows are not unique, google maps API v3, jquery mobile
body: <p>I have a simple program where I want the following to happen:</p>
  
  <ol>
  <li>Click "Add Some Markers to Map", will show 4 markers with the locations specified in the <code>cityList</code> array.</li>
  <li>Click on a marker and it will open up and infoWindow and display the corresponding index in the <code>cityList</code> array.  So if you click on the marker corresponding to <code>cityList[0]</code>, it will show you "0" in the infoWindow.</li>
  </ol>
  
  <p>I can add the markers and add the infoWindows, but the content in the infoWindows are incorrect. First of all, they are all the same, and secondly the are displaying the value of the iterator <code>i</code> at the end of the loop.</p>
  
  <p>My questions are</p>
  
  <ol>
  <li>How can I fix this?</li>
  <li>I've tried implementing this same code using a global variable for the map and it doesn't work.  Why not? For example, if I replace</li>
  </ol>
  
  <pre class="lang-js prettyprint-override"><code>function initialize()
  {
      $('#map_canvas').gmap({ 'center': city0, 'zoom': 7, 'disableDefaultUI':false });
  }
  </code></pre>
  
  <p>with</p>
  
  <pre class="lang-js prettyprint-override"><code>var map;
  function initialize()
  {
      map = new google.maps.Map(document.getElementById("map_canvas"), {'center': city0, 'zoom': 7, 'disableDefaultUI':false } );
  }
  </code></pre>
  
  <p>then the map doesn't even show up when I load the page.</p>
  
  <p>Here is my code:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;jQuery mobile with Google maps - Google maps jQuery plugin&lt;/title&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false&amp;language=en"&gt; &lt;/script&gt;
      &lt;script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
      var city0 = new google.maps.LatLng(41.850033,-87.6500523);
      var city1 = new google.maps.LatLng(41,-87);
      var city2 = new google.maps.LatLng(41.5,-87.5);
      var city3 =  new google.maps.LatLng(41.4,-87.2);
      var cityList = [city0, city1, city2, city3];
  
      function initialize()
      {
          $('#map_canvas').gmap({ 'center': city0, 'zoom': 7, 'disableDefaultUI':false });
      }
  
      $(document).ready(function()
      {
          initialize();
          $('.add-markers').click(function() {
              for(var i=0; i&lt;cityList.length; i++){
                  $('#map_canvas').gmap('addMarker', { 'position': cityList[i] } ).click(function() {
                      $('#map_canvas').gmap('openInfoWindow', {'content': i.toString()}, this);
                  });
              }
          });
      });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="basic-map" data-role="page"&gt;
          &lt;div data-role="header"&gt;
              &lt;h1&gt;&lt;a data-ajax="false" href="/"&gt;jQuery mobile with Google maps v3&lt;/a&gt; examples&lt;/h1&gt;
              &lt;a data-rel="back"&gt;Back&lt;/a&gt;
          &lt;/div&gt;
          &lt;div data-role="content"&gt;
              &lt;div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"&gt;
                  &lt;div id="map_canvas" style="height:350px;"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;a href="#" class="add-markers" data-role="button" data-theme="b"&gt;Add Some More Markers&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="info-page" data-role="page"&gt;
          &lt;div data-role="header"&gt;
              &lt;h1&gt;&lt;a data-ajax="false" href="/"&gt;more info v3&lt;/a&gt; examples&lt;/h1&gt;
              &lt;a data-rel="back"&gt;Back&lt;/a&gt;
          &lt;/div&gt;
          &lt;div data-role="content"&gt;
              &lt;div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"&gt;
                  &lt;div id="info_page" style="height:350px;"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="moreInfo"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>