How can I reinitialize ngMaps when changing routes in Angular, using ui-router?

Question

I'm using ngMap and here's my relevant code:

<div map-lazy-load="https://maps.google.com/maps/api/js" map-lazy-load-params="{{googleMapsUrl}}" ng-style="{'height': feedActualHeight + 'px'}">
        <ng-map id="iPadFeedMap" zoom="14" center="Times Square, New York, NY">
        </ng-map>
      </div>

This works great and loads the map perfectly. But when I navigate away and then come back to the page, the map is grayed out:

Is there a way to re-initialize the map when this page loads?

Answer 1

I experienced the exact same issue regardless of how center was being set (it failed both with lat/lng and a physical address), but the accepted answer wasn't quite working for me.

My solution was to use NgMap's lazy-init property to re-initialize the map each time I returned to it.

<ng-map id="dashboard-map"
        center="Boston, MA"
        lazy-init="true"
        zoom="9"
        map-type-id="TERRAIN">
</ng-map>

In my ctrl I used the following code to 1) find the uninitialized map in the DOM and 2) initialize it

// dashboardCtrl.js

NgMap.getMap({ id: "dashboard-map" }).
  then(function(map) {
    NgMap.initMap(map.id);
  });

This way every time I hit my dashboard, the ctrl would run and re-init the map. It now shows properly every time.

This was a helpful thread to read through: https://github.com/allenhwkim/angularjs-google-maps/issues/387

Answer 2

It seems it only occurs in case when value for center attribute is provided as address value (e.g. Times Square, New York, NY). In that case the way the map center is determined consist of the following steps:

• since ng-map leverages Google Maps Geocoding API, the corresponding method is invoked to resolve actual location (lat,lng)
• Map object center property is getting updated

Since this issue never occurred for me when center attribute is provided as location value (e.g. [40.759011, -73.98447220000003]) i propose to change the way how map is initialized:

• remove setting of center attribute center="Times Square, New York,NY"

• instead set map center as demonstrated below:

Example: set map center by address

NgMap.getMap("iPadFeedMap").then(function (map) {
     NgMap.getGeoLocation($scope.address)
     .then(function (latlng) {
            map.setCenter(latlng);
     });
});
$scope.address = "Times Square, New York, NY";

Demo