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
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 between0.0and1.0, which is interpreted as a percentage of thestrokeWidth. -
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
.
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
}
];
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
({
path
:
[
{
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. 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.
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
.
path
=
[
{
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
.
path
=
[
{
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
();
