AngularJS: map through the Google Maps API v3 tab

Question

I am trying to create a tabbed page (using AngularJS). One of these tabs has a map (Google Maps API 3). When the card is in the tab in the foreground, everything seems OK. But when the map is loaded on the background tab and is visible only after clicking on the tab, the map is inappropriate / disabled, and when you try to manipulate it, its functionality seems to be broken.

I was looking for solutions and I found these tricks with

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

but it does not work. Could you take a look at http://jsfiddle.net/n4q7Y/5/ and tell me what I missed?

Thanks.

Answer 1

Wait until you activate resize -event: http://jsfiddle.net/doktormolle/aAeZw/

Answer 2

thanks Dr.Molle, if I can improve it a bit, in my case the $ timeout without delay does the job fine (since it will wait for the end of the $ digest cycle)

 $timeout(function () { // in my case initializeMap(); // OR this case: google.maps.event.trigger(map, 'resize'); }, 1000); // with or without delay