Polyline

This example creates a ten-pixel-wide blue polyline with a 75% opacity that shows an arbitrary route through downtown San Francisco.

<!DOCTYPE html>
<html>
  <head>
    <title>Photorealistic 3D Maps in Maps JavaScript Polyline Demo</title>
    <style>
      html,
      body {
        height:100%;
        margin: 0;
        padding: 0;
      }

      gmp-map-3d {
        height: 400px;
      }
    </style>
  </head>
  <body>
    <gmp-map-3d heading="25" range="2500" tilt="45" center="37.7905,-122.3989,165">
      <gmp-polyline-3d altitude-mode="relative-to-ground" stroke-color="rgba(25, 102, 210, 0.75)" stroke-width="10"></gmp-polyline-3d>
    </gmp-map-3d>

    <script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>

    <script>
      const polyline = document.querySelector('gmp-polyline-3d');

      customElements.whenDefined(polyline.localName).then(() => {
        polyline.coordinates = [
          {lat: 37.80515638571346, lng: -122.4032569467164},
          {lat: 37.80337073509504, lng: -122.4012878349353},
          {lat: 37.79925208843463, lng: -122.3976697250461},
          {lat: 37.7989102378512, lng: -122.3983408725656},
          {lat: 37.79887832784348, lng: -122.3987094864192},
          {lat: 37.79786443410338, lng: -122.4066878788802},
          {lat: 37.79549248916587, lng: -122.4032992702785},
          {lat: 37.78861484290265, lng: -122.4019489189814},
          {lat: 37.78618687561075, lng: -122.398969592545},
          {lat: 37.7892310309145, lng: -122.3951458683092},
          {lat: 37.7916358762409, lng: -122.3981969390652}
        ];
      });
    </script>
  </body>
</html>