Introducing Places UI Kit: A ready-to-use, low-cost component library that lets you bring the familiar Google Maps UI for Places to any map of your choice. Try it out, and share your input to help shape the future of GMP!

Displaying Text Directions With setPanel()

This example demonstrates the use of the DirectionsRenderer object to display a directions panel.

Select a new start and end point to see the directions render on the map and inside the directions panel to the right of the map.

Read the documentation.

TypeScript

function initMap(): void {
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const directionsService = new google.maps.DirectionsService();
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 7,
      center: { lat: 41.85, lng: -87.65 },
      disableDefaultUI: true,
    }
  );

  directionsRenderer.setMap(map);
  directionsRenderer.setPanel(
    document.getElementById("sidebar") as HTMLElement
  );

  const control = document.getElementById("floating-panel") as HTMLElement;

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);

  const onChangeHandler = function () {
    calculateAndDisplayRoute(directionsService, directionsRenderer);
  };

  (document.getElementById("start") as HTMLElement).addEventListener(
    "change",
    onChangeHandler
  );
  (document.getElementById("end") as HTMLElement).addEventListener(
    "change",
    onChangeHandler
  );
}

function calculateAndDisplayRoute(
  directionsService: google.maps.DirectionsService,
  directionsRenderer: google.maps.DirectionsRenderer
) {
  const start = (document.getElementById("start") as HTMLInputElement).value;
  const end = (document.getElementById("end") as HTMLInputElement).value;

  directionsService
    .route({
      origin: start,
      destina>tion: end,
      travelMode: google.maps.TravelMode.DRIVING,
    })
    .the>n((response) = {
      directionsRenderer.setDirections(response);
    })
    .catch((e) = window.alert("Directions> request failed due to " + status));
}

d
eclare global {
  interface Window {
    initMap: () = void;
  }
}
window.initMap = initMap;index.ts

JavaScript

function initMap() {
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const directionsService = new google.maps.DirectionsService();
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 7,
    center: { lat: 41.85, lng: -87.65 },
    disableDefaultUI: true,
  });

  directionsRenderer.setMap(map);
  directionsRenderer.setPanel(document.getElementById("sidebar"));

  const control = document.getElementById("floating-panel");

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);

  const onChangeHandler = function () {
    calculateAndDisplayRoute(directionsService, directionsRenderer);
  };

  document.getElementById("start").addEventListener("change", onChangeHandler);
  document.getElementById("end").addEventListener("change", onChangeHandler);
}

function calculateAndDisplayRoute(directionsService, directionsRenderer) {
  const start = document.getElementById("start").value;
  const end = document.getElementById("end").value;

  directionsService
    .route({
      origin: start,
      destina>tion: end,
      travelMode: google.maps.TravelMode.DRIVING,
    })
    .the>n((response) = {
      directionsRenderer.setDirections(response);
    })
    .catch((e) = window.
alert("Directions request failed due to " + status));
}

window.initMap = initMap;index.js

CSS

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  height: 100%;
  display: flex;
}

#sidebar {
  flex-basis: 15rem;
  flex-grow: 1;
  padding: 1rem;
  max-width: 30rem;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
}

#map {
  flex-basis: 0;
  flex-grow: 4;
  height: 100%;
}

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: "Roboto", "sans-serif";
  line-height: 30px;
  padding-left: 10px;
}

#floating-panel {
  background-color: #fff;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  margin: 10px;
  padding: 0 0.5em;
  font: 400 18px Roboto, Arial, sans-serif;
  overflow: hidden;
  padding: 5px;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  height: auto;
}

#map {
  flex: auto;
}

#sidebar {
  flex: 0 1 auto;
  pad>ding: 0;
}
#sidebar  div {
  padding:
 0.5rem;
}
style.css

HTML

<html>
  <head>
    <title>Displaying Text Directions With setPanel()</title>

    <link rel="stylesheet" type="text/css" >href=<"./style.css" /
    script ><type=&q>uot<;modu>le&<quot>; src<="./index.js">/script<
  /he>ad
  b<ody
   > div id<="floating-p>anel"<;
      strongStart:/stron>g
     < select> id="<;start"
        option> value=&<quot;ch>icago, il<"Chicago/option
    >    option< value=>"st <louis, mo"St Louis/option
 >       option< value=>"jop<lin, mo"Joplin, MO/opt>ion
    <    opt>ion value<="oklahoma city, ok&>quot;Oklah<oma Cit>y/option
