Polylines

To draw a line on your map, use a polyline. The
Polyline 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
PolylineOptions 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, weights, and opacities for the stroke
of the line within the PolylineOptions when
constructing your line, or you can change those properties after construction.
A polyline supports the following stroke styles:

strokeColor specifies a hexadecimal HTML color of the format
"#FFFFFF". The Polyline class does not support
named colors.

strokeOpacity specifies a numerical value between
0.0 and 1.0 to determine the opacity of the line's
color. The default is 1.0.

strokeWeight specifies the width of the line in pixels.

The polyline's editable property specifies whether users can
edit the shape. See user-editable shapes
below. Similarly, you can set the draggable property to allow
users to drag the line.

Remove a polyline

To remove a polyline from the map, call the setMap() method
passing null as the argument. In the following example,
flightPath is a polyline object:

flightPath.setMap(null);

Note that the above method does not delete the polyline. It simply removes
the polyline from the map. If instead you wish to delete the polyline,
you should remove it from the map, and then set the
polyline itself to null.

Inspect a polyline

A polyline specifies a series of coordinates as an array of
LatLng objects. These coordinates determine the line's path.
To retrieve the coordinates, call getPath(), which will
return an array of type MVCArray. You can
manipulate and inspect the array using the following operations:

getAt() returns the LatLng at a given
zero-based index value.

insertAt() inserts a passed LatLng
at a given zero-based index value. Note that any
existing coordinates at that index value are moved forward.

removeAt() removes a LatLng at a given
zero-based index value.

Note: You cannot simply retrieve
the ith element of an array by using the syntax
mvcArray[i]. You must use
mvcArray.getAt(i).

// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.
var poly;
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 41.879, lng: -87.624} // Center the map on Chicago, USA.
});
poly = new google.maps.Polyline({
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
});
poly.setMap(map);
// Add a listener for the click event
map.addListener('click', addLatLng);
}
// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
var path = poly.getPath();
// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear.
path.push(event.latLng);
// Add a new marker at the new plotted point on the polyline.
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map
});
}

Customize a polyline

You can add vector-based images to a polyline in the form of symbols. With a
combination of symbols and the PolylineOptions class,
you have a lot of control over the look and feel of polylines on your map.
See Symbols for information
about arrows,
dashed lines,
custom symbols
and animated symbols.

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,
weights, and opacities 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.

Note: The Data layer provides a simple way
of drawing polygons. It handles polygon winding for you, making it easier
to draw polygons with holes. See the
documentation for
the Data layer.

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 simple polygons consisting of only one path, you can
construct a Polygon using a single array of
LatLng coordinates. The Maps JavaScript API will convert
the simple array into an array of arrays upon construction when storing it
within the paths property. The API provides a simple
getPath() method for polygons consisting of one path.

Note: If you construct a simple
polygon in this manner, you will still need to retrieve values from the
polygon by manipulating the path as an MVCArray.

The polygon's editable property specifies whether users can edit
the shape. See user-editable shapes below.
Similarly, you can set the draggable property to allow users to
drag the shape.

Polygon auto-completion

The Polygon in the example above consists of four sets of
LatLng coordinates, but notice that the first and last sets
define the same location, which completes the loop. In practice, however,
since polygons define closed areas, you don't need to specify the last
set of coordinates. The Maps JavaScript API will automatically complete
the polygon by drawing a stroke connecting the last location back to the first
location for any given path.

The following example is identical to the previous one, except
that the last LatLng is omitted:
view example.

Remove a polygon

To remove a polygon from the map, call the setMap() method
passing null as the argument. In the following example,
bermudaTriangle is a polygon object:

bermudaTriangle.setMap(null);

Note that the above method does not delete the polygon. It simply removes
the polygon from the map. If instead you wish to delete the polygon,
you should remove it from the map, and then set the
polygon itself to null.

Removing a polygon is similar to removing a polyline. To see
the code in action for a polyline:
view example.

Inspect a polygon

A polygon specifies its series of coordinates as an array
of arrays, where each array is of type MVCArray. Each
"leaf" array is an array of LatLng coordinates
specifying a single path. To retrieve these coordinates, call the
Polygon object's getPaths() method. Since the
array is an MVCArray you will need to manipulate and
inspect it using the following operations:

