Search code examples
javascriptangularjsgoogle-mapsgoogle-maps-api-3ng-map

AngularJS - Add walking distance to ngMaps with circle

I've been trying to achieve something like is done in this website.

So far I've managed to create a map with circles by using ngMaps. Below is the snippet of what I have done till now...

Can anyone help me how to go ahead in getting the walking distance from the marker to each of the circle's radius lines?

Thanks :) 

var app = angular.module('mapApp', ['ngMap']);
app.controller('mapCntrl', function($scope) {
  $scope.geofences = [{
      "name": "circle",
      "lat": 30.45,
      "long": -91.15,
      radius: 200
    },
    {
      "name": "circle",
      "lat": 30.45,
      "long": -91.15,
      radius: 500
    },
    {
      "name": "circle",
      "lat": 30.45,
      "long": -91.15,
      radius: 800
    },
    {
      "name": "circle",
      "lat": 30.45,
      "long": -91.15,
      radius: 1000
    }
  ];
});
<!DOCTYPE html>
<html>

<head>
  <title>Simple Map with circles</title>
  <meta name="description" content="Simple Map">
  <meta name="keywords" content="ng-map,AngularJS,center">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
  <script src="https://code.angularjs.org/1.3.15/angular.js"></script>
  <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
  <script src="app.js"></script>
</head>

<body ng-app="mapApp" ng-controller="mapCntrl">
  <ng-map class=map zoom="15" center="[30.45, -91.15]">
    <marker position="[30.45, -91.15]" />
    <shape ng-repeat="fence in geofences" name="circle" radius="{{fence.radius}}" center="[{{fence.lat}}, {{fence.long}}]" />
    <control name="overviewMap" opened="true" />
  </ng-map>
</body>

</html>

Solution

  • There are two points for you to get this work.

    • google.maps.geometry.spherical.computeOffset()

      document here. use computeOffset function to get the point's latlng on the edge of the circle.

      UPD: for this point, you can also use circle.getBounds() to get Latlng information of the specific points(east, west, north, south) on the circle.

    • google.maps.DistanceMatrixService().getDistanceMatrix()

      document here. use getDistanceMatrix to get walking distance between the center and edge points.

    Here is a plunker for this.

    UPD2: I have show the walkingtime as shown on the website you linked with custom-marker.

    The rest for you todo is showing the distance and duration information to custome label or markers on the map, good luck.