CODEWITHSUNDEEP
javascripthtmlgoogle-places-apigoogle-directions-api
Joao Rosado
Joao Rosado

Reputation: 13

Google Maps API - Retrieve the road distance between 2 coordinates

Hope to find here someone that already worked with this and can give me an example of how to accomplish it.

Expected Results -In a simple HTML page i want 2 input fields with autocomplete using the Google Maps API (Places API?) one input is the start the other input is the end, and it will give me the coordinates of this 2 places, and with those 2 coordinates i want to calculate the road distance in KM between this 2 places and display the result on the screen.

I did some research and i came up with this code here for the autocomplete inputs with the name of the places: example of autocomplete input

   google.maps.event.addDomListener(window,'load',initialize);
function initialize(){
    var autocomplete =new google.maps.places.Autocomplete(document.getElementById('txtautocomplete'));
    google.maps.events.addListener(autocomplete, 'plac_changed', function (){
        var places= autocomplete.getplace();
        var location= "<b>Location:</b>"+places.formatted_address+"<br/>";
        location += "<b>Latitude:</b>"+places.geometry.location.lat+"<br/>";
        location += "<b>Longitude:</b>"+places.geometry.location.lng    
    });
}

and to calculate the road distance between 2 points i saw this in the documentation about the directions API somewhere... and i kept the code :

var startcoords=new google.maps.LatLng(latitude,longitude);
var fromcoords=new google.maps.LatLng(latitude,longitude);


let directionsService = new google.maps.DirectionsService();
  let directionsRenderer = new google.maps.DirectionsRenderer();
  directionsRenderer.setMap(map); // Existing map object displays directions
  // Create route from existing points used for markers
  const route = {
      origin: startcoords,
      destination: fromcoords,
      travelMode: google.maps.TravelMode.DRIVING
  }

  directionsService.route(route,
    function(response, status) { // anonymous function to capture directions
      if (status !== 'OK') {
        window.alert('Directions request failed due to ' + status);
        return;
      } else {
        directionsRenderer.setDirections(response); // Add route to the map
        var directionsData = response.routes[0].legs[0]; // Get data about the mapped route
        if (!directionsData) {
          window.alert('Directions request failed');
          return;
        }
        else {
          document.getElementById('msg').innerHTML += " Driving distance is " + directionsData.distance.text + " (" + directionsData.duration.text + ").";
        }
      }
    });

Sorry for this, im quite new with javascript , i have been stuck here for a few days already..

Upvotes: 0

Views: 3180

Answers (1)

jabamataro
jabamataro

Reputation: 1232

First off, it is not recommended to use latlng coordinates in Directions API request as it may affect the location accuracy of the origin and destination. So therefore, I would suggest using the formatted_address instead.

Since you want to use Places API with 2 input fields, start and end location input fields, you will need to make a two instance of Places API. For example:

var startAutocomplete = new google.maps.places.Autocomplete(startInput);
var endAutocomplete = new google.maps.places.Autocomplete(endInput);

You will need to get the values from the getPlace() method. In this case, I stored the formatted_address value in a startValue and endValue variable which later on you will pass to directions service. The formatted_address value of both start & end location is sufficient to serve as the origin and destination respectively.

 var startValue, endValue; 

 startAutocomplete.addListener("place_changed", function() {
     startValue = startAutocomplete.getPlace().formatted_address;
 });

 endAutocomplete.addListener("place_changed", function() {
     endValue = endAutocomplete.getPlace().formatted_address;
 });

For the DirectionsService, you can use the values you got from the getPlace() method like this:

directionsService.route({
   origin: startValue,
   destination: endValue,
   travelMode: "DRIVING"
}

You can check out the example I made here on codesandbox.io to get a better view on how to do this on JavaScript. As a bonus I also added the alternativeRoutes function which will display the fastest and shortest routes.

NOTE: you need to use your own API key on the example to work.

Upvotes: 1

Related Questions