getAt() returns the LatLng at a given
zero-based index value.

insertAt() inserts a passed LatLng
at a given zero-based index value. Note that any
existing coordinates at that index value are moved forward.

removeAt() removes a LatLng at a given
zero-based index value.

Note: You cannot simply retrieve
the ith element of an array by using the syntax
mvcArray[i]. You must use
mvcArray.getAt(i).

Put a hole in a polygon

To create an empty area within a polygon, you need to create two paths,
one inside the other. To create the hole, the coordinates defining the inner
path must be in the opposite order to those defining the outer path.
For example, if the coordinates of the outer path are in clockwise order
then the inner path must be counter-clockwise.

Note: The Data layer handles the order of the
inner and outer paths for you, making it easier to draw polygons with holes.
See the
documentation
for the Data layer.

The following example draws a polygon with two paths, with the inner path
wound in the opposite direction to the outer path.

Rectangles

In addition to a generic Polygon class, the Google Maps
JavaScript API includes a specific class for
Rectangle objects, to simplify their construction.

Add a rectangle

A Rectangle is similar to a Polygon in
that you can define custom colors, weights, and opacities for the edge of the
rectangle (the stroke) and custom colors and opacities for the area within the
rectangle (the fill). Colors should be indicated in hexadecimal numeric HTML
style.

Unlike a Polygon, you do not define paths
for a Rectangle. Instead, a rectangle has a bounds
property which defines its shape by specifying a
google.maps.LatLngBounds for the rectangle.

The rectangle's editable property specifies whether
users can edit the shape. See user-editable
shapes below. Similarly, you can set the draggable property
to allow users to drag the rectangle.

Remove a rectangle

To remove a rectangle from the map, call the setMap() method
passing null as the argument.

rectangle.setMap(null);

Note that the above method does not delete the rectangle. It simply removes
the rectangle from the map. If instead you wish to delete the rectangle,
you should remove it from the map, and then set the
rectangle itself to null.

Removing a rectangle is similar to removing a polyline. To
see the code in action for a polyline:
view example.

Circles

In addition to the generic Polygon class, the Google Maps
JavaScript API includes a specific class for
Circle objects, to simplify their construction.

Add a circle

A Circle is similar to a Polygon in that you can
define custom colors, weights, and opacities for the edge of the circle (the
stroke) and custom colors and opacities for the area within the circle (the
fill). Colors should be indicated in hexadecimal numeric HTML style.

Unlike a Polygon, you do not define paths
for a Circle. Instead, a circle has two additional
properties which define its shape:

center specifies the google.maps.LatLng
of the center of the circle.

radius specifies the radius of the circle, in meters.

The circle's editable property specifies whether users can edit
the shape. See user-editable shapes below.
Similarly, you can set the draggable property to allow
users to drag the circle.

Remove a circle

To remove a circle from the map, call the setMap() method
passing null as the argument.

circle.setMap(null);

Note that the above method does not delete the circle. It simply removes
the circle from the map. If instead you wish to delete the circle,
you should remove it from the map, and then set the
circle itself to null.

Removing a circle is similar to removing a polyline. To see
the code in action for a polyline:
view example.

User-editable and draggable shapes

Making a shape editable adds handles to the shape, which people can use
to reposition, reshape, and resize the shape directly on the map. You can also
make a shape draggable, so people can move it to a different place on the map.

User-made changes to the object do not persist between sessions. If you
want to save the user's edits, you must capture and store the information
yourself.

Make a shape editable

Any shape (polylines, polygons, circles, and rectangles) can be set
as user-editable, by setting editable to true in
the shape's options.

When enabling dragging on a polygon or polyline, you should also consider
making the polygon or polyline geodesic, by setting its geodesic
property to true.

A geodesic polygon will retain its true geographic shape when it is moved,
causing the polygon to appear distorted as it is moved north or south in the
Mercator projection. Non-geodesic polygons will always retain their initial
appearance on the screen.

In a geodesic polyline, the segments of the polyline are drawn as the
shortest path between two points on the Earth's surface, assuming the Earth is
a sphere, as opposed to straight lines on the Mercator projection.