Google Map API v3 disabled if reloaded (not a common "resize" thing)
I've read all similar questions, but mine is slightly different. The first time the jQuery Mobile dialog is displayed, the map is loaded within the normal map_canvas div, but if the dialog reloads (i.e. go back and click the button to reopen the dialog) it is only partially displayed, scaled down to 3 or 4 and centered around the top left corner of the div.
There is no change in the size of the div (which is explicitly set) and a is called for good measure google.maps.event.trigger(map, 'resize');
.
I also tried to initialize the map after and the dialog is shown, but the result is the same.
Button code:
$("#dest-map-button").click(function() {
initializeMap(job_id,"map_canvas");
}
);
Functions:
function initializeMap(job_id, map_div){
var pos = arrJobs[job_id].lat_lng.split(',');
var job_pos = new google.maps.LatLng(pos[0],pos[1]);
var driverLatLng = lat_lng.split(',');
var driver_pos = new google.maps.LatLng(driverLatLng[0],driverLatLng[1]);
var myOptions = {
zoom: 18,
center: driver_pos,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
}
map = new google.maps.Map(document.getElementById(map_div), myOptions);
var marker = new google.maps.Marker({
position: job_pos,
map: map,
title: "Job"
});
var marker2 = new google.maps.Marker({
position: driver_pos,
map: map,
title: "X",
});
google.maps.event.trigger(map, 'resize');
}
HTML:
<div data-role="page" id="dialog-destination-map" data-theme="e">
<div data-role="content">
<div id="map_canvas" style="height:300px; width:300px; position: relative; margin: 0px auto;">
map_canvas
</div>
</div>
</div>
Any ideas?
EDIT: This question seems to describe the same issue: JQuery Mobile and Google Maps Glitch But the solution provided (caching) cannot be used here as the map might need to be changed
After trying everything else I finally stumbled upon an event pageshow
. Calling initializeMap
after all page transitions have finished, rather than when a button is pressed, resolved the issue:
$('#dialog-destination-map').live('pageshow',function(event){
initializeMap(job_id,"map_canvas");
}
);
I'm still wondering how it ended up working on first boot, then ...
I agree with @peter .. You don't need to create a map on every showhow event. Try this instead:
$(document).on("pagebeforechange", function()
{
if(mapObj){
center = mapObj.getCenter();
}
});
$("#mapPage").bind("pageshow", function()
{
google.maps.event.trigger(mapObj, "resize");
if(center)mapObj.setCenter(center);
});
var driverLatLng
initialized lat_lng.split(',');
that was not previously declared.
You don't have to create a new map every time you visit the page. Create a map in advance, for example. on pageinit
. On pageshow
:google.maps.event.trigger(mapObj, "resize");