Select platform: [Android](https://developers.google.com/maps/documentation/maps-3d/android-sdk/add-polygons.md.txt "View this page for the Android platform docs.") [iOS](https://developers.google.com/maps/documentation/maps-3d/ios-sdk/add-polygons.md.txt "View this page for the iOS platform docs.")

<br />

You can add various shapes to your map. A shape is an object on the map, tied to
a `LatLng` coordinate system. The 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`](https://developers.google.com/maps/documentation/javascript/reference/3d-map.md.txt#Polyline3DElement)
class defines a linear overlay of connected line segments on the map. A
`Polyline3DElement` 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 `Polyline3DElement` 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 polygon 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.


```javascript
let map;
async function init() {
    const { Map3DElement, Polyline3DElement } =
        await google.maps.importLibrary('maps3d');

    map = new Map3DElement({
        center: { lat: 37.7927, lng: -122.402, altitude: 65.93 },
        range: 3362.87,
        tilt: 64.01,
        heading: 25.0,
        mode: 'SATELLITE',
    });

    document.body.append(map);

    const polyline = new Polyline3DElement({
        path: [
            { 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 },
        ],
        strokeColor: 'blue',
        outerColor: 'white',
        strokeWidth: 10,
        outerWidth: 0.4,
        altitudeMode: 'RELATIVE_TO_GROUND', // Place it on the ground (as it has no altitude it will just be at ground height).
        drawsOccludedSegments: true, // Show the line through the buildings or anything else that might get in the way.
    });

    map.append(polyline);
}

void init();
```

<br />

### Interactive polylines

The following example toggles the polyline's `drawsOccludedSegments` property
after registering a click event.


```javascript
let map;
async function init() {
    const { Map3DElement, Polyline3DInteractiveElement } =
        await google.maps.importLibrary('maps3d');

    map = new Map3DElement({
        center: { lat: 37.7927, lng: -122.402, altitude: 65.93 },
        range: 3362.87,
        tilt: 64.01,
        heading: 25.0,
        mode: 'SATELLITE',
    });

    document.body.append(map);

    const polyline = new Polyline3DInteractiveElement({
        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 },
        ],
        strokeColor: 'blue',
        outerColor: 'white',
        strokeWidth: 10,
        outerWidth: 0.4,
        altitudeMode: 'RELATIVE_TO_GROUND', // Place it on the ground (as it has no altitude it will just be at ground height).
        drawsOccludedSegments: true, // Show the line through the buildings or anything else that might get in the way.
    });

    polyline.addEventListener('gmp-click', function () {
        // Toggle whether the line draws occluded segments.
        this.drawsOccludedSegments = !this.drawsOccludedSegments;
    });

    map.append(polyline);
}

void init();
```

<br />

## Polygons

A polygon represents an area enclosed by a closed path (or loop), which is
defined by a series of coordinates.
[`Polygon3DElement`](https://developers.google.com/maps/documentation/javascript/reference/3d-map.md.txt#Polygon3DElement)
objects are similar to `Polyline3DElement` 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.

`Polygon3DElement` 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
`Polygon3DElement` object's paths property specifies an array of arrays. Each
array defines a separate sequence of ordered `LatLng` coordinates.

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


```javascript
async function init() {
    const { Map3DElement, Polygon3DElement } =
        await google.maps.importLibrary('maps3d');

    const map3DElement = new Map3DElement({
        center: { lat: 40.6842, lng: -74.0019, altitude: 1000 },
        heading: 340,
        tilt: 70,
        mode: 'HYBRID',
    });

    const polygonOptions = {
        strokeColor: '#0000ff80',
        strokeWidth: 8,
        fillColor: '#ff000080',
        drawsOccludedSegments: false,
    };

    const examplePolygon = new Polygon3DElement(polygonOptions);

    examplePolygon.path = [
        { lat: 40.7144, lng: -74.0208 },
        { lat: 40.6993, lng: -74.019 },
        { lat: 40.7035, lng: -74.0004 },
    ];

    map3DElement.append(examplePolygon);

    document.body.append(map3DElement);
}

void init();
```

<br />

### Interactive polygons

The following example changes the polygon's inner and outer colors after
registering a click event.


```javascript
async function init() {
    const { Map3DElement, Polygon3DInteractiveElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 40.6842, lng: -74.0019, altitude: 1000 },
        heading: 340,
        tilt: 70,
        mode: 'HYBRID',
    });

    document.body.append(map);

    const polygonOptions = {
        strokeColor: '#0000ff80',
        strokeWidth: 8,
        fillColor: '#ff000080',
        drawsOccludedSegments: false,
    };

    const examplePolygon = new Polygon3DInteractiveElement(polygonOptions);

    examplePolygon.path = [
        { lat: 40.7144, lng: -74.0208 },
        { lat: 40.6993, lng: -74.019 },
        { lat: 40.7035, lng: -74.0004 },
        { lat: 40.7144, lng: -74.0208 },
    ];

    examplePolygon.addEventListener('gmp-click', function (event) {
        // change the color of the polygon stroke and fill colors to a random alternatives!
        this.fillColor = randomizeHexColor(this.fillColor);
        this.strokeColor = randomizeHexColor(this.strokeColor);
        console.log(event);
    });

    map.append(examplePolygon);
}

function randomizeHexColor(originalHexColor) {
    console.log(originalHexColor);
    const alpha = originalHexColor.substring(7);

    // Generate random values for Red, Green, Blue (0-255)
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);

    console.log(r + ' ' + g + ' ' + b);

    // Convert decimal to 2-digit hex, padding with '0' if needed
    const rHex = ('0' + r.toString(16)).slice(-2);
    const gHex = ('0' + g.toString(16)).slice(-2);
    const bHex = ('0' + b.toString(16)).slice(-2);

    // Combine parts: '#' + random RGB + original Alpha (if any)
    return `#${rHex}${gHex}${bHex}${alpha}`;
}

void init();
```

<br />