Security notice:We have become aware of a security issue that may be affecting websites using specific third-party libraries (including polyfill.io). This issue can sometimes redirect visitors away from the intended website without website owner knowledge or permission. Many of our JavaScript samples previously included apolyfill.ioscript declaration. We have removed this from our samples. If you have used our JavaScript samples that contain this declaration, we recommend removing the declaration.

Announcement:New basemap styling is coming soon to Google Maps Platform. This update to map styling includes a new default color palette, modernized pins, and improvements to map experiences and usability. All map styles will be automatically updated in March 2025. For more information on availability and how to opt in earlier, seeNew map style for Google Maps Platform.

Displaying Text Directions With setPanel()

This example demonstrates the use of theDirectionsRendererobject 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

functioninitMap():void{
constdirectionsRenderer=newgoogle.maps.DirectionsRenderer();
constdirectionsService=newgoogle.maps.DirectionsService();
constmap=newgoogle.maps.Map(
document.getElementById("map")asHTMLElement,
{
zoom:7,
center:{lat:41.85,lng:-87.65},
disableDefaultUI:true,
}
);

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

constcontrol=document.getElementById("floating-panel")asHTMLElement;

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

constonChangeHandler=function(){
calculateAndDisplayRoute(directionsService,directionsRenderer);
};

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

functioncalculateAndDisplayRoute(
directionsService:google.maps.DirectionsService,
directionsRenderer:google.maps.DirectionsRenderer
){
conststart=(document.getElementById("start")asHTMLInputElement).value;
constend=(document.getElementById("end")asHTMLInputElement).value;

directionsService
.route({
origin:start,
destination:end,
travelMode:google.maps.TravelMode.DRIVING,
})
.then((response)=>{
directionsRenderer.setDirections(response);
})
.catch((e)=>window.alert("Directionsrequestfaileddueto"+status));
}

declareglobal{
interfaceWindow{
initMap:()=>void;
}
}
window.initMap=initMap;index.ts

JavaScript

functioninitMap(){
constdirectionsRenderer=newgoogle.maps.DirectionsRenderer();
constdirectionsService=newgoogle.maps.DirectionsService();
constmap=newgoogle.maps.Map(document.getElementById("map"),{
zoom:7,
center:{lat:41.85,lng:-87.65},
disableDefaultUI:true,
});

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

constcontrol=document.getElementById("floating-panel");

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

constonChangeHandler=function(){
calculateAndDisplayRoute(directionsService,directionsRenderer);
};

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

functioncalculateAndDisplayRoute(directionsService,directionsRenderer){
conststart=document.getElementById("start").value;
constend=document.getElementById("end").value;

directionsService
.route({
origin:start,
destination:end,
travelMode:google.maps.TravelMode.DRIVING,
})
.then((response)=>{
directionsRenderer.setDirections(response);
})
.catch((e)=>window.alert("Directionsrequestfaileddueto"+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:1pxsolid#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:01px4px-1pxrgba(0,0,0,0.3);
margin:10px;
padding:00.5em;
font:40018pxRoboto,Arial,sans-serif;
overflow:hidden;
padding:5px;
font-size:14px;
text-align:center;
line-height:30px;
height:auto;
}

#map{
flex:auto;
}

#sidebar{
flex:01auto;
padding: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= "module" src= "./index.js" ></script>
</head>
<body>
<div id= "floating-panel" >
<strong>Start:</strong>
<select id= "start" >
<option value= "chicago, il" >Chicago</option>
<option value= "st louis, mo" >St Louis</option>
<option value= "joplin, mo" >Joplin, MO</option>
<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" >Kingman</option>
<option value= "barstow, ca" >Barstow</option>
<option value= "san bernardino, ca" >San Bernardino</option>
<option value= "los angeles, ca" >Los Angeles</option>
</select>
<br />
<strong>End:</strong>
<select id= "end" >
<option value= "chicago, il" >Chicago</option>
<option value= "st louis, mo" >St Louis</option>
<option value= "joplin, mo" >Joplin, MO</option>
<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" >Kingman</option>
<option value= "barstow, ca" >Barstow</option>
<option value= "san bernardino, ca" >San Bernardino</option>
<option value= "los angeles, ca" >Los Angeles</option>
</select>
</div>
<div id= "container" >
<div id= "map" ></div>
<div id= "sidebar" ></div>
</div>
<div style= "display: none" >
<div id= "floating-panel" >
<strong>Start:</strong>
<select id= "start" >
<option value= "chicago, il" >Chicago</option>
<option value= "st louis, mo" >St Louis</option>
<option value= "joplin, mo" >Joplin, MO</option>
<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" >Kingman</option>
<option value= "barstow, ca" >Barstow</option>
<option value= "san bernardino, ca" >San Bernardino</option>
<option value= "los angeles, ca" >Los Angeles</option>
</select>
<br />
<strong>End:</strong>
<select id= "end" >
<option value= "chicago, il" >Chicago</option>
<option value= "st louis, mo" >St Louis</option>
<option value= "joplin, mo" >Joplin, MO</option>
<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" >Kingman</option>
<option value= "barstow, ca" >Barstow</option>
<option value= "san bernardino, ca" >San Bernardino</option>
<option value= "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=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
defer
></script>
</body>
</html>index.html

Try Sample

JSFiddle.net Google Cloud Shell

Clone Sample

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

gitclone-bsample-directions-panelhttps://github.com/googlemaps/js-samples.git
cdjs-samples
npmi
npmstart

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

gitcheckoutsample-SAMPLE_NAME
npmi
npmstart