Google Maps doesn't load the 2nd time - AngularJS

Question

I'm using the GoogleMap API ('angular-google-maps' js package) and I have a very weird behavior.

The first time I load it, i get the full map loaded, like here:

Then i close the dialog and reopen it, i see this:

Keep in mind, that the map is displayed as a dialog on top of another dialog.

Any ideas?

Answer 1

If you are using Angular Google Map module you must add the refresh attribute to the googlemap element.

As it written in the Module documentation:

refresh = "expression" - Expression which, if it evaluates to true, will trigger a map refresh. Useful when the map is initially hidden.

Answer 2

You have to redraw the map. You can do this using the following code:

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

This will make the map refresh, fixing your issue.

Answer 3

just add:

$scope.render = true;

and add ng-if="render" to your your map control, like this:

<ui-gmap-google-map ng-if="$parent.render" center="map.center" zoom="map.zoom">
        <marker coords="map.center"></marker>
    </ui-gmap-google-map>

Answer 4

Issue is answered here https://github.com/allenhwkim/angularjs-google-maps/issues/88

you need to center it manually to avoid this problem like the following,

In your js controller

$scope.$on('mapInitialized', function (event, map)
{
    window.setTimeout(function() {
      window.google.maps.event.trigger(map, 'resize');
      map.setCenter(new google.maps.LatLng(38,-98));
    }, 100)
});

And in your HTML

<ng-map ng-if="subView=='map'" center="38,-98" zoom="5"></ng-map>