Google Maps not loading a second time - AngularJS

Question

I am using the GoogleMap API (angular -google-maps' js package) and I have very strange behavior.

The first time I download it, I download the full map, as here:

Then I close the dialog and open it again, I see the following:

Keep in mind that the map appears as a dialog on top of another dialog.

Any ideas?

Answer 1

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

As written in the module documentation:

refresh = "expression" . An expression that, if it evaluates to true, will cause a map update. Useful when the map is initially hidden.

Answer 2

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

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

This will do a map update, fixing your problem.

Answer 3

just add:

$ scope.render = true;

and add ng-if = "render" to your map control, for example:

 <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

The answer to the question is here https://github.com/allenhwkim/angularjs-google-maps/issues/88

you need to center it manually to avoid this problem as shown below:

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>