Get a Maps Demo Key: Try out select Maps JavaScript API and Places UI Kit features at no cost with a Maps Demo Key—no billing information required.

Simple Polylines

Spark icon

Page Summary

This example demonstrates how to create a simple polyline on a map using the Google Maps JavaScript API.
The polyline is visualized as a 2-pixel-wide red line, representing the path of a historical trans-Pacific flight.
The code utilizes google.maps.Polyline to define the polyline's properties such as path, color, and width.
Provided code snippets include TypeScript, JavaScript, CSS, and HTML for a comprehensive implementation.

This example creates a two-pixel-wide red polyline that shows the path of the first trans-Pacific flight between Oakland, CA, and Brisbane, Australia.

Read the documentation.

[フレーム]

TypeScript

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
constmapElement=document.querySelector('gmp-map')!;
letinnerMap:google.maps.Map;
asyncfunctioninit(){
const{Polyline}=awaitgoogle.maps.importLibrary('maps');
innerMap=mapElement.innerMap;
constflightPlanCoordinates=[
{lat:37.772,lng:-122.214},
{lat:21.291,lng:-157.821},
{lat:-18.142,lng:178.431},
{lat:-27.467,lng:153.027},
];
constflightPath=newPolyline({
path:flightPlanCoordinates,
geodesic:true,
strokeColor:'#FF0000',
strokeOpacity:1.0,
strokeWeight:2,
});
flightPath.setMap(innerMap);
}
voidinit();index.ts

JavaScript

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
constmapElement=document.querySelector('gmp-map');
letinnerMap;
asyncfunctioninit(){
const{Polyline}=awaitgoogle.maps.importLibrary('maps');
innerMap=mapElement.innerMap;
constflightPlanCoordinates=[
{lat:37.772,lng:-122.214},
{lat:21.291,lng:-157.821},
{lat:-18.142,lng:178.431},
{lat:-27.467,lng:153.027},
];
constflightPath=newPolyline({
path:flightPlanCoordinates,
geodesic:true,
strokeColor:'#FF0000',
strokeOpacity:1.0,
strokeWeight:2,
});
flightPath.setMap(innerMap);
}
voidinit();index.js

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body{
height:100%;
margin:0;
padding:0;
}
style.css

HTML

<html>
 <head>
 <title>Simple 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: "GOOGLE_MAPS_API_KEY"
 });
 </script>
 </head>
 <body>
 <gmp-map center="0, -180" zoom="3" map-type-id="terrain"> </gmp-map>
 </body>
</html>index.html

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.

gitclonehttps://github.com/googlemaps-samples/js-api-samples.git
cdsamples/polyline-simple
npmi
npmstart