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 (Beta) 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.
function initMap () { var directionsService = new google . maps . DirectionsService (); var directionsRenderer = new google . maps . DirectionsRenderer (); var chicago = new google . maps . LatLng ( 41.850033 , - 87.6500523 ); var mapOptions = { zoom : 7 , center : chicago } var map = new google . 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' )); } function calcRoute () { var start = document . getElementById ( 'start' ). value ; var end = document . getElementById ( 'end' ). value ; var request = { 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
legacy DirectionsRenderer
class methods:
-
createPolylines -
createWaypointAdvancedMarkers
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.
let map ; let mapPolylines = []; let markers = []; let center = { lat : 37.447646 , lng : - 122.113878 }; // Palo Alto, CA // Initialize and add the map. async function initMap () { // Request the needed libraries. const { Map } = await google . maps . importLibrary ( 'maps' ) as google . maps . MapsLibrary ; const { Route } = await google . maps . importLibrary ( 'routes' ) as google . maps . Routes ; map = new Map ( document . getElementById ( "map" ), { zoom : 12 , center , mapTypeControl : false , mapId : 'DEMO_MAP_ID' , }); // Define a simple directions request. const request = { origin : 'Mountain View, CA' , destination : 'San Francisco, CA' , travelMode : 'DRIVING' , fields : [ 'legs' ], }; // Call computeRoutes to get the directions. const { routes } = await Route . 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. const markers = await routes [ 0 ]. createWaypointAdvancedMarkers ({ map }); // Render navigation instructions. const directionsPanel = document . getElementById ( "directions-panel" ); if ( ! routes || routes . length === 0 ) { if ( directionsPanel ) { directionsPanel . textContent = "No routes available." ; } } const route = routes [ 0 ]; if ( ! route . legs || route . legs . length === 0 ) { if ( directionsPanel ) { directionsPanel . textContent = "The route has no legs." ; } return ; } const fragment = document . createDocumentFragment (); route . legs . forEach (( leg , index ) => { const legContainer = document . createElement ( "div" ); legContainer . className = "directions-leg" ; legContainer . setAttribute ( "aria-label" , `Leg ${ index + 1 } ` ); // Leg Title const legTitleElement = 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 const stepsList = document . createElement ( "ol" ); stepsList . className = "directions-steps" ; leg . steps . forEach (( step , stepIndex ) => { const stepItem = document . createElement ( "li" ); stepItem . className = "direction-step" ; stepItem . setAttribute ( "aria-label" , `Step ${ stepIndex + 1 } ` ); // Maneuver if ( step . maneuver ) { const maneuverNode = document . createElement ( "p" ); maneuverNode . textContent = step . maneuver ; maneuverNode . className = "maneuver" ; stepItem . appendChild ( maneuverNode ); } // Distance and Duration if ( step . localizedValues ) { const distanceNode = document . createElement ( "p" ); distanceNode . textContent = ` ${ step . localizedValues . distance } ( ${ step . localizedValues . staticDuration } )` ; distanceNode . className = "distance" ; stepItem . appendChild ( distanceNode ); } // Instructions if ( step . instructions ) { const instructionsNode = 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. async function fitMapToPath ( path ) { const { LatLngBounds } = await google . maps . importLibrary ( 'core' ) as google . maps . CoreLibrary ; const bounds = new LatLngBounds (); path . forEach (( point ) => { bounds . extend ( point ); }); map . fitBounds ( bounds ); } initMap ();
