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)

Tuesday, April 17, 2018

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


18 comments:

  1. Led lighting Sydneyobviously appreciate your site and you ought to write more.

    ReplyDelete
  2. I like the valuable info you provide on your articles. I will bookmark your post and check once more here regularly. I'm quite certain I will be informed many new stuff proper here! Good luck for the next! I feel this is one of the such a lot vital information for me. And i am happy studying your article. However should observation on some general issues, The website style is wonderful, the articles is in reality great : D. Excellent job, cheers programmatic advertising

    ReplyDelete
  3. Someone essentially help to make seriously posts I would state. This is the first time I frequented your web page and thus far? I surprised with the research you made to make this particular publish incredible. Magnificent job! online marketing agency

    ReplyDelete
  4. I do consider all of the ideas you've introduced for your post. They're very convincing and will certainly work. Still, the posts are very short for starters. May you please lengthen them a little from subsequent time? Thank you for the post. ecommerce singapore

    ReplyDelete
  5. Hmm is anyone else experiencing problems with the pictures on this blog loading? I'm trying to figure out if its a problem on my end or if it's the blog. Any suggestions would be greatly appreciated. advertising to get more sales leads

    ReplyDelete
  6. Hmm is anyone else having problems with the pictures on this blog loading? I'm trying to determine if its a problem on my end or if it's the blog. Any feed-back would be greatly appreciated.
    seo services in singapore

    ReplyDelete
  7. Excellent blog you have here but I was wanting to know if you knew of any discussion boards that cover the same topics talked about here? I'd really like to be a part of online community where I can get opinions from other knowledgeable individuals that share the same interest. If you have any recommendations, please let me know. Thanks! web design

    ReplyDelete
  8. For beginning an export import organization u might desire to accomplish some floor artwork.i might recommend u to fulfill the officers of the export advertising council of ur state.

    buy website domain

    ReplyDelete
  9. Hello! Quick question that's totally off topic. Do you know how to make your site mobile friendly? My web site looks weird when browsing from my iphone 4. I'm trying to find a template or plugin that might be able to correct this issue. If you have any suggestions, please share. With thanks!
    men's leather wallet singapore

    ReplyDelete
  10. "The number of organisations spending between 25 and 50 percent of their marketing budget on digital media will increase by more than 40 percent over the next five years.

    pay per click agency

    ReplyDelete
  11. We're a group of volunteers and starting a brand new scheme in our community. Your site provided us with helpful info to paintings on. You have done an impressive activity and our entire community shall be grateful to you.
    engage agency to make restaurant more visible

    ReplyDelete
  12. dont listen to these idiots..get whatever you want, i got my last name in old english writing going down the back of my right arm and i love it.

    shop online

    ReplyDelete
  13. Thanks very nice share this concept is a good way to enhance the knowledge. Digital Signature Certificate

    ReplyDelete
  14. Thank you very much for your valuable information. Digital Signature Certificate

    ReplyDelete
  15. Thanks for sharing such great piece of information with us. Apply Class 3 Digital Signature Certificate

    ReplyDelete
  16. I highly admire your post. Thanks for sharing such wonderful information, I see your post very often and share them on all social media channels.
    Digital Signature Certificate in Delhi

    ReplyDelete

More Posts

FOLLOW