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">
function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 14,
center: { lat: 34.366, lng: -89.519 },
}
);
const poly = new google.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.
*/
function addLatLngToPoly(
latLng: google.maps.LatLng,
poly: google.maps.Polyline
) {
const path = 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
const encodeString = google.maps.geometry.encoding.encodePath(path);
if (encodeString) {
(document.getElementById(
"encoded-polyline"
) as HTMLInputElement).value = encodeString;
}
}
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">
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 14,
center: { lat: 34.366, lng: -89.519 },
});
const poly = new google.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.
*/
function addLatLngToPoly(latLng, poly) {
const path = 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
const encodeString = google.maps.geometry.encoding.encodePath(path);
if (encodeString) {
document.getElementById("encoded-polyline").value = encodeString;
}
}
CSS
#right-panel {
font-family: "Roboto", "sans-serif";
line-height: 30px;
padding-left: 10px;
}
#right-panel select,
#right-panel input {
font-size: 15px;
}
#right-panel select {
width: 100%;
}
#right-panel i {
font-size: 12px;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
width: 50%;
float: left;
}
#right-panel {
width: 46%;
float: left;
}
#encoded-polyline {
height: 100px;
width: 100%;
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Encoding Methods</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<div id="right-panel">
<div>Encoding:</div>
<textarea id="encoded-polyline"></textarea>
</div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=geometry&v=weekly"
async
></script>
</body>
</html>
All
<!DOCTYPE html>
<html>
<head>
<title>Encoding Methods</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style type="text/css">
#right-panel {
font-family: "Roboto", "sans-serif";
line-height: 30px;
padding-left: 10px;
}
#right-panel select,
#right-panel input {
font-size: 15px;
}
#right-panel select {
width: 100%;
}
#right-panel i {
font-size: 12px;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
width: 50%;
float: left;
}
#right-panel {
width: 46%;
float: left;
}
#encoded-polyline {
height: 100px;
width: 100%;
}
</style>
<script>
// 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">
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 14,
center: { lat: 34.366, lng: -89.519 },
});
const poly = new google.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.
*/
function addLatLngToPoly(latLng, poly) {
const path = 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
const encodeString = google.maps.geometry.encoding.encodePath(path);
if (encodeString) {
document.getElementById("encoded-polyline").value = encodeString;
}
}
</script>
</head>
<body>
<div id="map"></div>
<div id="right-panel">
<div>Encoding:</div>
<textarea id="encoded-polyline"></textarea>
</div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=geometry&v=weekly"
async
></script>
</body>
</html>
// 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=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=geometry">
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 14,
center: { lat: 34.366, lng: -89.519 },
});
const poly = new google.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.
*/
function addLatLngToPoly(latLng, poly) {
const path = 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
const encodeString = google.maps.geometry.encoding.encodePath(path);
if (encodeString) {
document.getElementById("encoded-polyline").value = encodeString;
}
}
#right-panel {
font-family: "Roboto", "sans-serif";
line-height: 30px;
padding-left: 10px;
}
#right-panel select,
#right-panel input {
font-size: 15px;
}
#right-panel select {
width: 100%;
}
#right-panel i {
font-size: 12px;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
width: 50%;
float: left;
}
#right-panel {
width: 46%;
float: left;
}
#encoded-polyline {
height: 100px;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Encoding Methods</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<div id="right-panel">
<div>Encoding:</div>
<textarea id="encoded-polyline"></textarea>
</div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=geometry&v=weekly"
async
></script>
</body>
</html>