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.

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>
    <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>
      "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() {
        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>
  </body>
</html>
"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=AIzaSyCb1xprYSpXd0q_yDsJ1W2UGhfl9_YGKU0&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> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCb1xprYSpXd0q_yDsJ1W2UGhfl9_YGKU0&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>