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

Question

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.

Map screenshot

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.

show us your page markup. It could be a div problem in data-role=content. — Omar
– Omar, Commented Mar 13, 2013 at 16:57
try this $(document).bind('pageinit', '[data-role='page']#map', function() instead of $(document).bind('pageinit', function() — Omar
– Omar, Commented Mar 13, 2013 at 17:07
Nope, still the same issue, but that's great piece of code, it won't load the map every time I change the page :) — emil.c
– emil.c, Commented Mar 13, 2013 at 17:11
Maybe I'm looking for an event that fires after the DOM is loaded, not before, which as far as I'm concerned, 'pageinit' does. But I can't find that event anywhere on google. — emil.c
– emil.c, Commented Mar 13, 2013 at 17:12
sorry, my bad, that's because it's initiated and loaded inside the DOM. — Omar
– Omar, Commented Mar 13, 2013 at 17:16

Rick · Accepted Answer · 2013-03-13 17:34:03Z

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')

That's a great stuff, too. Thanks, I was looking for this in connection with something else.

Omar · Accepted Answer · 2013-03-13 17:37:45Z

2

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()

answered Mar 13, 2013 at 17:37

Omar

31.7k9 gold badges73 silver badges117 bronze badges

4 Comments

Malloc Over a year ago

Hi Omar, my function is called initializeMap(). Where should I place the document call you suggested above? thanks

Omar Over a year ago

@Malloc hi, which JQM version are you using? Can you post a separate question with all details? :)

Malloc Over a year ago

Hi. I am using jquery 1.11.0 and jquery mobile 1.4.2. Ok I am posting a separate question

Malloc Over a year ago

Here is my question post: stackoverflow.com/questions/23176423/…

user1119816 · Accepted Answer · 2015-03-22 02:40:19Z

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);

Falah · Accepted Answer · 2017-10-28 10:32:34Z

0

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

Try this,

answered Oct 28, 2017 at 10:32

Falah

1913 silver badges9 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Linked

Related