Generating path between start and end points through way points using google map API

In this article we explaining about how to dynamically generate a path between multiple points(start, end and way points) by using google map direction API.

Here is the simplest way of doing it, we explain it step by step.

CSS

<style>

      #right-panel {

        font-family: 'Roboto','sans-serif';

        line-height: 30px;

        padding-left: 10px;

      }

      #right-panel select, #right-panel input {

        font-size: 15px;

      }

      #right-panel select {

        width: 100%;

      }

      #right-panel i {

        font-size: 12px;

      }

      html, body {

        height: 100%;

        margin: 0;

        padding: 0;

      }

      #map {

        height: 100%;

        float: left;

        width: 70%;

        height: 100%;

      }

      #right-panel {

        margin: 20px;

        border-width: 2px;

        width: 20%;

        height: 400px;

        float: left;

        text-align: left;

        padding-top: 0;

      }

      #directions-panel {

        margin-top: 10px;

        background-color: #23b0ff;

        padding: 10px;

        overflow: scroll;

        height: 174px;

      }

    </style>

Script

<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: 41.85, lng: -87.65}

        });

        directionsDisplay.setMap(map);

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

          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

            });

          }

        }

        directionsService.route({

          origin: document.getElementById('start').value,

          destination: document.getElementById('end').value,

          waypoints: waypts,

          optimizeWaypoints: true,

          travelMode: 'DRIVING'

        }, function(response, status) {

          if (status === 'OK') {

            directionsDisplay.setDirections(response);

            var route = response.routes[0];

            var summaryPanel = document.getElementById('directions-panel');

            summaryPanel.innerHTML = '';

            // 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>';

            }

          } else {

            window.alert('Directions request failed due to ' + status);

          }

        });

      }

    </script>

API

    <script async defer

    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

    </script>

Here is the procedure to create new API key

http://www.phpjavascript.com/2018/02/how-to-add-google-map-to-website-using.html

Body

<div id="map"></div>

<a href ='http://www.phpjavascript.com/2018/02/how-to-add-google-map-to-website-using.html'>MAP</a>

    <div id="right-panel">

    <div>

    <b>Start:</b>

    <select id="start">

      <option value="Hyderabad">Hyderabad</option>

      <option value="Banglore">Banglore</option>

      <option value="Delhi">Delhi</option>

      <option value="Pune">Pune</option>

    </select>

    <br>

    <b>Waypoints:</b> <br>

    <i>(Ctrl+Click or Cmd+Click for multiple selection)</i> <br>

    <select multiple id="waypoints">

      <option value="Delhi">Delhi</option>

      <option value="Banglore">Banglore</option>

      <option value="Chenai">Chenai</option>

      <option value="Hyderabad">Hyderabad</option>

      <option value="Tripura">Tripura</option>

      <option value="Varanasi">Varanasi</option>

    </select>

    <br>

    <b>End:</b>

    <select id="end">

      <option value="Chenai">Chenai</option>

      <option value="Kolkata">Kolkata</option>

      <option value="Mumbai">Mumbai</option>

      <option value="Rajasthan">Rajasthan</option>

    </select>

    <br>

      <input type="submit" id="submit">

    </div>

    <div id="directions-panel"></div>

    </div>

Result