Angular Google Maps/nodejs: Display Markers From Database

I'm building an application with NodeJS and Angular Google Maps to display a set of data/coordinates from MongoDB onto the map. However, I'm unable to get the data and display it.

Solution 1:

Here is an example of how displaying markers on the map works. A couple of pointers:

• When displaying multiple markers, use the ui-gmap-markers directive instead of ng-repeating the single marker directive.
• Similarly, use the plural version ui-gmap-windows to show the windows.
• The markers directive reads the coordinates from an object key you provide to it: <ui-gmap-markers coords="'coords'" ... > reads the coordinates from the coords attribute of your marker. Same goes for other attributes, too, like events, options etc.

• I assume your LocFac.getLocations() returns a promise - thus your Markers variable very likely isn't getting assigned correctly. You're better off assigning $scope.markers inside the .then callback of your API call as follows:

  $scope.markers = []; // init markers to empty array so angular-google-maps has something to draw markers from
  LocFac.getLocations().then(function(data) {
      var markers = data.data;
      angular.forEach(markers, function(marker) {
          // Assign 'coords' attribute here for the directive to read
          marker.coords = {
              latitude: marker.latitude,
              longitude: marker.longitude
          }
      })
      $scope.markers = markers;
  }
  

If you still need help after this, I'll be happy to provide some :)