#StackBounty: #javascript #angularjs #google-maps #google-maps-api-3 #ng-map AngularJS – Add walking distance to ngMaps with circle

Bounty: 50

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" />
  https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places
  https://code.angularjs.org/1.3.15/angular.js
  https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js
  http://app.js
</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>


Get this bounty!!!