title: Google Maps API - Retrieve the road distance between 2 coordinates
body: <p>Hope to find here someone that already worked with this and can give me an example of how to accomplish it.</p>
  <p><strong>Expected Results</strong> -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.</p>
  <p>I did some research  and i came up with this code here for the autocomplete inputs with the name of the places:
  <a href="https://i.stack.imgur.com/JmOmH.png" rel="nofollow noreferrer">example of autocomplete input</a></p>
  <pre><code>   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= &quot;&lt;b&gt;Location:&lt;/b&gt;&quot;+places.formatted_address+&quot;&lt;br/&gt;&quot;;
          location += &quot;&lt;b&gt;Latitude:&lt;/b&gt;&quot;+places.geometry.location.lat+&quot;&lt;br/&gt;&quot;;
          location += &quot;&lt;b&gt;Longitude:&lt;/b&gt;&quot;+places.geometry.location.lng    
      });
  }
  </code></pre>
  <p>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 :</p>
  <pre><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 += &quot; Driving distance is &quot; + directionsData.distance.text + &quot; (&quot; + directionsData.duration.text + &quot;).&quot;;
          }
        }
      });
  </code></pre>
  <p>Sorry for this, im quite new with javascript , i have been stuck here for a few days already..</p>