I am having difficulty getting multiple Google Maps to work within a jQuery Mobile website. I have searched the forum without finding an answer, or problem similar to this.
The intention is that there is just one HTML file, and jQuery Mobile renders each map as a separate 'web page'. At present both of the maps are the same but will ultimately render different information when I overcome this hurdle.
I have adapted the following code from
http://jquerymobile.com/test/experiments/google-maps/.- <!DOCTYPE HTML>
- <html lang="en-US">
- <head>
- <meta charset="UTF-8">
- <title>Main Page</title>
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
- <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
- <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
- <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
- </head>
- <body>
- <div data-role="page">
- <div data-role="header">
- <h1>Main Page</h1>
- </div>
- <div data-role="content">
- <p><a href="#map1">Map 1</a></p>
- <p><a href="#map2">Map 2</a></p>
- </div>
- </div>
- <div data-role="page" data-theme="b" class="page-map" style="width:100%; height:100%;" id="map1">
- <script>
- //thx @elroyjetson for the code example
- // When map page opens get location and display map
- $('.page-map').live("pageshow", function() {
- //boston :)
- var lat = 42.35843,
- lng = -71.059773;
-
- //try to get GPS coords
- if( navigator.geolocation ) {
-
- //redirect function for successful location
- function gpsSuccess(pos){
- if( pos.coords ){
- lat = pos.coords.latitude;
- lng = pos.coords.longitude;
- }
- else{
- lat = pos.latitude;
- lng = pos.longitude;
- }
- }
-
- function gpsFail(){
- //Geo-location is supported, but we failed to get your coordinates. Workaround here perhaps?
- }
-
- navigator.geolocation.getCurrentPosition(gpsSuccess, gpsFail, {enableHighAccuracy:true, maximumAge: 300000});
- }
- var latlng = new google.maps.LatLng(lat, lng);
- var myOptions = {
- zoom: 10,
- center: latlng,
- mapTypeId: google.maps.MapTypeId.ROADMAP
- };
- var map = new google.maps.Map(document.getElementById("map-canvas"),myOptions);
- });
- </script>
- <div data-role="header">
- <h1>Map Page 1</h1>
- </div>
- <div data-role="content" style="width:100%; height:100%; padding:0;">
- <div id="map_canvas" style="width:100%; height:100%;"></div>
- </div>
- </div>
- <div data-role="page" data-theme="b" class="page-map" style="width:100%; height:100%;" id="map2">
- <script>
- //thx @elroyjetson for the code example
- // When map page opens get location and display map
- $('.page-map').live("pageshow", function() {
- //boston :)
- var lat = 42.35843,
- lng = -71.059773;
-
- //try to get GPS coords
- if( navigator.geolocation ) {
-
- //redirect function for successful location
- function gpsSuccess(pos){
- if( pos.coords ){
- lat = pos.coords.latitude;
- lng = pos.coords.longitude;
- }
- else{
- lat = pos.latitude;
- lng = pos.longitude;
- }
- }
-
- function gpsFail(){
- //Geo-location is supported, but we failed to get your coordinates. Workaround here perhaps?
- }
-
- navigator.geolocation.getCurrentPosition(gpsSuccess, gpsFail, {enableHighAccuracy:true, maximumAge: 300000});
- }
- var latlng = new google.maps.LatLng(lat, lng);
- var myOptions = {
- zoom: 10,
- center: latlng,
- mapTypeId: google.maps.MapTypeId.ROADMAP
- };
- var map = new google.maps.Map(document.getElementById("map-canvas"),myOptions);
- });
- </script>
- <div data-role="header">
- <h1>Map Page 2</h1>
- </div>
- <div data-role="content" style="width:100%; height:100%; padding:0;">
- <div id="map_canvas" style="width:100%; height:100%;"></div>
- </div>
- </div>
- </body>
- </html>
At present neither of the Google Maps load despite being prompted for location information. The header elements load on both web pages.