honzzz honzzz - 4 months ago 14
AngularJS Question

AngularJS: map via Google Maps API v3 in a tab

I am trying to create a page with tabs (using AngularJS). There is a map (Google Maps API v3) in one of those tabs. When the map is in the tab in foreground everything seems to be OK. But when the map is loaded in the background tab and visible only after the tab is clicked the map is misplaced/cut off and when you try to manipulate with it it's functionality seems to be broken.

I've searched for solutions and I found those tricks with

google.maps.event.trigger(map, 'resize');
map.setCenter(center);


but it's not working.
Could you please have a look at http://jsfiddle.net/n4q7Y/5/ and tell me what I missed?

Thank you.

Answer

Wait a moment before you trigger the resize-event: http://jsfiddle.net/doktormolle/aAeZw/

Comments