angularjsgoogle-mapsgoogle-maps-api-3ng-map

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


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: enter image description here

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


Solution

  • 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 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:

    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