title: Add infoWindow to a map marker using jQuery mobile, google maps API v3
body: <p>I have a simple script that adds a marker on a map when you click a button using jQuery mobile and the Google Maps API v3.  I want to add a basic infoWindow to that marker, so that when you click on it, it says "Hello World".</p>
  
  <p>This seems like it should be very easy, but I can't seem to get the syntax correct.  I'm adding markers like this</p>
  
  <pre class="lang-js prettyprint-override"><code>$('#map_canvas').gmap('addMarker', { 'position': chicago } );
  </code></pre>
  
  <p>and I can't seem to find any good examples where you also setup an infowindow when you also set up the marker.</p>
  
  <p>Here is my code. If you save in the <code>jquery-ui-map-3.0-rc\demos\</code> directory, then all the paths will be correct.  When you click 'Add Some More Markers', a marker in the <code>chicago</code> location is added to the map. I want to be able to click on that marker and have an info window pop up that says "Hello World!".</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 chicago = new google.maps.LatLng(41.850033,-87.6500523);
              var mobileDemo = { 'center': '41,-87', 'zoom': 7 };
              var cityList = [];
  
              function initialize()
              {
                  $('#map_canvas').gmap({ 'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':false });
              }
  
  
              $(document).ready(function() 
              {
                  initialize();
                  $('.add-markers').click(function() {
                      $('#map_canvas').gmap('addMarker', { 'position': chicago } );
                  });
              });
          &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;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>If I change the code inside <code>$(document).ready(function()){}</code> to the following, the marker doesn't even show up anymore.</p>
  
  <pre class="lang-js prettyprint-override"><code>        $(document).ready(function()
          {
              initialize();
              $('.add-markers').click(function() {
                  //$('#map_canvas').gmap('addMarker', { 'position': chicago, 'content': "Hello World!"} );
                  $('#map_canvas').gmap({'callback': function() {
                      var self = this;
                      self.addMarker({'position': chicago }).click(function() {
                          self.openInfoWindow({ 'content': 'Hello World!' }, this);
                      });
                      }});
                  });
              });
  </code></pre>