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
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


3 comments:

  1. Greetings! Quick question that's totally off topic. Do you know how to make your site mobile friendly? My blog looks weird when browsing from my iphone4. I'm trying to find a template or plugin that might be able to fix this problem. If you have any recommendations, please share. Many thanks!a5 notebooks

    ReplyDelete
  2. What’s Taking place i'm new to this, I stumbled upon this I have discovered It positively helpful and it has helped me out loads. I'm hoping to give a contribution & aid other customers like its aided me. Good job.Circuit breaker retrofit

    ReplyDelete
  3. I'm not sure exactly why but this blog is loading extremely slow for me. Is anyone else having this problem or is it a issue on my end? I'll check back later and see if the problem still exists.urgent cash loan Singapore

    ReplyDelete

Labels

php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Popular Posts