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.
// 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() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 14, center: {lat: 34.366, lng: -89.519} }); var 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', function(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) { var 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 var encodeString = google.maps.geometry.encoding.encodePath(path); if (encodeString) { document.getElementById('encoded-polyline').value = encodeString; } }
<div id="map"></div> <div id="right-panel"> <div>Encoding:</div> <textarea id="encoded-polyline"></textarea> </div>
#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%; }
<!-- Replace the value of the key parameter with your own API key. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initMap" async defer></script>
Try it yourself
You can experiment with this code in JSFiddle by clicking the <>
icon in the
top-right corner of the code window.
<!DOCTYPE html>
<html>
<head>
<title>Encoding Methods</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#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>
</head>
<body>
<div id="map"></div>
<div id="right-panel">
<div>Encoding:</div>
<textarea id="encoded-polyline"></textarea>
</div>
<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() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: {lat: 34.366, lng: -89.519}
});
var 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', function(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) {
var 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
var encodeString = google.maps.geometry.encoding.encodePath(path);
if (encodeString) {
document.getElementById('encoded-polyline').value = encodeString;
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry&callback=initMap"
async defer></script>
</body>
</html>