Google Map API v3 off center if reloaded (not the usual 'resize' thing)

Question

I read all the similar questions but mine is slightly different. The first time a JQuery Mobile dialog is displayed, the map loads fine inside the usual map_canvas div, but

Answer 1

I Agree with @peter .. You do not need to create map on each pageshow event.. Instead, try this:

$(document).on("pagebeforechange", function()
{
    if(mapObj){
        center = mapObj.getCenter();
    }
});
$("#mapPage").bind("pageshow", function()
{
    google.maps.event.trigger(mapObj, "resize");
    if(center)mapObj.setCenter(center);
});

Answer 2

You don't need to create a new map each time you visit the page. Create the map beforehand, e.g. on pageinit. On pageshow: google.maps.event.trigger(mapObj, "resize");

Answer 3

After trying everything else, I finally stumbled upon the pageshow event. Calling initializeMap after all the page transitions are done rather than when clicking the button solved the problem:

$('#dialog-destination-map').live('pageshow',function(event){
    initializeMap(job_id,"map_canvas");
    }
);

I still wonder how come it was working at the first load then...

Answer 4

var driverLatLng is being initialized with lat_lng.split(','); which hasn't been declared before.