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.

Encoding Methods

Spark icon

Page Summary

This example shows how to encode a polyline path using the Google Maps Geometry library.
Users can click on the map to create a polyline, and the encoded path will be displayed.
The encoded path is a compact representation of the polyline's coordinates.
Code samples are provided in TypeScript and JavaScript, alongside CSS and HTML for a complete implementation.

This example demonstrates path encoding using the Geometry library. Click the map to create a polyline. The encoding of this polyline then appears in the text box.

Read the documentation.

[フレーム]

TypeScript

// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">
functioninitMap():void{
constmap=newgoogle.maps.Map(
document.getElementById("map")asHTMLElement,
{
zoom:14,
center:{lat:34.366,lng:-89.519},
}
);
constpoly=newgoogle.maps.Polyline({
strokeColor:"#000000",
strokeOpacity:1,
strokeWeight:3,
map:map,
});
// Add a listener for the click event
google.maps.event.addListener(map,"click",(event)=>{
addLatLngToPoly(event.latLng,poly);
});
}
/**
 * Handles click events on a map, and adds a new point to the Polyline.
 * Updates the encoding text area with the path's encoded values.
 */
functionaddLatLngToPoly(
latLng:google.maps.LatLng,
poly:google.maps.Polyline
){
constpath=poly.getPath();
// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear
path.push(latLng);
// Update the text field to display the polyline encodings
constencodeString=google.maps.geometry.encoding.encodePath(path);
if(encodeString){
(document.getElementById("encoded-polyline")asHTMLInputElement).value=
encodeString;
}
}
declareglobal{
interfaceWindow{
initMap:()=>void;
}
}
window.initMap=initMap;index.ts

JavaScript

// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">
functioninitMap(){
constmap=newgoogle.maps.Map(document.getElementById("map"),{
zoom:14,
center:{lat:34.366,lng:-89.519},
});
constpoly=newgoogle.maps.Polyline({
strokeColor:"#000000",
strokeOpacity:1,
strokeWeight:3,
map:map,
});
// Add a listener for the click event
google.maps.event.addListener(map,"click",(event)=>{
addLatLngToPoly(event.latLng,poly);
});
}
/**
 * Handles click events on a map, and adds a new point to the Polyline.
 * Updates the encoding text area with the path's encoded values.
 */
functionaddLatLngToPoly(latLng,poly){
constpath=poly.getPath();
// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear
path.push(latLng);
// Update the text field to display the polyline encodings
constencodeString=google.maps.geometry.encoding.encodePath(path);
if(encodeString){
document.getElementById("encoded-polyline").value=encodeString;
}
}
window.initMap=initMap;index.js

CSS

/* Optional: Makes the sample page fill the window. */
html,
body{
height:100%;
margin:0;
padding:0;
}
#container{
height:100%;
display:flex;
}
#sidebar{
flex-basis:15rem;
flex-grow:1;
padding:1rem;
max-width:30rem;
height:100%;
box-sizing:border-box;
overflow:auto;
}
#map{
flex-basis:0;
flex-grow:4;
height:100%;
}
#encoded-polyline{
height:100px;
width:100%;
}
style.css

HTML

<html>
 <head>
 <title>Encoding Methods</title>
 <link rel="stylesheet" type="text/css" href="./style.css" />
 <script type="module" src="./index.js"></script>
 </head>
 <body>
 <div id="container">
 <div id="map"></div>
 <div id="sidebar">
 <div>Encoding:</div>
 <textarea id="encoded-polyline"></textarea>
 </div>
 </div>
 <!-- 
 The `defer` attribute causes the script to execute after the full HTML
 document has been parsed. For non-blocking uses, avoiding race conditions,
 and consistent behavior across browsers, consider loading using Promises. See
 https://developers.google.com/maps/documentation/javascript/load-maps-js-api
 for more information.
 -->
 <script
 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=geometry&v=weekly"
 defer
 ></script>
 </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.

gitclone-bsample-geometry-encodingshttps://github.com/googlemaps/js-samples.git
cdjs-samples
npmi
npmstart

Other samples can be tried by switching to any branch beginning with sample-SAMPLE_NAME.

gitcheckoutsample-SAMPLE_NAME
npmi
npmstart