Question

I have a jQuery Mobile site and also have Google maps currently running on multiple pages. The problem I have is when I navigate between pages, the map won’t render again (only loads on the first page selected). The page needs to be refreshed before it will load again. What am I missing?

jQuery("div:jqmData(role='page'):last").live('pageinit', function(){
    initialize();
});

jQuery("div:jqmData(role='page'):last").live('pageinit', function(){
    google.maps.event.trigger(map, 'resize');
    map.setOptions(options); 
});

Answer 1

Call google.maps.event.trigger(mapObj, "resize"); on pageshow or pagechange instead of pageinit.