Google Map Add Directions service from one place to another

Leave a Comment / php / By

Google Map Add Directions service from one place to another

In this post we will give you information about Google Map Add Directions service from one place to another. Hear we will give you detail about Google Map Add Directions service from one place to anotherAnd how to use it also give you demo for it if it is necessary.

You can calculate directions between start and the end point with the help of this Google map service. Google Maps Directions Service receives direction requests and returns computed results. The provided service is also helpful for the developers who want to compute direction data within maps given by one of the Google Maps APIs. This service can return multi-part directions using a series of waypoints.



Add style in your head tag. 

  1. <style>
  2.   html, body {
  3. height:100%;    
  4. margin:;    
  5. padding:;    
  6. }
  7. #map{
  8. height:99%;  
  9. width:99%;  
  10. }
  11. #panel{
  12. position:absolute;    
  13. top:0px;    
  14. left:25%;    
  15. z-index:5;    
  16. background-color:#fff;    
  17. padding:0px;    
  18. border:1pxsolid#999;    
  19. text-align:center;    
  20. font-family: 'Roboto','sans-serif';    
  21. line-height:0px;    
  22. padding-left:10px;    
  23. }
  24. </style>
<style>    
  html, body {    
    height: 100%;    
    margin: 0;    
    padding: 0;    
  }    
  #map {    
   height: 99%;  
   width: 99%;  
 }    
#panel {    
  position: absolute;    
  top: 0px;    
  left: 25%;    
  z-index: 5;    
  background-color: #fff;    
  padding: 0px;    
  border: 1px solid #999;    
  text-align: center;    
  font-family: 'Roboto','sans-serif';    
  line-height: 0px;    
  padding-left: 10px;    
}    
</style>



Add script before closing head tag. 

  1. <script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap&key={key}"
  2.         async defer></script>
  3. <script>
  4. functioninitMap(){
  5. var lat_lng ={lat:22.08672, lng:79.42444};
  6. var directionsService =new google.maps.DirectionsService;
  7. var directionsDisplay =new google.maps.DirectionsRenderer;
  8. var map =new google.maps.Map(document.getElementById('map'),{
  9.     zoom:6,
  10.     center: lat_lng    
  11. });
  12.   directionsDisplay.setMap(map);
  14. var onChangeHandler =function(){
  15. calculateAndDisplayRoute(directionsService, directionsDisplay);
  16. };
  17.   document.getElementById('Source').addEventListener('change', onChangeHandler);
  18.   document.getElementById('Destination').addEventListener('change', onChangeHandler);
  19. }
  21. functioncalculateAndDisplayRoute(directionsService, directionsDisplay){
  22.   directionsService.route({
  23.     origin: document.getElementById('Source').value,
  24.     destination: document.getElementById('Destination').value,
  25.     travelMode: google.maps.TravelMode.DRIVING    
  26. },function(response, status){
  27. if(status === google.maps.DirectionsStatus.OK){
  28.       directionsDisplay.setDirections(response);
  29. }else{
  30.       window.alert('Request for getting direction is failed due to '+ status);
  31. }
  32. });
  33. }
  34. </script>
 <script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap&key={key}"    
        async defer></script>    
        <script>    
function initMap() {  
  var lat_lng = {lat: 22.08672, lng: 79.42444};  
  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_lng    
  });    
  directionsDisplay.setMap(map);    
    
  var onChangeHandler = function() {    
    calculateAndDisplayRoute(directionsService, directionsDisplay);    
  };    
  document.getElementById('Source').addEventListener('change', onChangeHandler);    
  document.getElementById('Destination').addEventListener('change', onChangeHandler);    
}    
    
function calculateAndDisplayRoute(directionsService, directionsDisplay) {    
  directionsService.route({    
    origin: document.getElementById('Source').value,    
    destination: document.getElementById('Destination').value,    
    travelMode: google.maps.TravelMode.DRIVING    
  }, function(response, status) {    
    if (status === google.maps.DirectionsStatus.OK) {    
      directionsDisplay.setDirections(response);    
    } else {    
      window.alert('Request for getting direction is failed due to ' + status);    
    }    
  });    
}    
  </script>



HTML File 

  2. <divid="panel">
  3. <b>Source: </b>
  4. <selectid="Source">
  6. <optionvalue="New Delhi, in">New Delhi</option>
  7. <optionvalue="Mumbai, in">Mumbai</option>
  8. <optionvalue="Kolkata, in">Kolkata</option>
  9. <optionvalue="Chennai, in">Chennai</option>
  10. <optionvalue="Indore, in">Indore</option>
  11. <optionvalue="Hyderabad, in">Hyderabad</option>
  12. <optionvalue="Ahemdabad, in">Ahemdabad</option>
  13. <optionvalue="Pune, in">Pune</option>
  14. <optionvalue="Bhopal, in">Bhopal</option>
  15. <optionvalue="Jaipur, in">Jaipur</option>
  16. <optionvalue="Bengluru, in">Bengluru</option>
  17. </select>
  18. <b>Destination: </b>
  19. <selectid="Destination">
  20. <optionvalue="Mumbai, in">Mumbai</option>
  21. <optionvalue="New Delhi, in">New Delhi</option>
  22. <optionvalue="Kolkata, in">Kolkata</option>
  23. <optionvalue="Chennai, in">Chennai</option>
  24. <optionvalue="Indore, in">Indore</option>
  25. <optionvalue="Ahemdabad, in">Ahemdabad</option>
  26. <optionvalue="Jaipur, in">Jaipur</option>
  27. <optionvalue="Bengluru, in">Bengluru</option>
  28. <optionvalue="Hyderabad, in">Hyderabad</option>
  29. <optionvalue="Pune, in">Pune</option>
  30. <optionvalue="Bhopal, in">Bhopal</option>
  31. </select>
  32. </div>
  33. <divid="map"></div>
    
    <div id="panel">    
    <b>Source: </b>    
    <select id="Source">    
        
      <option value="New Delhi, in">New Delhi</option>  
      <option value="Mumbai, in">Mumbai</option>   
      <option value="Kolkata, in">Kolkata</option>    
      <option value="Chennai, in">Chennai</option>    
      <option value="Indore, in">Indore</option>    
      <option value="Hyderabad, in">Hyderabad</option>    
      <option value="Ahemdabad, in">Ahemdabad</option>    
       <option value="Pune, in">Pune</option>    
      <option value="Bhopal, in">Bhopal</option>    
      <option value="Jaipur, in">Jaipur</option>    
      <option value="Bengluru, in">Bengluru</option>      
    </select>    
    <b>Destination: </b>    
    <select id="Destination">    
      <option value="Mumbai, in">Mumbai</option>    
      <option value="New Delhi, in">New Delhi</option>    
      <option value="Kolkata, in">Kolkata</option>    
      <option value="Chennai, in">Chennai</option>    
      <option value="Indore, in">Indore</option>    
      <option value="Ahemdabad, in">Ahemdabad</option>    
      <option value="Jaipur, in">Jaipur</option>    
      <option value="Bengluru, in">Bengluru</option> 
      <option value="Hyderabad, in">Hyderabad</option>    
      <option value="Pune, in">Pune</option>    
      <option value="Bhopal, in">Bhopal</option>       
    </select>    
    </div>    
    <div id="map"></div>


Google map is useful while you travelling from one place to another, by using map service you can navigate and fine shortest way to travel.


Show Demo

Label :

Google API

jQuery

API

JavaScript

Hope this code and post will helped you for implement Google Map Add Directions service from one place to another. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  33  =  42

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US