amulya349/iislocationneartheone.html

## iislocationneartheone.html
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Directions service</title>
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 80%;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    Start: <input type="text" id="start"/><br>
    End: <input type="text" id="end"/><br>
    <button id="but">CLick</button>
    <script>
      function initMap() {
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 6,
          center: {lat: 20.2961, lng: 85.8245}
        });
        directionsDisplay.setMap(map);

        // document.getElementById('submit').addEventListener('click', function() {
        // });

        $('#but').click(function(e){
          calculateAndDisplayRoute(directionsService, directionsDisplay);
        })
      }

      function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        var waypts = [];
        // var checkboxArray = document.getElementById('waypoints');
        // for (var i = 0; i < checkboxArray.length; i++) {
        //   if (checkboxArray.options[i].selected) {
        //     waypts.push({
        //       location: checkboxArray[i].value,
        //       stopover: true
        //     });
        //   }
        // }
        waypts.push({
          location: 'angul',
          stopover: true
        });
        waypts.push({
          location: 'dhenkanal',
          stopover: true
        });

        directionsService.route({
          origin: 'bhubaneswar',
          destination: 'sambalpur',
          waypoints: waypts,
          optimizeWaypoints: true,
          travelMode: google.maps.TravelMode.DRIVING
        }, function(response, status) {
          if (status === google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            var route = response.routes[0];
            console.log(route)
            // For each route, display summary information.
            // for (var i = 0; i < route.legs.length; i++) {
            //   var routeSegment = i + 1;
            //   summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
            //       '</b><br>';
            //   summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
            //   summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
            //   summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
            // }
            var myPosition = new google.maps.LatLng(20.2915796,85.7564096);

            var somepath = decodePolyline(route.overview_polyline)
            console.log(somepath)
            var spath = []
            for(var i=0; i<somepath.length; i++){
              spath.push(new google.maps.LatLng(somepath[i].latitude, somepath[i].longitude));
            }
            var cascadiaFault = new google.maps.Polyline({
              path: spath
            });

            console.log(google.maps.geometry.poly.isLocationOnEdge(myPosition, cascadiaFault, 10e-1))
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }

      function decodePolyline(encoded) {
        if (!encoded) {
            return [];
        }
        var poly = [];
        var index = 0, len = encoded.length;
        var lat = 0, lng = 0;

        while (index < len) {
            var b, shift = 0, result = 0;

            do {
                b = encoded.charCodeAt(index++) - 63;
                result = result | ((b & 0x1f) << shift);
                shift += 5;
            } while (b >= 0x20);

            var dlat = (result & 1) != 0 ? ~(result >> 1) : (result >> 1);
            lat += dlat;

            shift = 0;
            result = 0;

            do {
                b = encoded.charCodeAt(index++) - 63;
                result = result | ((b & 0x1f) << shift);
                shift += 5;
            } while (b >= 0x20);

            var dlng = (result & 1) != 0 ? ~(result >> 1) : (result >> 1);
            lng += dlng;

            var p = {
                latitude: lat / 1e5,
                longitude: lng / 1e5,
            };
            poly.push(p);
        }
        return poly;
    }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAopM9eUD9vR5GU2OcDwLJrMEWrQ0AvIDk&callback=initMap&libraries=geometry">
    </script>

  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>Directions service</title>
	<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
	<style>
	html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	}
	#map {
	height: 80%;
	}
	#floating-panel {
	position: absolute;
	top: 10px;
	left: 25%;
	z-index: 5;
	background-color: #fff;
	padding: 5px;
	border: 1px solid #999;
	text-align: center;
	font-family: 'Roboto','sans-serif';
	line-height: 30px;
	padding-left: 10px;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	Start: <input type="text" id="start"/><br>
	End: <input type="text" id="end"/><br>
	<button id="but">CLick</button>
	<script>
	function initMap() {
	var directionsService = new google.maps.DirectionsService;
	var directionsDisplay = new google.maps.DirectionsRenderer;
	var map = new google.maps.Map(document.getElementById('map'), {
	zoom: 6,
	center: {lat: 20.2961, lng: 85.8245}
	});
	directionsDisplay.setMap(map);

	// document.getElementById('submit').addEventListener('click', function() {
	// });

	$('#but').click(function(e){
	calculateAndDisplayRoute(directionsService, directionsDisplay);
	})
	}

	function calculateAndDisplayRoute(directionsService, directionsDisplay) {
	var waypts = [];
	// var checkboxArray = document.getElementById('waypoints');
	// for (var i = 0; i < checkboxArray.length; i++) {
	// if (checkboxArray.options[i].selected) {
	// waypts.push({
	// location: checkboxArray[i].value,
	// stopover: true
	// });
	// }
	// }
	waypts.push({
	location: 'angul',
	stopover: true
	});
	waypts.push({
	location: 'dhenkanal',
	stopover: true
	});

	directionsService.route({
	origin: 'bhubaneswar',
	destination: 'sambalpur',
	waypoints: waypts,
	optimizeWaypoints: true,
	travelMode: google.maps.TravelMode.DRIVING
	}, function(response, status) {
	if (status === google.maps.DirectionsStatus.OK) {
	directionsDisplay.setDirections(response);
	var route = response.routes[0];
	console.log(route)
	// For each route, display summary information.
	// for (var i = 0; i < route.legs.length; i++) {
	// var routeSegment = i + 1;
	// summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
	// '</b><br>';
	// summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
	// summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
	// summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
	// }
	var myPosition = new google.maps.LatLng(20.2915796,85.7564096);

	var somepath = decodePolyline(route.overview_polyline)
	console.log(somepath)
	var spath = []
	for(var i=0; i<somepath.length; i++){
	spath.push(new google.maps.LatLng(somepath[i].latitude, somepath[i].longitude));
	}
	var cascadiaFault = new google.maps.Polyline({
	path: spath
	});

	console.log(google.maps.geometry.poly.isLocationOnEdge(myPosition, cascadiaFault, 10e-1))
	} else {
	window.alert('Directions request failed due to ' + status);
	}
	});
	}

	function decodePolyline(encoded) {
	if (!encoded) {
	return [];
	}
	var poly = [];
	var index = 0, len = encoded.length;
	var lat = 0, lng = 0;

	while (index < len) {
	var b, shift = 0, result = 0;

	do {
	b = encoded.charCodeAt(index++) - 63;
	result = result \| ((b & 0x1f) << shift);
	shift += 5;
	} while (b >= 0x20);

	var dlat = (result & 1) != 0 ? ~(result >> 1) : (result >> 1);
	lat += dlat;

	shift = 0;
	result = 0;

	do {
	b = encoded.charCodeAt(index++) - 63;
	result = result \| ((b & 0x1f) << shift);
	shift += 5;
	} while (b >= 0x20);

	var dlng = (result & 1) != 0 ? ~(result >> 1) : (result >> 1);
	lng += dlng;

	var p = {
	latitude: lat / 1e5,
	longitude: lng / 1e5,
	};
	poly.push(p);
	}
	return poly;
	}
	</script>
	<script async defer
	src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAopM9eUD9vR5GU2OcDwLJrMEWrQ0AvIDk&callback=initMap&libraries=geometry">
	</script>

	</body>
	</html>