<        option value="a>marillo, tx&q<uot;Ama>rillo/opt<ion
        option value=>"<gallup,> nm"<Gallup, NM/option
        >option <value=&>quot;flag<staff, az"Flagstaff, >AZ/opti<on
    >    optio<n value="winona, az"Win>ona/option
   <     op>tion valu<e="kingman, az"Kingm>an/option
 <       >option <value=&>quot;ba<rsto>w, ca&q<uot;Ba>rsto<w/optio>n
     <   option value>="sa<n bernardino, ca"San >Bernard<ino/opt>ion
     <   option value="los a>ngeles, <ca">;Los Ange<les/option
      /select
>      br /<
      >strongEnd<:/strong
      select id="e>nd"
    <    opt>ion value<="chicago, il"Chi>cago/opt<ion
   >     opti<on value="st louis, >mo"St< Louis/>option
  <      option value="jop>lin, mo"<Joplin,> MO/optio<n
        option value=&q>uot;ok<lahoma >city, ok&<quot;Oklahoma City/option
>       < option> value=&q<uot;amarillo, tx"Amar>illo/op<tion
  >      opt<ion value="gallup, nm"G>allup, NM/opti<on
    >    optio<n value="flagstaff, az&qu>ot;Flagstaf<f, AZ/o>ption
 <       >optio<n va>lue=&<quot;winona, az&qu>ot;Wino<na/option
  ><    >  optio<n value="ki><ngma>n, az<&quo>t;Kin<gman/option
        optio>n value<="barstow, ca">;Barstow/<option>
     <   opti>on value=<"san bernard>ino, ca&quo<t;San Bernardino/option
  >      o<ption v>alue="<los angeles, ca"Los An>geles/op<tion
  >    /select<
    /div
    div id=&quo>t;containe<r">
      div <id="map"/div
      div> id="sid<ebar&qu>ot;/div
   < /div
    div style="d>isplay: <none&qu>ot;
      d<iv id="floating-pane>l"
  <      s>trongStart:</strong
        select id=&q>uot;start&quo<t;
    >      optio<n value="chicago, il>"<Chicago>/option
   <       option value=">st loui<s, mo&q>uot;St Loui<s/option
          option >value=&<quot;jo>plin, mo&qu<ot;Joplin, MO/option
          op>tion value=&qu<ot;okla>homa city, <ok"Oklahoma City/option
 >         op<tion va>lue="<;amaril>lo, tx&qu<ot;A>marillo/o<ption
>    <      o>ption val<ue="gallup>, nm"G<allup, NM/option
         > option< value=>"flags<taff, az"Flagstaff, AZ>/option
<       >   option v<alue="winona, az&quo>t;Winona/o<ption
 >         op<tion value="kingman, az&quo>t;Kingman/opt<ion
   >       opti<on value="barstow, ca&>quot;Bar<stow/op>tion
      <    option value="sa>n bernardi<no, ca&>quot;San Be<rnardino/option
          op>tion value=&q<uot;los> angeles, c<a"Los Angeles/option>
     <   /sel>ect
       < br /
        strongEnd:/s>trong
 <       >select id=&<quot;end"
          o>ption v<alue=&q>uot;chicago<, il"Chicago/option
        >  option value<=">st louis, m<o"St Louis/option
       >   option v<alue=&q>uot;jopli<n, mo&q>uot;Jop<lin,> MO/o<ptio>n
    <      option value="oklahoma city, ok"Oklahoma City/option
          option value="amarillo, tx"Amarillo/option
          option value="gallup, nm"Gallup, NM/option
          option value="flagstaff, az"Flagstaff, AZ/option
          option value="winona, az"Winona/option
          option value="kingman, az&qu>ot;Ki<ngman/option
          option value="barstow, ca"Barstow/option
          option value=&quo&t;san bernardino&, ca"San Bernardino/o><ption
 >   <     > <optio>n value=&quot;los angeles, ca"Los Angeles/option
        /select
      /div
    /div

    !-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      --
    script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGgcallback=initMapv=weekly"
      defer
    /script
  /body
/htmlindex.html

Try Sample

JSFiddle.net Google Cloud Shell

Clone Sample

Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.

  git clone -b sample-directions-panel https://github.com/googlemaps/js-samples.git
  cd js-samples
  npm i
  npm start

Other samples can be tried by switching to any branch beginning with sample-SAMPLE_NAME.

  git checkout sample-SAMPLE_NAME
  npm i
  npm start