It's the 15th anniversary of Google Maps Platform - Check out the latest news and announcements

Encoding Methods

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.

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() {
  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;
  }
}

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>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=geometry&v=weekly"
      defer
    ></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./app.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <div id="right-panel">
      <div>Encoding:</div>
      <textarea id="encoded-polyline"></textarea>
    </div>
  </body>
</html>

All

<!DOCTYPE html>
<html>
  <head>
    <title>Encoding Methods</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=geometry&v=weekly"
      defer
    ></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>
      (function(exports) {
        "use strict";

        // 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;
          }
        }

        exports.addLatLngToPoly = addLatLngToPoly;
        exports.initMap = initMap;
      })((this.window = this.window || {}));
    </script>
  </head>
  <body>
    <div id="map"></div>
    <div id="right-panel">
      <div>Encoding:</div>
      <textarea id="encoded-polyline"></textarea>
    </div>
  </body>
</html>
(function(exports) { "use strict"; // 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; } } exports.addLatLngToPoly = addLatLngToPoly; exports.initMap = initMap; })((this.window = this.window || {}));
#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> <script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&libraries=geometry&v=weekly" defer ></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> </body> </html>