Google Map: unwanted resizing of the map

Question

This is my app:

http://jsbin.com/axeWOwAN/1 (full screen)

As you can see, in the second page there is a map, that is not working properly.

The map alone is tested and works fine. But when i insterted it into my layout (the one i need) it does not works properly anymore. Somehow there is some collisions that i am unable to find.

Making some tests i discovered that putting the map in the first position of the menu, it works exactly as i need:

http://jsbin.com/axeWOwAN/3

http://jsbin.com/axeWOwAN/3/edit

But yet i need it in the second page not in the first.

Can you help me to resolve this issue? Thank you very much!

possible duplicate of Google Map loading partially on click on the hidden tab — geocodezip
– geocodezip, Commented Nov 21, 2013 at 14:14

ImadBakir · Accepted Answer · 2013-11-21 14:31:25Z

The problem is that the map is being initialized while the canvas is hidden, to over come this, you should Reinitialize the map when the canvas becomes visible, or resize the map, try adding this to your menu.on('click', 'a', function(e) {}); function, after your DIV fadeIn() is completed,

 google.maps.event.trigger(map, "resize");

God bless you man! It was all the day i was trying to make it working! Here is the app with your solution added: jsbin.com/axeWOwAN/9/edit
Glad I could help :). you also have a JS warning you need a (semicolon) ; after menu.find('a:first').trigger('click')

Collectives™ on Stack Overflow

Google Map: unwanted resizing of the map

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related