Ad

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. How would I correct the code to make it work? Below is my code:

View

<ui-gmap-google-map 
    center='map.center' 
    zoom='map.zoom'>

  <ui-gmap-marker ng-repeat="marker in markers"
      coords="'marker.latitude' + 'marker.longitude'" 
      options="marker.options" 
      events="marker.events" 
      idkey="marker.id">
    <ui-gmap-window>
       <div>{{marker.window.name}}</div>
    </ui-gmap-window>
  </ui-gmap-marker>
 </ui-gmap-google-map>

JSON Data from API

[{"_id":"5686389d2959b4c601fbd9e7","longitude":120.93313390000003,"latitude":14.5571256,"location":"Hotel Intercontinental Manila","category":"Accomodation","name":"Hotel Intercon Manila","__v":0,"reviews":[]},     
  {"_id":"56873fdb182b3741059357d1","longitude":123.76338959999998,"latitude":10.2594266,"location":"Cebu City","name":"Cebu City","__v":0,"reviews":[{"comment":"This is a test","rating":null,"userId":null,"review_id":"tiGCG2rGroIn"}]},
{"_id":"5687245aecdf89fb033b18b3","longitude":121.0212325,"latitude":14.5896977,"location":"Mandaluyong, Manila","category":"Accomodation","name":"Mandaluyong","__v":0,"reviews":[]}]

Controller

 .controller('MapCtrl', function($state, $scope, LocFac) {  
   var Markers =  LocFac.getLocations().then(function(data) { 
      return data.data; 
   }); 

   $scope.map = { 
      center: { latitude: 14.8282, longitude: 122.5795 }, 
      zoom: 1 
   };

   $scope.markers = Markers;

 })
Ad

Answer

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 som/ 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 :)

Ad
source: stackoverflow.com
Ad