JSFiddle - React, Tailwind, and code Playground

by Osama Qassar

HTML

<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
    <script data-require="[email protected]" data-semver="1.13.14" src="//rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
    <script src="//maps.google.com/maps/api/js?libraries=places"></script>
    <link rel="stylesheet" href="style.css" />
    
  </head>

  <body>
    <h2>Hold your mouse on the marker to see distance and walking duration</h2>
    <div ng-app="app" ng-controller="mapCtrl">
      <ng-map style="width:600px;height:550px;" class="map" zoom="15" center="{{center}}">
        <marker position="{{center}}"></marker>
        <custom-marker ng-repeat="marker in markers" position="{{marker.lat}}, {{marker.lng}}" >
          <h5>{{marker.duration}}</h5>
        </custom-marker>
        <shape ng-repeat="fence in geofences" name="circle" radius="{{fence.radius}}" center="[{{fence.lat}}, {{fence.lng}}]" ></shape>
      </ng-map>
    </div>
    
    
    
    <script>
    
    // Code goes here

var app = angular.module('app', ['ngMap']);

app.controller('mapCtrl', function($scope, NgMap) {
  
  $scope.getEst = function(){
	  NgMap.getMap().then(function(map) {
		var newA = new google.maps.LatLng(40.994578,28.835106);
		var newB = new google.maps.LatLng(41.014114,28.828351);
		var service = new google.maps.DistanceMatrixService();
		console.log(service)
		service.getDistanceMatrix({
			origins: [newA],
			destinations: [newB],
			travelMode: google.maps.TravelMode.WALKING,
		  }, function(response, status) {
			  console.log(status)
			if (status === google.maps.DistanceMatrixStatus.OK) {
				alert(response.rows[0].elements[0].duration.text)
				alert(response.rows[0].elements[0].distance.text)
			}
		});
	  });
	};
	$scope.getEst();
  
  
  
  $scope._map = null;
  
  $scope.center = '30.45,-91.15';
  
  $scope.geofences = [{
    "name": "circle",
    "lat": 30.45,
    "lng": -91.15,
    radius: 200
  }, {
   ...