dist/samples/geometry-encodings/inline.html

<!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>