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


23 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
  17. I really enjoyed reading your blog, you have lots of great content. Please visit here:
    Private Detective Agency in Mumbai

    ReplyDelete
  18. This is exactly what I was looking for. Thanks for sharing this great article. The quality of your articles and contents is great.
    Class 2 Digital Signature Certificates

    ReplyDelete
  19. Grateful to check out your website. Thank you so much for providing such useful content.
    NEGIS BOUTIQUE HOME STAY

    ReplyDelete
  20. I needed to draft you one bit of word so as to thank you yet again relating to the lovely principles you have shared on this website. It is simply shockingly generous with people like you to offer openly just what numerous people could possibly have offered for sale for an e-book to generate some cash for their own end, primarily considering that you might well have done it in the event you decided. These tricks in addition acted to become a great way to recognize that many people have similar passion really like my very own to learn good deal more when considering this issue. I'm sure there are a lot more pleasant times in the future for individuals who view your blog. marketing singapore

    ReplyDelete
  21. Spot on with this write-up, I actually think this web site wants way more consideration. I’ll most likely be once more to read way more, thanks for that info. website designing company in singapore

    ReplyDelete

More Posts

FOLLOW