honzzz honzzz - 1 year ago 67
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');

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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download