JSFiddle - React, Tailwind, and code Playground

by vijayweb

HTML

<p>Enter your desired destination to get the distance from your current location.</p>
        <div>
            <p>
                <label for="end">Destination: </label>
                <input type="text" name="end" id="end" />

                <input id="calculate-route" type="button" value="Calculate Route" />
            </p>
            <p>
                <label for="distance">Distance (km): </label>
                <input type="text" name="distance" id="distance" readonly="true" />
            </p>
        </div>
        <div id="map_canvas"></div>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

CSS

body {
                font-family:Helvetica, Arial;
            }
            #map_canvas {
                height: 400px;
            }

JavaScript

var directionDisplay;
var map;


function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var copenhagen = new google.maps.LatLng(55.6771, 12.5704);
    var myOptions = {
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: copenhagen
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
}


var directionsService = new google.maps.DirectionsService();

function findCurrentLocation() {
    navigator.geolocation.getCurrentPosition(calcRoute);
}

function calcRoute(currentLocation) {
    var start = "new delhi"; google.maps.LatLng(currentLocation.coords.latitude, currentLocation.coords.longitude);
    var end = document.getElementById("end").value;
    var distanceInput = document.getElementById("distance");

    var request = {
        origin: start,
        destination: end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };

    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            distanceInput.value = response.routes[0].legs[0].distance.value / 1000;
        }
    });
}

initialize();

document.getElementById('calculate-route').onclick = findCurrentLocation;