Google Maps lazy loading in angularjs with dynamic geo coordinate updates?

Question

I created a directive for lazy loading google maps with angularjs:

Taken from: AngularJS - load google map script async in directive for multiple maps

Question: How can I dynamically bind the lat/long values to a controller, so that every time the values in the controller change, the map also changes the view? (eg a backend call serves new lat/long values, which must then be pushed to the map element).

I added to the maps directive:

  scope: {
      lat: '=',
      long: '='
  }

And bind it twoway with:

<div lat="{{lat}}" long="{{long}}" />

Controller:

$http..getBackendData()
    .then(function(data) {
        $scope.lat = data.lat;
        $scope.long = data.long;
    }
);
...

Anyways the map only shows up with the initial value, but is never updated. Example: http://plnkr.co/edit/U31poBpHTfFVQsipLrI4?p=preview

score 0 · Answer 1 · answered Apr 20 '16 at 13:23

For now it works adding a $watch on latitude:

http://plnkr.co/edit/eS18B0Te2l5qaf6wvQIH?p=preview

scope.$watch('lat', function (newVal) {
    initializeMap();
});

But I don't know if this is the correct approach. Feel free to comment if you have betters solutions.

Google Maps lazy loading in angularjs with dynamic geo coordinate updates?

1 Answers1