Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I found the solution. I needed to initialize the Google map in the "pagecreate" jQuery Mobile event instead of on $(document).ready. I also had a problem with the full map not rendering properly everytime the page showed so I solved that by calling google.maps.event.trigger(map, 'resize') to refresh the map on the "pageshow" jQuery Mobile event.</p> <p>Here is my code:</p> <p>index.html</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Index&lt;/title&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /&gt; &lt;script src="http://code.jquery.com/jquery-1.4.4.min.js"&gt;&lt;/script&gt; &lt;script src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"&gt;&lt;/script&gt; &lt;style type="text/css"&gt; .gmap { height: 330px; width: 100%; margin: 0px; padding: 0px } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div data-role="page"&gt; &lt;div data-role="header"&gt; &lt;h1&gt;jQuery Mobile&lt;/h1&gt; &lt;/div&gt; &lt;div data-role="content"&gt; &lt;ul data-role='listview' id='menu'&gt; &lt;li&gt;&lt;a href="pages/map1.html"&gt;external map page 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="pages/map2.html"&gt;external map page 2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>map1.html</p> <pre><code>&lt;div data-role="page" class="page-map1"&gt; &lt;div data-role="header"&gt; &lt;h1&gt;jQuery Mobile&lt;/h1&gt; &lt;/div&gt; &lt;div data-role="content"&gt; &lt;h2&gt;Map&lt;/h2&gt; &lt;div id="map1" class="gmap"&gt;&lt;/div&gt; &lt;script type="text/javascript"&gt; var map1, latlng1, options1; function initialize() { latlng1 = new google.maps.LatLng(40.716948, -74.003563); options1 = { zoom: 14, center: latlng1, mapTypeId: google.maps.MapTypeId.ROADMAP }; map1 = new google.maps.Map(document.getElementById("map1"), options1); } $('.page-map1').live("pagecreate", function() { initialize(); }); $('.page-map1').live('pageshow',function(){ //console.log("test"); google.maps.event.trigger(map1, 'resize'); map1.setOptions(options1); }); &lt;/script&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>map2.html</p> <pre><code>&lt;div data-role="page" class="page-map2"&gt; &lt;div data-role="header"&gt; &lt;h1&gt;jQuery Mobile&lt;/h1&gt; &lt;/div&gt; &lt;div data-role="content"&gt; &lt;h2&gt;Map&lt;/h2&gt; &lt;div id="map2" class="gmap"&gt;&lt;/div&gt; &lt;script type="text/javascript"&gt; var map2, latlng2, options2; function initialize() { latlng2 = new google.maps.LatLng(40.716948, -74.003563); options2 = { zoom: 14, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP }; map2 = new google.maps.Map(document.getElementById("map2"), options2); } $('.page-map2').live("pagecreate", function() { initialize(); }); $('.page-map2').live('pageshow',function(){ google.maps.event.trigger(map2, 'resize'); map2.setOptions(options2); }); &lt;/script&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload