CODEWITHSUNDEEP
javascriptangularjsjsongoogle-mapsgoogle-maps-api-3
Aashir shukla
Aashir shukla

Reputation: 93

Implementing markers into Google Maps using AngularJS

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.

Upvotes: 4

Views: 1248

Answers (1)

user2314737
user2314737

Reputation: 29417

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.

Upvotes: 1

Related Questions