Javascript Google Directions API Example to Display Routes Between Two Locations in Google Maps

Welcome folks today in this blog post we will be using the google directions api to display routes between two locations in google maps.All the full source code of the application is shown below.

LIVE DEMO

Get Started

In order to get started you need to create the index.html file and copy paste the following code

index.html

<!DOCTYPE html>
<html>

<head>
    <title>FREE GPS Direction Route Finder For Driving in Google Maps Online Tool - WebNinjaDeveloper.com</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script
        src="https://maps.googleapis.com/maps/api/js?key=##yourapikey##&libraries=places"></script>
</head>

<body onload="initMap()">
    <h1 class="text-center">Directions Route Finder</h1>
    <br>
    <div class="container">
        <div class="form-group">
            <input id="source" class="form-control" type="text" placeholder="Source">
        </div>
        <div class="form-group">
            <input id="dest" class="form-control" type="text" placeholder="Destination">
        </div>
        <button class="btn btn-primary" onclick="calcRoute()">Get Directions</button>
        <br><br>
        <div id="map" style="height: 500px; width: 100%;"></div>
        <br>
    </div>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>FREE GPS Direction Route Finder For Driving in Google Maps Online Tool - WebNinjaDeveloper.com</title>

<script

src="https://maps.googleapis.com/maps/api/js?key=##yourapikey##&libraries=places"></script>

</head>

<h1 class="text-center">Directions Route Finder</h1>

<br>

</div>

</div>

<button class="btn btn-primary" onclick="calcRoute()">Get Directions</button>

<br>

</div>

</body>

</html>

As you can see we have two input fields where we take the source and destination autocomplete fields for fetching the location. And then we have the button to calculate the routes. And then we are showing the google maps below to show the routes between two locations. And as you can see we are including the cdn of the google maps and directions api. Here you need to copy paste your own api key from google cloud console.

Now if you open the index.html file inside the browser you will see the below result as shown below

JAVASCRIPT CODE

var map;
var directionsService;
var directionsRenderer;
var sourceAutocomplete;
var destAutocomplete;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 37.7749, lng: -122.4194 },
    zoom: 13,
  });
  google.maps.event.addListener(map, "click", function (event) {
    this.setOptions({ scrollwheel: true });
  });
  directionsService = new google.maps.DirectionsService();
  directionsRenderer = new google.maps.DirectionsRenderer();
  directionsRenderer.setMap(map);

  sourceAutocomplete = new google.maps.places.Autocomplete(
    document.getElementById("source")
  );
  destAutocomplete = new google.maps.places.Autocomplete(
    document.getElementById("dest")
  );
}

function calcRoute() {
  var source = document.getElementById("source").value;
  var dest = document.getElementById("dest").value;
  var request = {
    origin: source,
    destination: dest,
    travelMode: "DRIVING",
  };
  directionsService.route(request, function (result, status) {
    if (status == "OK") {
      directionsRenderer.setDirections(result);
    }
  });
}

var map;

var directionsService;

var directionsRenderer;

var sourceAutocomplete;

var destAutocomplete;

function initMap() {

map = new google.maps.Map(document.getElementById("map"), {

center: { lat: 37.7749, lng: -122.4194 },

zoom: 13,

});

google.maps.event.addListener(map, "click", function (event) {

this.setOptions({ scrollwheel: true });

});

directionsService = new google.maps.DirectionsService();

directionsRenderer = new google.maps.DirectionsRenderer();

directionsRenderer.setMap(map);

sourceAutocomplete = new google.maps.places.Autocomplete(

document.getElementById("source")

);

destAutocomplete = new google.maps.places.Autocomplete(

document.getElementById("dest")

);

}

function calcRoute() {

var source = document.getElementById("source").value;

var dest = document.getElementById("dest").value;

var request = {

origin: source,

destination: dest,

travelMode: "DRIVING",

};

directionsService.route(request, function (result, status) {

if (status == "OK") {

directionsRenderer.setDirections(result);

}

});

}

As you can see we are first of all fetching the locations from the autocomplete fields. And then we are calling the directions api and then we are calling the directions service to get the routes and directions between two locations. And then we are getting the source and destination locations using the input fields. And then we are calling the calcRoute() method and inside that we are calculating the driving distance and then we are using the route() method to render the directions within the google map as shown below