title: Jquery Mobile google maps , i have to refresh the page to show map
body: <p>I am making an application that show positions on maps, I have a page that links to the map, when I click that link, its change to the map page without load the map.</p>
  
  <p>So I have to click the browser back button and refresh the page that have the link, after that I click again the link and the map is loaded at this time, so if you can help me to load the map with out refresh i will be grateful</p>
  
  <pre><code>&lt;div data-role="page"&gt;
          &lt;div data-role="header"&gt;
              &lt;a href="menudep.jsp" data-icon="back" data-theme="c"&gt;Atras&lt;/a&gt;
              &lt;h1&gt;&lt;%=corto%&gt;&lt;/h1&gt;
              &lt;h4&gt;&lt;img src="../images/logo_mich.png" width="40" height="40" /&gt;&lt;/h4&gt;
              &lt;a href="mobilelaip.html" data-icon="home" data-theme="c"&gt;Inicio&lt;/a&gt;
          &lt;/div&gt;
          &lt;div data-role="content"&gt;
              &lt;p&gt;
                  &lt;%=descrip%&gt;
              &lt;/p&gt;
              &lt;a href="map3.html"&gt;Ubicación&lt;/a&gt;
              &lt;ul data-role="listview" data-inset="true"&gt;
  
                  &lt;li&gt;&lt;a href="oficio.jsp?dep=&lt;%=id_dep%&gt;"&gt;Info. Oficio&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="contacto.jsp?dep=&lt;%=id_dep%&gt;" data-rel="dialog"&gt;Contacto&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="paginaweb.jsp?dep=&lt;%=id_dep%&gt;" data-inline="true" data-rel="dialog"&gt;Pagina Web&lt;/a&gt;&lt;/li&gt;             
  
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;  
  
  
       &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"&gt;&lt;/script&gt;
       &lt;script type="text/javascript"&gt;
          // When map page opens get location and display map
          $('.page-map').live("pagecreate", function() {
              if(navigator.geolocation) {
                  navigator.geolocation.getCurrentPosition(function(position){
                      initialize(position.coords.latitude,position.coords.longitude);
                  });
              }
          });
  
          function initialize(lat,lng) {
              var latlng = new google.maps.LatLng(lat, lng);
              var myOptions = {
                  zoom: 20,
                  center: latlng,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
              };
              var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
              new google.maps.Marker ( 
              { 
                  map : map, 
                  animation : google.maps.Animation.DROP,
                  position : latlng  
              });
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>And the map3.html code is this</p>
  
  <pre><code>&lt;div data-role="page" class="page-map" style="width:100%; height:100%;"&gt;
  &lt;div data-role="header"&gt;&lt;h1&gt;Mapa&lt;/h1&gt;&lt;/div&gt;
  &lt;div data-role="content" style="width:100%; height:100%; padding:0;"&gt; 
      &lt;div id="map_canvas" style="width:100%; height:100%;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>thanks for your answers</p>