title: jQuery mobile, how to add a pin to a google map
body: <p>I'm using the example code from jQuery documents </p>
  
  <pre><code>&lt;div data-role="popup" id="popupMap" data-overlay-theme="a" data-theme="a" data-corners="false" data-tolerance="15,15"&gt;
  
      &lt;a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right"&gt;Close&lt;/a&gt;
  
      &lt;iframe src="map.html" width="480" height="320" seamless&gt;&lt;/iframe&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Map&lt;/title&gt;
      &lt;script&gt;
          function initialize() {
              var myLatlng = new google.maps.LatLng( 51.520838, -0.140261 );
              var myOptions = {
                  zoom: 15,
                  center: myLatlng,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
              }
              var map = new google.maps.Map( document.getElementById( "map_canvas" ), myOptions );
          }
      &lt;/script&gt;
      &lt;script src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
      &lt;style&gt;
          html {
              height: 100%;
              overflow: hidden;
          }
          body {
              margin: 0;
              padding: 0;
              height: 100%;
          }
          #map_canvas { 
              height: 100%;
          }    
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body onload="initialize()"&gt;
  
      &lt;div id="map_canvas"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and this opens up Google maps in a popup windows in the screen.</p>
  
  <p>But how can I make this work with a pin dropped at a specific location?</p>