After changing page in jquery mobile, google map loads just partly

问题

I've got home page in jquery mobile that has link to another page where map is all over the screen with header on top. When I go to that link with the map, the map loads just partly (as you can see on screenshot) and when I try to move it, it jumps back.

As you can see the canvas is properly loaded, because down there is google map logo and Terms of use. What is wrong with that?

One fact: When I refresh the map page (not starting on home page) or when I resize the browser window when I'm on map page, it shows up perfectly fine.

回答1:

The map is loaded into DOM on pageinit, therefore it doesn't now obtain the right screen/window measures. Thus, you have to bind initializing the map to pagebeforeshow as it allow the map to get the screen size.

Here's how it works.

$(document).on('pagebeforeshow', '[data-role="page"]#map' , function()

instead of

$(document).bind('pageinit', function()

回答2:

Trigger a refresh on the map. This can happen when the map container changes size, or is hidden initially and then shown. Same thing happens, for instance, when using jQuery UI tabs and the map is initialized on on a hidden tab.

google.maps.event.trigger(map, 'resize')

回答3:

I had the same problem, and finally solved it by triggering the 'resize' twice. Like this:

$("#mapelement").height(10);
$("#mapelement").width(10);
google.maps.event.trigger(googlemap, 'resize');
setTimeout(function() {
    adjustMapSize();  // set the correct size of #mapelement
    google.maps.event.trigger(googlemap, 'resize');
    updateMap();     // center the map and display markers
}, 500);

回答4:

$(document).on('pageshow', "#name-page", function() {
    initialize();
});

Try this,

来源：https://stackoverflow.com/questions/15391478/after-changing-page-in-jquery-mobile-google-map-loads-just-partly