Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share yourinput on your UI Kit experience.
Work with markers
Create markers for route waypoints by callingcreateWaypointAdvancedMarkers(). 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 correspondingRouteLeg.
See the complete example source code
The following code sample shows how to create custom markers for route waypoints.
TypeScript
letmapPolylines:google.maps.Polyline[]=[];constmapElement=document.querySelector('gmp-map')asgoogle.maps.MapElement;letinnerMap;// Initialize and add the map.asyncfunctioninitMap(){// Request the needed libraries.awaitgoogle.maps.importLibrary('maps');innerMap=awaitmapElement.innerMap;innerMap.setOptions({mapTypeControl:false,mapId:'DEMO_MAP_ID',});// Call the function after the map is loaded.google.maps.event.addListenerOnce(innerMap,'idle',()=>{getDirections();});}asyncfunctiongetDirections(){//@ts-ignore// Request the needed libraries.const[{Route},{PinElement}]=awaitPromise.all([google.maps.importLibrary('routes'),google.maps.importLibrary('marker'),]);// Define routes request with an intermediate stop.constrequest={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.constresult=awaitRoute.computeRoutes(request);if(!result.routes||result.routes.length===0){console.warn("No routes found");return;}// Alter style based on marker index.functionmarkerOptionsMaker(defaultOptions:google.maps.marker.AdvancedMarkerElementOptions,//@ts-ignorewaypointMarkerDetails:google.maps.routes.WaypointMarkerDetails){const{index,totalMarkers,leg}=waypointMarkerDetails;// Style the origin waypoint.if(index===0){return{...defaultOptions,map:innerMap,content:newPinElement({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:newPinElement({glyphText:(index+1).toString(),glyphColor:'white',background:'blue',borderColor:'blue',}).element}}// Style the destination waypoint.if(index===totalMarkers-1){return{...defaultOptions,map:innerMap,content:newPinElement({glyphText:(index+1).toString(),glyphColor:'white',background:'red',borderColor:'red',}).element}}return{...defaultOptions,map:innerMap};}constmarkers=awaitresult.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
letmapPolylines=[];constmapElement=document.querySelector('gmp-map');letinnerMap;// Initialize and add the map.asyncfunctioninitMap(){// Request the needed libraries.awaitgoogle.maps.importLibrary('maps');innerMap=awaitmapElement.innerMap;innerMap.setOptions({mapTypeControl:false,mapId:'DEMO_MAP_ID',});// Call the function after the map is loaded.google.maps.event.addListenerOnce(innerMap,'idle',()=>{getDirections();});}asyncfunctiongetDirections(){//@ts-ignore// Request the needed libraries.const[{Route},{PinElement}]=awaitPromise.all([google.maps.importLibrary('routes'),google.maps.importLibrary('marker'),]);// Define routes request with an intermediate stop.constrequest={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.constresult=awaitRoute.computeRoutes(request);if(!result.routes||result.routes.length===0){console.warn("No routes found");return;}// Alter style based on marker index.functionmarkerOptionsMaker(defaultOptions,//@ts-ignorewaypointMarkerDetails){const{index,totalMarkers,leg}=waypointMarkerDetails;// Style the origin waypoint.if(index===0){return{...defaultOptions,map:innerMap,content:newPinElement({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:newPinElement({glyphText:(index+1).toString(),glyphColor:'white',background:'blue',borderColor:'blue',}).element};}// Style the destination waypoint.if(index===totalMarkers-1){return{...defaultOptions,map:innerMap,content:newPinElement({glyphText:(index+1).toString(),glyphColor:'white',background:'red',borderColor:'red',}).element};}return{...defaultOptions,map:innerMap};}constmarkers=awaitresult.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, callcreateWaypointAdvancedMarkers() passing a marker option to specify the current map, as shown in the following code snippet.
// Create markers using default style.constmarkers=awaitresult.routes[0].createWaypointAdvancedMarkers({map:innerMap});
legs field must be requested inComputeRoutesRequest.fields in order for intermediate waypoints to be included.Add markers with a custom style
To add markers using a custom style, callcreateWaypointAdvancedMarkers() 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.constmarkerOptions={map:innerMap,content:newPinElement({scale:1.5,background:'#8C0DD1',borderColor:'#6D0AA5',glyphColor:'#6D0AA5',}).element}constmarkers=awaitresult.routes[0].createWaypointAdvancedMarkers(markerOptions);
Apply a custom style to individual markers
To apply a custom style to individual markers, pass a function tocreateWaypointAdvancedMarkers() to set marker style options based on either marker index orRouteLeg 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.functionmarkerOptionsMaker(defaultOptions:google.maps.marker.AdvancedMarkerElementOptions,//@ts-ignorewaypointMarkerDetails:google.maps.routes.WaypointMarkerDetails){const{index,totalMarkers,leg}=waypointMarkerDetails;// Style the origin waypoint.if(index===0){return{...defaultOptions,map:innerMap,content:newPinElement({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:newPinElement({glyphText:(index+1).toString(),glyphColor:'white',background:'blue',borderColor:'blue',}).element}}// Style the destination waypoint.if(index===totalMarkers-1){return{...defaultOptions,map:innerMap,content:newPinElement({glyphText:(index+1).toString(),glyphColor:'white',background:'red',borderColor:'red',}).element}}return{...defaultOptions,map:innerMap};}constmarkers=awaitresult.routes[0].createWaypointAdvancedMarkers(markerOptionsMaker);
JavaScript
// Alter style based on marker index.functionmarkerOptionsMaker(defaultOptions,//@ts-ignorewaypointMarkerDetails){const{index,totalMarkers,leg}=waypointMarkerDetails;// Style the origin waypoint.if(index===0){return{...defaultOptions,map:innerMap,content:newPinElement({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:newPinElement({glyphText:(index+1).toString(),glyphColor:'white',background:'blue',borderColor:'blue',}).element};}// Style the destination waypoint.if(index===totalMarkers-1){return{...defaultOptions,map:innerMap,content:newPinElement({glyphText:(index+1).toString(),glyphColor:'white',background:'red',borderColor:'red',}).element};}return{...defaultOptions,map:innerMap};}constmarkers=awaitresult.routes[0].createWaypointAdvancedMarkers(markerOptionsMaker);
See the complete code sample
TypeScript
letmapPolylines:google.maps.Polyline[]=[];constmapElement=document.querySelector('gmp-map')asgoogle.maps.MapElement;letinnerMap;// Initialize and add the map.asyncfunctioninitMap(){// Request the needed libraries.awaitgoogle.maps.importLibrary('maps');innerMap=awaitmapElement.innerMap;innerMap.setOptions({mapTypeControl:false,mapId:'DEMO_MAP_ID',});// Call the function after the map is loaded.google.maps.event.addListenerOnce(innerMap,'idle',()=>{getDirections();});}asyncfunctiongetDirections(){//@ts-ignore// Request the needed libraries.const[{Route},{PinElement}]=awaitPromise.all([google.maps.importLibrary('routes'),google.maps.importLibrary('marker'),]);// Define routes request with an intermediate stop.constrequest={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.constresult=awaitRoute.computeRoutes(request);if(!result.routes||result.routes.length===0){console.warn("No routes found");return;}// Alter style based on marker index.functionmarkerOptionsMaker(defaultOptions:google.maps.marker.AdvancedMarkerElementOptions,//@ts-ignorewaypointMarkerDetails:google.maps.routes.WaypointMarkerDetails){const{index,totalMarkers,leg}=waypointMarkerDetails;// Style the origin waypoint.if(index===0){return{...defaultOptions,map:innerMap,content:newPinElement({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:newPinElement({glyphText:(index+1).toString(),glyphColor:'white',background:'blue',borderColor:'blue',}).element}}// Style the destination waypoint.if(index===totalMarkers-1){return{...defaultOptions,map:innerMap,content:newPinElement({glyphText:(index+1).toString(),glyphColor:'white',background:'red',borderColor:'red',}).element}}return{...defaultOptions,map:innerMap};}constmarkers=awaitresult.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
letmapPolylines=[];constmapElement=document.querySelector('gmp-map');letinnerMap;// Initialize and add the map.asyncfunctioninitMap(){// Request the needed libraries.awaitgoogle.maps.importLibrary('maps');innerMap=awaitmapElement.innerMap;innerMap.setOptions({mapTypeControl:false,mapId:'DEMO_MAP_ID',});// Call the function after the map is loaded.google.maps.event.addListenerOnce(innerMap,'idle',()=>{getDirections();});}asyncfunctiongetDirections(){//@ts-ignore// Request the needed libraries.const[{Route},{PinElement}]=awaitPromise.all([google.maps.importLibrary('routes'),google.maps.importLibrary('marker'),]);// Define routes request with an intermediate stop.constrequest={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.constresult=awaitRoute.computeRoutes(request);if(!result.routes||result.routes.length===0){console.warn("No routes found");return;}// Alter style based on marker index.functionmarkerOptionsMaker(defaultOptions,//@ts-ignorewaypointMarkerDetails){const{index,totalMarkers,leg}=waypointMarkerDetails;// Style the origin waypoint.if(index===0){return{...defaultOptions,map:innerMap,content:newPinElement({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:newPinElement({glyphText:(index+1).toString(),glyphColor:'white',background:'blue',borderColor:'blue',}).element};}// Style the destination waypoint.if(index===totalMarkers-1){return{...defaultOptions,map:innerMap,content:newPinElement({glyphText:(index+1).toString(),glyphColor:'white',background:'red',borderColor:'red',}).element};}return{...defaultOptions,map:innerMap};}constmarkers=awaitresult.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
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-31 UTC.