Angular Maps - get id promise?

Question

In a controller, i want to get the map (Google) on the page, set the map id to a variable, and then use that map id, other places in the same controller.

I have a snippet like this;

var map;
NgMap.getMap({ id: 'mainMap' }).then(function (evtMap) {
    map = evtMap;
});

// Bind products to map
vm.products.$promise.then(function (data) {
    angular.forEach(data, function (child) {
        // add markers to map
    });
});

But because NgMap takes a little time to load, it is not ready when the code below is ready, and therefore map is undefined. How to i make sure, that the code below is only running, once we have valid data in map? So just like the promise i am using, i guess, but in a different way?

NgMap: https://ngmap.github.io/

Answer 1

Providing a callback function to the .then method allows you to run code only after the map has loaded, so simply only add your products to your map, after the map has loaded (i.e. move you code inside the .then:

NgMap.getMap({ id: 'mainMap' }).then(function (map) {

  // Bind products to map
  vm.products.$promise.then(function (data) {
      angular.forEach(data, function (child) {
          // add markers to map
      });
  });

});