Shapes and lines

Select platform: Android iOS

You can add various shapes to your map. A shape is an object on the map, tied to a LatLng coordinate system. The Photorealistic 3D Maps in Maps JavaScript API supports the addition of lines and polygons to the map.

Polylines

To draw a line on your map, use a polyline. The Polyline3DElement class defines a linear overlay of connected line segments on the map. A Polyline object consists of an array of LatLng locations, and creates a series of line segments that connect those locations in an ordered sequence.

Add a polyline

The Polyline constructor takes a set of Polyline3DElementOptions specifying the LatLng coordinates of the line and a set of styles to adjust the polyline's visual behavior.

Polyline objects are drawn as a series of straight segments on the map. You can specify custom colors, widths, opacities, heights, and geometric styling options for the stroke of the line within the Polyline3DElementOptions when constructing your line, or you can change those properties after construction. A polyline supports the following stroke styles:

  • outerColor: A hexadecimal HTML color of the format "#FFFFFF".
  • outerWidth: A numerical value between 0.0 and 1.0, which is interpreted as a percentage of the strokeWidth.
  • strokeColor: A hexadecimal HTML color of the format "#FFFFFF".
  • strokeWidth: The width of the line in pixels.
  • geodesic: whether the edges of the polyon follows the curvature of the earth, or be drawn as straight lines.
  • altitudeMode: How altitude components in the coordinates are interpreted
  • drawsOccludedSegments: A boolean indicating whether parts of the polygon obscured by objects (such as buildings) should be drawn.
  • extruded: A boolean indicating if the polyline should be connected to the ground.
async function init() {
    const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

    const map = new Map3DElement({
      center: { lat: 37.772675996068915, lng: -122.3978382542777, altitude: 2500 },
      tilt: 45,
      heading: 5.9743656,
      mode: MapMode.HYBRID,
    });

    const { Polyline3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

    const polylineOptions = {
      strokeColor: "#EA433580",
      strokeWidth: 10,
      altitudeMode: "ABSOLUTE",
      extruded: true,
      drawsOccludedSegments: true,
    }
    const polyline = new google.maps.maps3d.Polyline3DElement(polylineOptions)

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

    map.append(polyline)
    document.body.append(map);
}
init();

Interactive polylines

The following example changes the polyline's stroke color after registering a click event.

async function init() {
  const colors = ["red", "blue", "green", "yellow"];

  const { Map3DElement, MapMode, Polyline3DInteractiveElement } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: {lat: 0, lng: -180, altitude: 15000000},
    mode: MapMode.HYBRID,
  });

  document.body.append(map);

  const polyline = new Polyline3DInteractiveElement({
    coordinates: [
      { lat: 37.772, lng: -122.214 },
      { lat: 21.291, lng: -157.821 },
      { lat: -18.142, lng: 178.431 },
      { lat: -27.467, lng: 153.027 }
    ],
    strokeColor: 'red',
    strokeWidth: 10,
  });

  polyline.addEventListener('gmp-click', (event) => {
    polyline.strokeColor = colors[~~(Math.random() * colors.length)];
  });

  map.append(polyline);
}

init();

Polygons

A polygon represents an area enclosed by a closed path (or loop), which is defined by a series of coordinates. Polygon objects are similar to Polyline objects in that they consist of a series of coordinates in an ordered sequence. Polygons are drawn with a stroke and a fill. You can define custom colors and widths for the edge of the polygon (the stroke) and custom colors and opacities for the enclosed area (the fill). Colors should be indicated in hexadecimal HTML format. Color names are not supported.

Polygon objects can describe complex shapes, including:

  • Multiple non-contiguous areas defined by a single polygon.
  • Areas with holes in them.
  • Intersections of one or more areas.

To define a complex shape, you use a polygon with multiple paths.

Add a polygon

Because a polygonal area may include several separate paths, the Polygon object's paths property specifies an array of arrays, each of type MVCArray. Each array defines a separate sequence of ordered LatLng coordinates.

For basic polygons consisting of only one path, you can construct a Polygon using a single array of LatLng coordinates. The Photorealistic 3D Maps in Maps JavaScript API will convert the array into an array of arrays upon construction when storing it within the outerCoordinates property.

async function init() {
    const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

    const map3DElement = new Map3DElement({
        center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
        range: 1000,
        tilt: 60,
        mode: MapMode.SATELLITE,
    });

    const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

    const polygonOptions = {
        strokeColor: "#EA433580",
        strokeWidth: 4,
        fillColor: "#0000FF80",
        altitudeMode: "ABSOLUTE",
        extruded: true,
        drawsOccludedSegments: true,
    }

    const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);

    towerPolygon.outerCoordinates = [
        { lat: 43.6427196, lng: -79.3876802, altitude: 600 },
        { lat: 43.6421742, lng: -79.3869184, altitude: 600 },
        { lat: 43.643001, lng: -79.3866475, altitude: 600 }
    ];

    map3DElement.append(towerPolygon);
    document.body.append(map3DElement);
}
init();

Interactive polygons

The following example changes the polygon's stroke color after registering a click event.

async function init() {
  const colors = ["red", "blue", "green", "yellow"];
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map3DElement = new Map3DElement({
      center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
      range: 1000,
      tilt: 60,
      mode: MapMode.SATELLITE,
  });

  const { Polygon3DInteractiveElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

  const polygonOptions = {
      strokeColor: "#EA433580",
      strokeWidth: 4,
      fillColor: "#0000FF80",
      altitudeMode: "ABSOLUTE",
      extruded: true,
      drawsOccludedSegments: true,
  }

  const towerPolygon = new google.maps.maps3d.Polygon3DInteractiveElement(polygonOptions);

  towerPolygon.outerCoordinates = [
      { lat: 43.6427196, lng: -79.3876802, altitude: 600 },
      { lat: 43.6421742, lng: -79.3869184, altitude: 600 },
      { lat: 43.643001, lng: -79.3866475, altitude: 600 }
  ];

    towerPolygon.addEventListener('gmp-click', (event) => {
      towerPolygon.strokeColor = colors[~~(Math.random() * colors.length)];
    });

  map3DElement.append(towerPolygon);

  document.body.append(map3DElement);
}

init();