JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<input type="button" value="get directions" id="submit"/>
<input value="New York, NY" id="start"/>
<input value="Newark, NJ" id="end" />
<div id="map_canvas"></div>

CSS

html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

JavaScript

var directions = [];
function initialize() {

    // Create a new map with some default settings
    var myLatlng = new google.maps.LatLng(-37.8602828, 145.079616);
    var myOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    //click function call calculateAndDisplayRoute to ge the alternative routes
    var directionsService = new google.maps.DirectionsService;



    document.getElementById('submit').addEventListener('click', function () {
 if (directions && directions.length > 0) {
     for (var i=0; i<directions.length; i++)
         directions[i].setMap(null);
 }
        directions = [];
        calculateAndDisplayRoute(directionsService, map);

    });


    //this function used to calculate the alternative route.
    function calculateAndDisplayRoute(directionsService, map) {

        //get the value from start and end input box 
        var start = document.getElementById('start').value;
        var end = document.getElementById('end').value;

        //property when dran on the map
        var directionsRequest = {
            //starting point
            origin: start,
            //destination
            destination: end,
            //multiple route
            provideRouteAlternatives: true,
            travelMode: google.maps.TravelMode.DRIVING

        };

        directionsService.route(directionsRequest, function (response, status) {

            if (status === google.maps.DirectionsStatus.OK) {
                //store the multiple routes in respones and display one by one
                for (var i = 0, len = response.routes.length; i < len; i++) {
                    directions.push(new google.maps.DirectionsRenderer({
                        map: map,
                        directions: response,
                        routeIndex: i
                    }));
                }

            } else...