2

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

Question:
How do I get rid of the described flicker?

Possible Solutions:

  • 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.
    • Community
    • 1
    • 1
    jeff
    • 8,300
    • 2
    • 31
    • 43

    1 Answers1

    0
     $("#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

    Andreas Nilsson
    • 231
    • 1
    • 6
    • I'm not sure how I would use this or whether not it could work. If I put it in the `pagebeforeshow` event, there will be no queued actions on the dialog page, and would therefore execute immediately. If I put it in the `pageshow` event, the page will have already loaded, and the flicker effect would therefore be noticeable. – jeff Jul 22 '12 at 17:38