在显示jQuery Mobile页面之前正确加载Google地图

Question

I have a dialog page in a jQuery Mobile document which contains a small Google map to show a location. I want to load the map before loading the dialog page. As in:

$("#dialogPage").bind("pagebeforeshow", function() {
    initializeSmallMap();
});

However, Google Maps works incorrectly whenever the div the map is contained in is has a display proprety of none (see Google Maps Display:None Problem ). And since this function is executed before the page is actually loaded, the containing div naturally has a display property of none.

Now, obviously, there's a simple solution to this. All I need to do is initialize the map after the page has been shown, which makes the div have a display property of block:

$("#dialogPage").bind("pageshow", function() {
    initializeSmallMap();
});

However, since the dialog has already been loaded, there is an annoying, noticeable flicker when the map appears.

How do I get rid of the described flicker?

Making the div containing the map have a display property of block before the dialog is loaded. If I wasn't using jQuery Mobile, it would be simple and painless to implement this effect while still hiding the map until needed:

 position: absolute; left: -10000px; display: block; 

However, since jQuery Mobile automatically overrides page styles, I don't know how I could get this to work.

Explicitly telling the Google Maps API the size of the div containing the map. I Googled this option and had no luck, but considering my terrible Googling skills, I would not be completely surprised if this was actually possible.

Others - I'm open to any ideas on how to get rid of the flicker effect. The above are just some possible solutions.

Answer 1

 $("#dialogPage").promise().done(function() {
   //Code to execute when map is loaded.
 });

You could try it out. Just hide the element with the attr() and display it with attr() when promise().done is executed :) And you should be in no use of display properties.

Ref - Promise