Migrate to the new rendering methods
This guide shows you how to migrate to the new rendering methods for the Route class. In the Directions service (Legacy), the rendering methods were part of theDirectionsRenderer class. The Route class (Beta) provides two new rendering methods:createPolylines andcreateWaypointAdvancedMarkers.
LegacyDirectionsRenderer
In the Directions service (Legacy), the rendering methods were part of theDirectionsRenderer class. TheDirectionsRenderer class handles display of the polyline, any associated markers, as well as the textual display of steps; it has the following methods:
setDirections()- Renders the provided directions response.setMap()- Sets the map on which to render the directions response.setPanel()- Displays the directions as a series of textual steps in a panel.
The following example shows how to use theDirectionsRenderer class to render directions on a map.
functioninitMap(){vardirectionsService=newgoogle.maps.DirectionsService();vardirectionsRenderer=newgoogle.maps.DirectionsRenderer();varchicago=newgoogle.maps.LatLng(41.850033,-87.6500523);varmapOptions={zoom:7,center:chicago}varmap=newgoogle.maps.Map(document.getElementById('map'),mapOptions);// Set the map on the directions renderer.directionsRenderer.setMap(map);// Set the panel to display the directions as a series of textual steps.directionsRenderer.setPanel(document.getElementById('directionsPanel'));}functioncalcRoute(){varstart=document.getElementById('start').value;varend=document.getElementById('end').value;varrequest={origin:start,destination:end,travelMode:'DRIVING'};// Call the directions service to get the directions.directionsService.route(request,function(response,status){if(status=='OK'){// Render the polyline and markers on the map.directionsRenderer.setDirections(response);}});}
Route class (Beta)
The Route class (Beta) provides the following new rendering methods, which replace the legacyDirectionsRenderer class methods:
createPolylinescreateWaypointAdvancedMarkers
TheRoute class has no equivalent to thesetPanel() method in the legacyDirectionsRenderer class. To display the textual steps, you must manually create the HTML elements and insert them into the DOM. The following example shows how to render directions on a map using the Route class, and manually create the HTML elements to display the textual steps.
letmap;letmapPolylines=[];letmarkers=[];letcenter={lat:37.447646,lng:-122.113878};// Palo Alto, CA// Initialize and add the map.asyncfunctioninitMap(){// Request the needed libraries.const{Map}=awaitgoogle.maps.importLibrary('maps')asgoogle.maps.MapsLibrary;const{Route}=awaitgoogle.maps.importLibrary('routes')asgoogle.maps.Routes;map=newMap(document.getElementById("map"),{zoom:12,center,mapTypeControl:false,mapId:'DEMO_MAP_ID',});// Define a simple directions request.constrequest={origin:'Mountain View, CA',destination:'San Francisco, CA',travelMode:'DRIVING',fields:['legs'],};// Call computeRoutes to get the directions.const{routes}=awaitRoute.computeRoutes(request);// Use createPolylines to create polylines for the route.mapPolylines=routes[0].createPolylines();// Add polylines to the map.mapPolylines.forEach((polyline)=>polyline.setMap(map));fitMapToPath(routes[0].path);// Add markers to start and end points.constmarkers=awaitroutes[0].createWaypointAdvancedMarkers({map});// Render navigation instructions.constdirectionsPanel=document.getElementById("directions-panel");if(!routes||routes.length===0){if(directionsPanel){directionsPanel.textContent="No routes available.";}}constroute=routes[0];if(!route.legs||route.legs.length===0){if(directionsPanel){directionsPanel.textContent="The route has no legs.";}return;}constfragment=document.createDocumentFragment();route.legs.forEach((leg,index)=>{constlegContainer=document.createElement("div");legContainer.className="directions-leg";legContainer.setAttribute("aria-label",`Leg${index+1}`);// Leg TitleconstlegTitleElement=document.createElement("h3");legTitleElement.textContent=`Leg${index+1} of${route.legs.length}`;legContainer.appendChild(legTitleElement);if(leg.steps&&leg.steps.length>0){// Add steps to an ordered listconststepsList=document.createElement("ol");stepsList.className="directions-steps";leg.steps.forEach((step,stepIndex)=>{conststepItem=document.createElement("li");stepItem.className="direction-step";stepItem.setAttribute("aria-label",`Step${stepIndex+1}`);// Maneuverif(step.maneuver){constmaneuverNode=document.createElement("p");maneuverNode.textContent=step.maneuver;maneuverNode.className="maneuver";stepItem.appendChild(maneuverNode);}// Distance and Durationif(step.localizedValues){constdistanceNode=document.createElement("p");distanceNode.textContent=`${step.localizedValues.distance} (${step.localizedValues.staticDuration})`;distanceNode.className="distance";stepItem.appendChild(distanceNode);}// Instructionsif(step.instructions){constinstructionsNode=document.createElement("p");instructionsNode.textContent=step.instructions;instructionsNode.className="instruction";stepItem.appendChild(instructionsNode);}stepsList.appendChild(stepItem);});legContainer.appendChild(stepsList);}fragment.appendChild(legContainer);directionsPanel?.appendChild(fragment);});}// Helper function to fit the map to the path.asyncfunctionfitMapToPath(path){const{LatLngBounds}=awaitgoogle.maps.importLibrary('core')asgoogle.maps.CoreLibrary;constbounds=newLatLngBounds();path.forEach((point)=>{bounds.extend(point);});map.fitBounds(bounds);}initMap();
Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-10-02 UTC.