JQuery Mobile and Google Maps Not Rendering Correctly

Question

I am simply trying to display a google map within a jquery mobile page. If I load the page directly it works. However, if I navigate to the page from another page it only rend

Answer 1

I read on a website that if you have this problem it's beacuse the dom isn't totally loaded when you initialize your google map. You must add this in your code:

$( document ).bind( "pageshow", function( event, data ){
google.maps.event.trigger(map, 'resize');
});

It works for me. It's maybe brutal to resize at every page you show but ... it works.