Next Previous

Directions API Directions Renderer

DirectionsRenderer displays the polyline between the specified origin and destination locations on the Google Maps.

It also shows the marker at the starting and ending point of the polyline.

Create Map HTML Element

<div id="map"></div>

Define A Map object

create an instance of Map object and assign it to constant called map.

const map = new google.maps.Map(document.getElementsById("map"), {
  center: new google.maps.LatLng(45.4215296, -75.6971931),
  zoom: 15,
  mapTypeId: google.maps.MapTypeId.ROADMAP

Make sure to add the Places Javascript library to the HTML template.

Create DirectionsRenderer Object

Create an instance of DirectionsRenderer object inside the response callback function from the Directions Service.

            origin: "190 Main Street, Ottawa, Canada",
            destination: "290 First Avenue, Ottawa, Canada",
            travelMode: "DRIVING"
    (response, status) => {
          const directionsRenderer = new google.maps.DirectionsRenderer({
                directions: response,
                map: map,
Next Previous