jquery mobile - 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 if the dialog is reloaded (i.e. go back and click on the button to open the dialog again), it is displayed only partially, zoomed out to a 3 or 4 and centered around the div's top-left corner.

There is no change in the div size (which is explicitly set) and for good measure a google.maps.event.trigger(map, 'resize'); is called.

I also tried to initialize the map after the dialog is shown but the result is the same.

Button code:

$("#dest-map-button").click(function() {
            initializeMap(job_id,"map_canvas");
        }
);

Function:

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 describing exactly the same problem: JQuery Mobile & Google Maps Glitch But the solution provided (caching) can't be used here as the map might need to change

Answer 1

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...