Search jQuery

jQuery Forum

Multiple Google Maps

in jQuery Mobile • 10 years ago

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.

Replies(4)

Reborn

Re: Multiple Google Maps

10 years ago

var map = new google.maps.Map(document.getElementById("map-canvas"),myOptions);

<div id="map_canvas" style="width:100%; height:100%;"></div>

Using "map_canvas" id in HTML and "map-canvas" id in JS.

smallinson

Re: Re: Multiple Google Maps

10 years ago

Thanks, that has partially fixed my problems. The Google Map on "Map Page 2" still doesn't render. I'm prompted to share my location and the header elements are drawn, but the map doesn't appear.

Edit: using a different ID value for each map implementation seems to have fixed the problem, eg. map_canvas_1, map_canvas_2 etc.

CHoltz

Re: Re: Multiple Google Maps

7 years ago

Is there away to add a search to this code? I've tried changing the default map, but nothing works. The code works if its just as is in this forum. the only values I've been able to change are the lat/lang of the boston coordinates. thanks.