Page Summary
-
This example demonstrates drawing polylines on a map by clicking to add points.
-
Polylines are created using the
google.maps.Polylineclass and become visible after two or more points are added. -
Each click on the map adds a point to the polyline and places a marker indicating the point's order.
-
The sample code is provided in both TypeScript and JavaScript, along with HTML and CSS for styling and structure.
-
You can interact with the sample using provided links to JSFiddle or Google Cloud Shell, or clone and run it locally with Git and Node.js.
Click two or more points on the map to draw polylines.
Read the documentation .
TypeScript
/** * This example creates an interactive map which constructs a polyline based on * user clicks. Note that the polyline only appears once its path property * contains two LatLng coordinates. */ let poly : google.maps.Polyline ; const mapElement = document . querySelector ( 'gmp-map' ) ! ; let innerMap : google.maps.Map ; async function init () { // Import the needed libraries. const [{ Polyline }, { AdvancedMarkerElement }] = await Promise . all ([ google . maps . importLibrary ( 'maps' ), google . maps . importLibrary ( 'marker' ), ]); innerMap = mapElement . innerMap ; poly = new Polyline ({ strokeColor : '#000000' , strokeOpacity : 1.0 , strokeWeight : 3 , }); poly . setMap ( innerMap ); // Handles click events on a map, and adds a new point to the Polyline. innerMap . addListener ( 'click' , ( event : google.maps.MapMouseEvent ) = > { const latLng = event . latLng ; if ( ! latLng ) return ; const path = poly . getPath (); // Because path is an MVCArray, we can simply append a new coordinate // and it will automatically appear. path . push ( latLng ); // Add a new marker at the new plotted point on the polyline. new AdvancedMarkerElement ({ position : latLng , title : '#' + path . getLength (), map : innerMap , }); }); } void init ();
JavaScript
/** * This example creates an interactive map which constructs a polyline based on * user clicks. Note that the polyline only appears once its path property * contains two LatLng coordinates. */ let poly ; const mapElement = document . querySelector ( 'gmp-map' ); let innerMap ; async function init () { // Import the needed libraries. const [{ Polyline }, { AdvancedMarkerElement }] = await Promise . all ([ google . maps . importLibrary ( 'maps' ), google . maps . importLibrary ( 'marker' ), ]); innerMap = mapElement . innerMap ; poly = new Polyline ({ strokeColor : '#000000' , strokeOpacity : 1.0 , strokeWeight : 3 , }); poly . setMap ( innerMap ); // Handles click events on a map, and adds a new point to the Polyline. innerMap . addListener ( 'click' , ( event ) = > { const latLng = event . latLng ; if ( ! latLng ) return ; const path = poly . getPath (); // Because path is an MVCArray, we can simply append a new coordinate // and it will automatically appear. path . push ( latLng ); // Add a new marker at the new plotted point on the polyline. new AdvancedMarkerElement ({ position : latLng , title : '#' + path . getLength (), map : innerMap , }); }); } void init ();
CSS
/* * Optional: Makes the sample page fill the window. */ html , body { height : 100 % ; margin : 0 ; padding : 0 ; }
HTML
<html> <head> <title>Complex Polylines</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> <script> // prettier-ignore (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" }); </script> </head> <body> <gmp-map center="41.879, -87.624" zoom="7" map-id="DEMO_MAP_ID"></gmp-map> </body> </html>
Try Sample
Clone Sample
Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
git clone https : //github.com/googlemaps-samples/js-api-samples.gitcd samples / polyline - complexnpm inpm start
