Implementing markers into Google Maps using AngularJS

Question

I'm having problems implementing JSON data into Google Maps as markers usign Angular. My JSON data is:

 [
  {
    "_id": "TRK45679101121",
    "timestamp": "2015-02-03T09:18:02.989Z",
    "status": 1,
    "path": [
      {
        "timestamp": 51422955082989,
        "speed": 30,
        "direction": 45.510029,
        "longitude": 81.510029,
        "latitude": 8.675009
      }
    ]
  },
  {
    "_id": "TRK456799",
    "timestamp": "2015-02-03T09:18:02.989Z",
    "status": 1,
    "path": [
      {
        "timestamp": 51422955082989,
        "speed": 30,
        "direction": 45.510029,
        "longitude": 81.510029,
        "latitude": 8.675009
      }
    ]
  },
  {
    "_id": null,
    "timestamp": "2016-01-22T08:10:43.238Z",
    "status": null,
    "path": null
  }
]

Do you know how one can read this through JavaScript and integrate into the Google Maps API? Any help would be appreciated, thanks in advance.

Note: I only need to implement the latitude and longitude. In case the marker is clicked, the "_id" and "status" needs to show, which I'll look into later.

user2314737 · Accepted Answer · 2016-01-23 21:58:10Z

1

Here's an example. The Angular controller uses the JSON data contained in the global variable mydata and uses it to add some markers to the map. The markers' info is also available in the Angular $scope.

var mydata = [{
  "_id": "TRK45679101121",
  "timestamp": "2015-02-03T09:18:02.989Z",
  "status": 1,
  "path": [{
    "timestamp": 51422955082989,
    "speed": 30,
    "direction": 45.510029,
    "longitude": 31.510029,
    "latitude": 8.675009
  }]
}, {
  "_id": "TRK456799",
  "timestamp": "2015-02-03T09:18:02.989Z",
  "status": 1,
  "path": [{
    "timestamp": 51422955082989,
    "speed": 30,
    "direction": 45.510029,
    "longitude": 32.510029,
    "latitude": 12.675009
  }]
}];

//Angular App Module and Controller
angular.module('mapsApp', [])
  .controller('MapCtrl', function($scope,$http) {

    var mapOptions = {
      zoom: 4,
      center: new google.maps.LatLng(31, 8),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    }

    $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

    $scope.markers = [];

    var infoWindow = new google.maps.InfoWindow();

    var createMarker = function(lat, lng) {

      var marker = new google.maps.Marker({
        map: $scope.map,
        position: new google.maps.LatLng(lat, lng),
        title: "lat: " + lat + ",lng: " + lng
      });

      $scope.markers.push(marker);

    }
    
    $http({method: 'GET', url: "http://maps.google.com/maps/api/geocode/json?address=Canada&sensor=true&region=USA"}).
        success(function(data, status) {
          $scope.status = status;
          $scope.JSONdata = data;
          console.log(JSON.stringify(data));
        }).
        error(function(data, status) {
          $scope.JSONdata = data || "Request failed";
          $scope.status = status;
          console.log($scope.data+$scope.status);
      });
    

    for (i = 0; i < mydata.length; i++) {
      console.log(mydata[i]["path"][0]["longitude"], mydata[i]["path"][0]["latitude"]);
      createMarker(mydata[i]["path"][0]["longitude"],mydata[i]["path"][0]["latitude"]);
    }

  });

#map {
  height: 420px;
}

<script src="https://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mapsApp" ng-controller="MapCtrl">
  <H3>
Markers
</H3>
  <div id="class" ng-repeat="marker in markers | orderBy : 'title'">
    {{marker.position}}
  </div>
</div>

<div id="map"></div>

EDIT: to retrieve the JSON data from a remote HTTP server, use Angular's $http. In the example the response data is saved in $scope.JSONdata and can be used in place of mydata.

edited Jan 23, 2016 at 21:58

answered Jan 22, 2016 at 10:09

user2314737

29.7k20 gold badges109 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Aashir shukla Over a year ago

Thanks! This is exactly what I needed. :) However I have this data being returned in an API endpoint. Is there a way to call the data from the endpoint into the angular script?

Aashir shukla Over a year ago

Oops, my bad. Apologies!

Sachin HR Over a year ago

Is it possible to show markers by using angularjs response data from database?.I am using same code but i am getting data from database in angularjs function as response.Here is the link to my question.stackoverflow.com/questions/46461477/…

Sachin HR Over a year ago

If u find some time please go through it .It will be very helpful

Collectives™ on Stack Overflow

Implementing markers into Google Maps using AngularJS

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related