CODEWITHSUNDEEP
javascriptjqueryhtmlcssgoogle-maps
FrancescoMussi
FrancescoMussi

Reputation: 21630

Google Map: unwanted resizing of the map

This is my app:

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

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!

Upvotes: 0

Views: 44

Answers (1)

ImadBakir
ImadBakir

Reputation: 553

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

Upvotes: 1

Related Questions