1

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/

brother
  • 7,651
  • 9
  • 34
  • 58
  • PS: The code used to be within the NgMap.getMap({ id: 'mainMap' }).then(function (evtMap) { // .. my code here });, but i moved it out, as it was conflicting with some two-way binding – brother Feb 27 '16 at 12:22

1 Answers1

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
      });
  });

});
Adam Jenkins
  • 51,445
  • 11
  • 72
  • 100
  • As i wrote in my comment to my post, this is what i had earlier on, but had to move it out. The reason beeing, that the forEach within, is 2-way binded, and it is not working as long as it is within the getMap function. Therefore i wanted to move it out of there. – brother Feb 27 '16 at 13:36
  • @brother You have no choice but to perform this action inside the `.then` (or called by some function that is executed inside the `.then` because, as you pointed at, the map is simply not ready until this time. You haven't given much information with "it conflicts with some two-way data binding" so I can only guess that after you add the markers to the map (after `angular.forEach(data....`) you should call `$apply()` – Adam Jenkins Feb 27 '16 at 14:06
  • my problem is, that on page loa, a bunch of markers is aded to a map via the above code (inside the then). My problem was then, when i added a new product, it was not replecting on the map, ie. the new marker was not beeing added to the map. A page refresh would fix it, but obviosly that kind of defeats the purpose :) So my therory was, that the then function, was only being run on load, and therefore there was no '2 way binding' sort of speak. – brother Feb 27 '16 at 14:18
  • You'll have to `$watch` you `products` for changes and update the map markers accordingly. Why did you expect changing your `products` would automatically update your map? That has to be handled by the `NgMap` module and if the `NgMap` module doesn't have a place where you can say - these are my markers, update them when this array/promise/whatever gets updated - then you have to do it yourself - by `$watch`-ing your variable and updating the map accordingly. – Adam Jenkins Feb 27 '16 at 14:47
  • Hmm, yes, sounds logical when you say it like that ;) Would it be possible for a short example of how $watch could be implemented in my example? – brother Feb 27 '16 at 14:55
  • Tried moving the entire forEach into a ng-repeat instead, in the view, like so: . And then it was 2-way binded. So it must be something with the watch, as you also state. But how to setup it up, as the ng-repeat is not an option, since i have far to many config settings to fit into that. – brother Feb 27 '16 at 16:15