Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share your input on your UI Kit experience.
Migrate to the new rendering methods
Stay organized with collections
Save and categorize content based on your preferences.
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 the
DirectionsRenderer class. The Route class provides two new rendering
methods: createPolylines and createWaypointAdvancedMarkers.
Legacy DirectionsRenderer
In the Directions service (Legacy), the rendering methods were part of the
DirectionsRenderer class. The DirectionsRenderer 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 the DirectionsRenderer 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
The Route class provides the following new rendering methods, which replace the
legacy DirectionsRenderer class methods:
createPolylinescreateWaypointAdvancedMarkers
The Route class has no equivalent to the setPanel() method in the
legacy DirectionsRenderer 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 Title constlegTitleElement=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 list conststepsList=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}`); // Maneuver if(step.maneuver){ constmaneuverNode=document.createElement("p"); maneuverNode.textContent=step.maneuver; maneuverNode.className="maneuver"; stepItem.appendChild(maneuverNode); } // Distance and Duration if(step.localizedValues){ constdistanceNode=document.createElement("p"); distanceNode.textContent=`${step.localizedValues.distance} (${step.localizedValues.staticDuration})`; distanceNode.className="distance"; stepItem.appendChild(distanceNode); } // Instructions if(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();