Create markers for route waypoints by calling createWaypointAdvancedMarkers()
.
By default, createWaypointAdvancedMarkers()
creates markers for the route labeled
'A', 'B', 'C', etc. for each waypoint. You can further customize the markers by passing in
options to alter the marker style based on the marker index or properties of the corresponding RouteLeg
.
See the complete example source code
The following code sample shows how to create custom markers for route waypoints.
TypeScript
let mapPolylines : google.maps.Polyline [] = []; const mapElement = document . querySelector ( 'gmp-map' ) as google . maps . MapElement ; let innerMap ; // Initialize and add the map. async function initMap () { // Request the needed libraries. await google . maps . importLibrary ( 'maps' ); innerMap = await mapElement . innerMap ; innerMap . setOptions ({ mapTypeControl : false , mapId : 'DEMO_MAP_ID' , }); // Call the function after the map is loaded. google . maps . event . addListenerOnce ( innerMap , 'idle' , () = > { getDirections (); }); } async function getDirections () { //@ts-ignore // Request the needed libraries. const [{ Route }, { PinElement }] = await Promise . all ([ google . maps . importLibrary ( 'routes' ), google . maps . importLibrary ( 'marker' ), ]); // Define routes request with an intermediate stop. const request = { origin : 'Parking lot, Christmas Tree Point Rd, San Francisco, CA 94131' , destination : '100 Spinnaker Dr, Sausalito, CA 94965' , // We're having a yummy lunch! intermediates : [{ location : '300 Finley Rd San Francisco, CA 94129' }], // But first, we golf! travelMode : 'DRIVING' , fields : [ 'path' , 'legs' , 'viewport' ], }; // Call computeRoutes to get the directions. const result = await Route . computeRoutes ( request ); if ( ! result . routes || result . routes . length === 0 ) { console . warn ( "No routes found" ); return ; } // Alter style based on marker index. function markerOptionsMaker ( defaultOptions : google.maps.marker.AdvancedMarkerElementOptions , //@ts-ignore waypointMarkerDetails : google.maps.routes.WaypointMarkerDetails ) { const { index , totalMarkers , leg } = waypointMarkerDetails ; // Style the origin waypoint. if ( index === 0 ) { return { ... defaultOptions , map : innerMap , content : new PinElement ({ glyphText : ( index + 1 ). toString (), glyphColor : 'white' , background : 'green' , borderColor : 'green' , }). element } } // Style all intermediate waypoints. if ( ! ( index === 0 || index === totalMarkers - 1 )) { return { ... defaultOptions , map : innerMap , content : new PinElement ({ glyphText : ( index + 1 ). toString (), glyphColor : 'white' , background : 'blue' , borderColor : 'blue' , }). element } } // Style the destination waypoint. if ( index === totalMarkers - 1 ) { return { ... defaultOptions , map : innerMap , content : new PinElement ({ glyphText : ( index + 1 ). toString (), glyphColor : 'white' , background : 'red' , borderColor : 'red' , }). element } } return { ... defaultOptions , map : innerMap }; } const markers = await result . routes [ 0 ]. createWaypointAdvancedMarkers ( markerOptionsMaker ); // Fit the map to the route. innerMap . fitBounds ( result . routes [ 0 ]. viewport ); innerMap . setHeading ( 270 ); // Create polylines and add them to the map. mapPolylines = result . routes [ 0 ]. createPolylines (); mapPolylines . forEach (( polyline ) = > polyline . setMap ( innerMap )); } initMap ();
JavaScript
let mapPolylines = []; const mapElement = document . querySelector ( 'gmp-map' ); let innerMap ; // Initialize and add the map. async function initMap () { // Request the needed libraries. await google . maps . importLibrary ( 'maps' ); innerMap = await mapElement . innerMap ; innerMap . setOptions ({ mapTypeControl : false , mapId : 'DEMO_MAP_ID' , }); // Call the function after the map is loaded. google . maps . event . addListenerOnce ( innerMap , 'idle' , () = > { getDirections (); }); } async function getDirections () { //@ts-ignore // Request the needed libraries. const [{ Route }, { PinElement }] = await Promise . all ([ google . maps . importLibrary ( 'routes' ), google . maps . importLibrary ( 'marker' ), ]); // Define routes request with an intermediate stop. const request = { origin : 'Parking lot, Christmas Tree Point Rd, San Francisco, CA 94131' , destination : '100 Spinnaker Dr, Sausalito, CA 94965' , // We're having a yummy lunch! intermediates : [{ location : '300 Finley Rd San Francisco, CA 94129' }], // But first, we golf! travelMode : 'DRIVING' , fields : [ 'path' , 'legs' , 'viewport' ], }; // Call computeRoutes to get the directions. const result = await Route . computeRoutes ( request ); if ( ! result . routes || result . routes . length === 0 ) { console . warn ( "No routes found" ); return ; } // Alter style based on marker index. function markerOptionsMaker ( defaultOptions , //@ts-ignore waypointMarkerDetails ) { const { index , totalMarkers , leg } = waypointMarkerDetails ; // Style the origin waypoint. if ( index === 0 ) { return { ... defaultOptions , map : innerMap , content : new PinElement ({ glyphText : ( index + 1 ). toString (), glyphColor : 'white' , background : 'green' , borderColor : 'green' , }). element }; } // Style all intermediate waypoints. if ( ! ( index === 0 || index === totalMarkers - 1 )) { return { ... defaultOptions , map : innerMap , content : new PinElement ({ glyphText : ( index + 1 ). toString (), glyphColor : 'white' , background : 'blue' , borderColor : 'blue' , }). element }; } // Style the destination waypoint. if ( index === totalMarkers - 1 ) { return { ... defaultOptions , map : innerMap , content : new PinElement ({ glyphText : ( index + 1 ). toString (), glyphColor : 'white' , background : 'red' , borderColor : 'red' , }). element }; } return { ... defaultOptions , map : innerMap }; } const markers = await result . routes [ 0 ]. createWaypointAdvancedMarkers ( markerOptionsMaker ); // Fit the map to the route. innerMap . fitBounds ( result . routes [ 0 ]. viewport ); innerMap . setHeading ( 270 ); // Create polylines and add them to the map. mapPolylines = result . routes [ 0 ]. createPolylines (); mapPolylines . forEach (( polyline ) = > polyline . setMap ( innerMap )); } initMap ();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ # map { height : 100 % ; } /* * Optional: Makes the sample page fill the window. */ html , body { height : 100 % ; margin : 0 ; padding : 0 ; }
HTML
<html> <head> <title>Get directions</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <gmp-map center="37.447646, -122.113878" zoom="12"></gmp-map> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta"});</script> </body> </html>
Try Sample
Add default markers
To add markers using the default style, call createWaypointAdvancedMarkers()
passing a marker option to specify the current map, as shown in the following code snippet.
// Create markers using default style. const markers = await result . routes [ 0 ]. createWaypointAdvancedMarkers ({ map : innerMap });
Add markers with a custom style
To add markers using a custom style, call createWaypointAdvancedMarkers()
passing marker options that include custom style properties. When you apply styles like this,
all markers are styled the same way. The following code snippet shows how to create markers
with a custom style.
// Create markers with a custom style. const markerOptions = { map : innerMap , content : new PinElement ({ scale : 1.5 , background : '#8C0DD1' , borderColor : '#6D0AA5' , glyphColor : '#6D0AA5' , }). element } const markers = await result . routes [ 0 ]. createWaypointAdvancedMarkers ( markerOptions );
Apply a custom style to individual markers
To apply a custom style to individual markers, pass a function to createWaypointAdvancedMarkers()
to set marker style options based on either marker index or RouteLeg
properties.
The following code snippet shows a function to create markers and style them based on
marker index:
TypeScript
// Alter style based on marker index. function markerOptionsMaker ( defaultOptions : google.maps.marker.AdvancedMarkerElementOptions , //@ts-ignore waypointMarkerDetails : google.maps.routes.WaypointMarkerDetails ) { const { index , totalMarkers , leg } = waypointMarkerDetails ; // Style the origin waypoint. if ( index === 0 ) { return { ... defaultOptions , map : innerMap , content : new PinElement ({ glyphText : ( index + 1 ). toString (), glyphColor : 'white' , background : 'green' , borderColor : 'green' , }). element } } // Style all intermediate waypoints. if ( ! ( index === 0 || index === totalMarkers - 1 )) { return { ... defaultOptions , map : innerMap , content : new PinElement ({ glyphText : ( index + 1 ). toString (), glyphColor : 'white' , background : 'blue' , borderColor : 'blue' , }). element } } // Style the destination waypoint. if ( index === totalMarkers - 1 ) { return { ... defaultOptions , map : innerMap , content : new PinElement ({ glyphText : ( index + 1 ). toString (), glyphColor : 'white' , background : 'red' , borderColor : 'red' , }). element } } return { ... defaultOptions , map : innerMap }; } const markers = await result . routes [ 0 ]. createWaypointAdvancedMarkers ( markerOptionsMaker );
JavaScript
// Alter style based on marker index. function markerOptionsMaker ( defaultOptions , //@ts-ignore waypointMarkerDetails ) { const { index , totalMarkers , leg } = waypointMarkerDetails ; // Style the origin waypoint. if ( index === 0 ) { return { ... defaultOptions , map : innerMap , content : new PinElement ({ glyphText : ( index + 1 ). toString (), glyphColor : 'white' , background : 'green' , borderColor : 'green' , }). element }; } // Style all intermediate waypoints. if ( ! ( index === 0 || index === totalMarkers - 1 )) { return { ... defaultOptions , map : innerMap , content : new PinElement ({ glyphText : ( index + 1 ). toString (), glyphColor : 'white' , background : 'blue' , borderColor : 'blue' , }). element }; } // Style the destination waypoint. if ( index === totalMarkers - 1 ) { return { ... defaultOptions , map : innerMap , content : new PinElement ({ glyphText : ( index + 1 ). toString (), glyphColor : 'white' , background : 'red' , borderColor : 'red' , }). element }; } return { ... defaultOptions , map : innerMap }; } const markers = await result . routes [ 0 ]. createWaypointAdvancedMarkers ( markerOptionsMaker );
See the complete code sample
TypeScript
let mapPolylines : google.maps.Polyline [] = []; const mapElement = document . querySelector ( 'gmp-map' ) as google . maps . MapElement ; let innerMap ; // Initialize and add the map. async function initMap () { // Request the needed libraries. await google . maps . importLibrary ( 'maps' ); innerMap = await mapElement . innerMap ; innerMap . setOptions ({ mapTypeControl : false , mapId : 'DEMO_MAP_ID' , }); // Call the function after the map is loaded. google . maps . event . addListenerOnce ( innerMap , 'idle' , () = > { getDirections (); }); } async function getDirections () { //@ts-ignore // Request the needed libraries. const [{ Route }, { PinElement }] = await Promise . all ([ google . maps . importLibrary ( 'routes' ), google . maps . importLibrary ( 'marker' ), ]); // Define routes request with an intermediate stop. const request = { origin : 'Parking lot, Christmas Tree Point Rd, San Francisco, CA 94131' , destination : '100 Spinnaker Dr, Sausalito, CA 94965' , // We're having a yummy lunch! intermediates : [{ location : '300 Finley Rd San Francisco, CA 94129' }], // But first, we golf! travelMode : 'DRIVING' , fields : [ 'path' , 'legs' , 'viewport' ], }; // Call computeRoutes to get the directions. const result = await Route . computeRoutes ( request ); if ( ! result . routes || result . routes . length === 0 ) { console . warn ( "No routes found" ); return ; } // Alter style based on marker index. function markerOptionsMaker ( defaultOptions : google.maps.marker.AdvancedMarkerElementOptions , //@ts-ignore waypointMarkerDetails : google.maps.routes.WaypointMarkerDetails ) { const { index , totalMarkers , leg } = waypointMarkerDetails ; // Style the origin waypoint. if ( index === 0 ) { return { ... defaultOptions , map : innerMap , content : new PinElement ({ glyphText : ( index + 1 ). toString (), glyphColor : 'white' , background : 'green' , borderColor : 'green' , }). element } } // Style all intermediate waypoints. if ( ! ( index === 0 || index === totalMarkers - 1 )) { return { ... defaultOptions , map : innerMap , content : new PinElement ({ glyphText : ( index + 1 ). toString (), glyphColor : 'white' , background : 'blue' , borderColor : 'blue' , }). element } } // Style the destination waypoint. if ( index === totalMarkers - 1 ) { return { ... defaultOptions , map : innerMap , content : new PinElement ({ glyphText : ( index + 1 ). toString (), glyphColor : 'white' , background : 'red' , borderColor : 'red' , }). element } } return { ... defaultOptions , map : innerMap }; } const markers = await result . routes [ 0 ]. createWaypointAdvancedMarkers ( markerOptionsMaker ); // Fit the map to the route. innerMap . fitBounds ( result . routes [ 0 ]. viewport ); innerMap . setHeading ( 270 ); // Create polylines and add them to the map. mapPolylines = result . routes [ 0 ]. createPolylines (); mapPolylines . forEach (( polyline ) = > polyline . setMap ( innerMap )); } initMap ();
JavaScript
let mapPolylines = []; const mapElement = document . querySelector ( 'gmp-map' ); let innerMap ; // Initialize and add the map. async function initMap () { // Request the needed libraries. await google . maps . importLibrary ( 'maps' ); innerMap = await mapElement . innerMap ; innerMap . setOptions ({ mapTypeControl : false , mapId : 'DEMO_MAP_ID' , }); // Call the function after the map is loaded. google . maps . event . addListenerOnce ( innerMap , 'idle' , () = > { getDirections (); }); } async function getDirections () { //@ts-ignore // Request the needed libraries. const [{ Route }, { PinElement }] = await Promise . all ([ google . maps . importLibrary ( 'routes' ), google . maps . importLibrary ( 'marker' ), ]); // Define routes request with an intermediate stop. const request = { origin : 'Parking lot, Christmas Tree Point Rd, San Francisco, CA 94131' , destination : '100 Spinnaker Dr, Sausalito, CA 94965' , // We're having a yummy lunch! intermediates : [{ location : '300 Finley Rd San Francisco, CA 94129' }], // But first, we golf! travelMode : 'DRIVING' , fields : [ 'path' , 'legs' , 'viewport' ], }; // Call computeRoutes to get the directions. const result = await Route . computeRoutes ( request ); if ( ! result . routes || result . routes . length === 0 ) { console . warn ( "No routes found" ); return ; } // Alter style based on marker index. function markerOptionsMaker ( defaultOptions , //@ts-ignore waypointMarkerDetails ) { const { index , totalMarkers , leg } = waypointMarkerDetails ; // Style the origin waypoint. if ( index === 0 ) { return { ... defaultOptions , map : innerMap , content : new PinElement ({ glyphText : ( index + 1 ). toString (), glyphColor : 'white' , background : 'green' , borderColor : 'green' , }). element }; } // Style all intermediate waypoints. if ( ! ( index === 0 || index === totalMarkers - 1 )) { return { ... defaultOptions , map : innerMap , content : new PinElement ({ glyphText : ( index + 1 ). toString (), glyphColor : 'white' , background : 'blue' , borderColor : 'blue' , }). element }; } // Style the destination waypoint. if ( index === totalMarkers - 1 ) { return { ... defaultOptions , map : innerMap , content : new PinElement ({ glyphText : ( index + 1 ). toString (), glyphColor : 'white' , background : 'red' , borderColor : 'red' , }). element }; } return { ... defaultOptions , map : innerMap }; } const markers = await result . routes [ 0 ]. createWaypointAdvancedMarkers ( markerOptionsMaker ); // Fit the map to the route. innerMap . fitBounds ( result . routes [ 0 ]. viewport ); innerMap . setHeading ( 270 ); // Create polylines and add them to the map. mapPolylines = result . routes [ 0 ]. createPolylines (); mapPolylines . forEach (( polyline ) = > polyline . setMap ( innerMap )); } initMap ();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ # map { height : 100 % ; } /* * Optional: Makes the sample page fill the window. */ html , body { height : 100 % ; margin : 0 ; padding : 0 ; }
HTML
<html> <head> <title>Get directions</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <gmp-map center="37.447646, -122.113878" zoom="12"></gmp-map> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta"});</script> </body> </html>
