Shapes and lines

You can add various shapes to your map. A shape is an object on the map, tied to a latitude/longitude coordinate. The following shapes are available: lines,polygons, circlesandrectangles. You can also configure your shapes so thatusers can edit or drag them.

Polylines

To draw a line on your map, use a polyline. The Polylineclass defines a linear overlay of connected line segments on the map. APolylineobject consists of an array of LatLnglocations, and creates a series of line segments that connect those locations in an ordered sequence.

Add a polyline

ThePolylineconstructor takes a set of PolylineOptionsspecifying theLatLng coordinates of the line and a set of styles to adjust the polyline's visual behavior.

Polylineobjects 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 thePolylineOptionswhen constructing your line, or you can change those properties after construction. A polyline supports the following stroke styles:

• strokeColorspecifies a hexadecimal HTML color of the format "#FFFFFF".ThePolylineclass does not support named colors.
• strokeOpacityspecifies a numerical value between 0.0and1.0to determine the opacity of the line's color. The default is1.0.
• strokeWeightspecifies the width of the line in pixels.

The polyline'seditableproperty specifies whether users can edit the shape. Seeuser-editable shapes below. Similarly, you can set thedraggableproperty to allow users todrag the line.

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.

function initMap(): void {
const map = new google.maps.Map(
document.getElementById( "map" ) as HTMLElement,
{
zoom: 3,
center: { lat: 0, lng: -180 },
mapTypeId: "terrain",
}
);

const flightPlanCoordinates = [
{ lat: 37.772, lng: -122.214 },
{ lat: 21.291, lng: -157.821 },
{ lat: -18.142, lng: 178.431 },
{ lat: -27.467, lng: 153.027 },
];
const flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
});

flightPath.setMap(map);
}

declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
index.ts

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
function initMap() {
const map = new google.maps.Map(document.getElementById( "map" ), {
zoom: 3,
center: { lat: 0, lng: -180 },
mapTypeId: "terrain",
});
const flightPlanCoordinates = [
{ lat: 37.772, lng: -122.214 },
{ lat: 21.291, lng: -157.821 },
{ lat: -18.142, lng: 178.431 },
{ lat: -27.467, lng: 153.027 },
];
const flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
});

flightPath.setMap(map);
}

window.initMap = initMap;
index.js

Remove a polyline

To remove a polyline from the map, call thesetMap()method passingnullas the argument. In the following example, flightPathis a polyline object:

flightPath.setMap(null);

Note that the above method does not delete the polyline. It 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 tonull.

Inspect a polyline

A polyline specifies a series of coordinates as an array of LatLngobjects. These coordinates determine the line's path. To retrieve the coordinates, callgetPath(),which will return an array of typeMVCArray.You can manipulate and inspect the array using the following operations:

• getAt()returns theLatLngat a given zero-based index value.
• insertAt()inserts a passedLatLng at a given zero-based index value. Note that any existing coordinates at that index value are moved forward.
• removeAt()removes aLatLngat a given zero-based index value.

// 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.

let poly: google.maps.Polyline;
let map: google.maps.Map;

function initMap(): void {
map = new google.maps.Map(document.getElementById( "map" ) as HTMLElement, {
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: google.maps.MapMouseEvent) {
const path = poly.getPath();

// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear.
path.push(event.latLng as google.maps.LatLng);

// Add a new marker at the new plotted point on the polyline.
new google.maps.Marker({
position: event.latLng,
title: "#" + path.getLength(),
map: map,
});
}

declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
index.ts

// 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.
let poly;
let 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) {
const 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.
new google.maps.Marker({
position: event.latLng,
title: "#" + path.getLength(),
map: map,
});
}

window.initMap = initMap;
index.js

Customize a polyline

You can add vector-based images to a polyline in the form of symbols. With a combination of symbols and thePolylineOptionsclass, you have a lot of control over the look and feel of polylines on your map. SeeSymbolsfor information aboutarrows, dashed lines, custom symbols andanimated symbols.

Polygons

A polygon represents an area enclosed by a closed path (or loop), which is defined by a series of coordinates. Polygonobjects are similar toPolylineobjects 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.

Polygonobjects 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 Polygonobject'spathsproperty specifies an array of arrays, each of typeMVCArray.Each array defines a separate sequence of orderedLatLngcoordinates.

For simple polygons consisting of only one path, you can construct aPolygonusing a single array of LatLngcoordinates. The Maps JavaScript API will convert the simple array into an array of arrays upon construction when storing it within thepathsproperty. The API provides a simple getPath()method for polygons consisting of one path.

The polygon'seditableproperty specifies whether users can edit the shape. Seeuser-editable shapesbelow. Similarly, you can set thedraggableproperty to allow users to drag the shape.

// This example creates a simple polygon representing the Bermuda Triangle.

function initMap(): void {
const map = new google.maps.Map(
document.getElementById( "map" ) as HTMLElement,
{
zoom: 5,
center: { lat: 24.886, lng: -70.268 },
mapTypeId: "terrain",
}
);

// Define the LatLng coordinates for the polygon's path.
const triangleCoords = [
{ lat: 25.774, lng: -80.19 },
{ lat: 18.466, lng: -66.118 },
{ lat: 32.321, lng: -64.757 },
{ lat: 25.774, lng: -80.19 },
];

// Construct the polygon.
const bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
});

bermudaTriangle.setMap(map);
}

declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
index.ts

// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
const map = new google.maps.Map(document.getElementById( "map" ), {
zoom: 5,
center: { lat: 24.886, lng: -70.268 },
mapTypeId: "terrain",
});
// Define the LatLng coordinates for the polygon's path.
const triangleCoords = [
{ lat: 25.774, lng: -80.19 },
{ lat: 18.466, lng: -66.118 },
{ lat: 32.321, lng: -64.757 },
{ lat: 25.774, lng: -80.19 },
];
// Construct the polygon.
const bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
});

bermudaTriangle.setMap(map);
}

window.initMap = initMap;
index.js

Polygon auto-completion

ThePolygonin the example above consists of four sets of LatLngcoordinates, 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 lastLatLngis omitted: view example.

Remove a polygon

To remove a polygon from the map, call thesetMap()method passingnullas the argument. In the following example, bermudaTriangleis a polygon object:

bermudaTriangle.setMap(null);

Note that the above method does not delete the polygon. It 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 tonull.

Inspect a polygon

A polygon specifies its series of coordinates as an array of arrays, where each array is of typeMVCArray.Each "leaf" array is an array ofLatLngcoordinates specifying a single path. To retrieve these coordinates, call the Polygonobject'sgetPaths()method. Since the array is anMVCArrayyou will need to manipulate and inspect it using the following operations:

• getAt()returns theLatLngat a given zero-based index value.
• insertAt()inserts a passedLatLng at a given zero-based index value. Note that any existing coordinates at that index value are moved forward.
• removeAt()removes aLatLngat a given zero-based index value.

// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

let map: google.maps.Map;

let infoWindow: google.maps.InfoWindow;

function initMap(): void {
map = new google.maps.Map(document.getElementById( "map" ) as HTMLElement, {
zoom: 5,
center: { lat: 24.886, lng: -70.268 },
mapTypeId: "terrain",
});

// Define the LatLng coordinates for the polygon.
const triangleCoords: google.maps.LatLngLiteral[] = [
{ lat: 25.774, lng: -80.19 },
{ lat: 18.466, lng: -66.118 },
{ lat: 32.321, lng: -64.757 },
];

// Construct the polygon.
const bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF0000",
fillOpacity: 0.35,
});

bermudaTriangle.setMap(map);

// Add a listener for the click event.
bermudaTriangle.addListener( "click", showArrays);

infoWindow = new google.maps.InfoWindow();
}

function showArrays(event: any) {
// Since this polygon has only one path, we can call getPath() to return the
// MVCArray of LatLngs.
// @ts-ignore
const polygon = this as google.maps.Polygon;
const vertices = polygon.getPath();

let contentString =
"<b>Bermuda Triangle polygon</b><br>" +
"Clicked location: <br>" +
event.latLng.lat() +
","+
event.latLng.lng() +
"<br>";

// Iterate over the vertices.
for (let i = 0; i < vertices.getLength(); i++) {
const xy = vertices.getAt(i);

contentString +=
"<br>" + "Coordinate" + i + ":<br>" + xy.lat() + "," + xy.lng();
}

// Replace the info window's content and position.
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);

infoWindow.open(map);
}

declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
index.ts

// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.
let map;
let infoWindow;

function initMap() {
map = new google.maps.Map(document.getElementById( "map" ), {
zoom: 5,
center: { lat: 24.886, lng: -70.268 },
mapTypeId: "terrain",
});

// Define the LatLng coordinates for the polygon.
const triangleCoords = [
{ lat: 25.774, lng: -80.19 },
{ lat: 18.466, lng: -66.118 },
{ lat: 32.321, lng: -64.757 },
];
// Construct the polygon.
const bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF0000",
fillOpacity: 0.35,
});

bermudaTriangle.setMap(map);
// Add a listener for the click event.
bermudaTriangle.addListener( "click", showArrays);
infoWindow = new google.maps.InfoWindow();
}

function showArrays(event) {
// Since this polygon has only one path, we can call getPath() to return the
// MVCArray of LatLngs.
// @ts-ignore
const polygon = this;
const vertices = polygon.getPath();
let contentString =
"<b>Bermuda Triangle polygon</b><br>" +
"Clicked location: <br>" +
event.latLng.lat() +
","+
event.latLng.lng() +
"<br>";

// Iterate over the vertices.
for (let i = 0; i < vertices.getLength(); i++) {
const xy = vertices.getAt(i);

contentString +=
"<br>" + "Coordinate" + i + ":<br>" + xy.lat() + "," + xy.lng();
}

// Replace the info window's content and position.
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
}

window.initMap = initMap;
index.js

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.

// This example creates a triangular polygon with a hole in it.

function initMap(): void {
const map = new google.maps.Map(
document.getElementById( "map" ) as HTMLElement,
{
zoom: 5,
center: { lat: 24.886, lng: -70.268 },
}
);

// Define the LatLng coordinates for the polygon's outer path.
const outerCoords = [
{ lat: 25.774, lng: -80.19 },
{ lat: 18.466, lng: -66.118 },
{ lat: 32.321, lng: -64.757 },
];

// Define the LatLng coordinates for the polygon's inner path.
// Note that the points forming the inner path are wound in the
// opposite direction to those in the outer path, to form the hole.
const innerCoords = [
{ lat: 28.745, lng: -70.579 },
{ lat: 29.57, lng: -67.514 },
{ lat: 27.339, lng: -66.668 },
];

// Construct the polygon, including both paths.
const bermudaTriangle = new google.maps.Polygon({
paths: [outerCoords, innerCoords],
strokeColor: "#FFC107",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FFC107",
fillOpacity: 0.35,
});

bermudaTriangle.setMap(map);
}

declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
index.ts

// This example creates a triangular polygon with a hole in it.
function initMap() {
const map = new google.maps.Map(document.getElementById( "map" ), {
zoom: 5,
center: { lat: 24.886, lng: -70.268 },
});
// Define the LatLng coordinates for the polygon's outer path.
const outerCoords = [
{ lat: 25.774, lng: -80.19 },
{ lat: 18.466, lng: -66.118 },
{ lat: 32.321, lng: -64.757 },
];
// Define the LatLng coordinates for the polygon's inner path.
// Note that the points forming the inner path are wound in the
// opposite direction to those in the outer path, to form the hole.
const innerCoords = [
{ lat: 28.745, lng: -70.579 },
{ lat: 29.57, lng: -67.514 },
{ lat: 27.339, lng: -66.668 },
];
// Construct the polygon, including both paths.
const bermudaTriangle = new google.maps.Polygon({
paths: [outerCoords, innerCoords],
strokeColor: "#FFC107",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FFC107",
fillOpacity: 0.35,
});

bermudaTriangle.setMap(map);
}

window.initMap = initMap;
index.js

Rectangles

In addition to a genericPolygonclass, the Google Maps JavaScript API includes a specific class for Rectangleobjects, to simplify their construction.

Add a rectangle

ARectangleis similar to aPolygonin 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 aPolygon,you do not definepaths for aRectangle.Instead, a rectangle has abounds property which defines its shape by specifying a google.maps.LatLngBoundsfor the rectangle.

The rectangle'seditableproperty specifies whether users can edit the shape. Seeuser-editable shapesbelow. Similarly, you can set thedraggableproperty to allow users todrag the rectangle.

// This example adds a red rectangle to a map.

function initMap(): void {
const map = new google.maps.Map(
document.getElementById( "map" ) as HTMLElement,
{
zoom: 11,
center: { lat: 33.678, lng: -116.243 },
mapTypeId: "terrain",
}
);

const rectangle = new google.maps.Rectangle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map,
bounds: {
north: 33.685,
south: 33.671,
east: -116.234,
west: -116.251,
},
});
}

declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
index.ts

// This example adds a red rectangle to a map.
function initMap() {
const map = new google.maps.Map(document.getElementById( "map" ), {
zoom: 11,
center: { lat: 33.678, lng: -116.243 },
mapTypeId: "terrain",
});
const rectangle = new google.maps.Rectangle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map,
bounds: {
north: 33.685,
south: 33.671,
east: -116.234,
west: -116.251,
},
});
}

window.initMap = initMap;
index.js

The following code creates a rectangle each time the user changes the zoom on the map. The size of the rectangle is determined by the viewport.

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.

function initMap(): void {
const map = new google.maps.Map(
document.getElementById( "map" ) as HTMLElement,
{
zoom: 11,
center: { lat: 40.74852, lng: -73.981687 },
mapTypeId: "terrain",
}
);

const rectangle = new google.maps.Rectangle();

map.addListener( "zoom_changed", () => {
// Get the current bounds, which reflect the bounds before the zoom.
rectangle.setOptions({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map,
bounds: map.getBounds() as google.maps.LatLngBounds,
});
});
}

declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
index.ts

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.
function initMap() {
const map = new google.maps.Map(document.getElementById( "map" ), {
zoom: 11,
center: { lat: 40.74852, lng: -73.981687 },
mapTypeId: "terrain",
});
const rectangle = new google.maps.Rectangle();

map.addListener( "zoom_changed", () => {
// Get the current bounds, which reflect the bounds before the zoom.
rectangle.setOptions({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map,
bounds: map.getBounds(),
});
});
}

window.initMap = initMap;
index.js

Remove a rectangle

To remove a rectangle from the map, call thesetMap()method passingnullas the argument.

rectangle.setMap(null);

Note that the above method does not delete the rectangle. It 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 tonull.

Circles

In addition to the genericPolygonclass, the Google Maps JavaScript API includes a specific class for Circleobjects, to simplify their construction.

Add a circle

ACircleis similar to aPolygonin 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 aPolygon,you do not definepaths for aCircle.Instead, a circle has two additional properties which define its shape:

• centerspecifies thegoogle.maps.LatLng of the center of the circle.
• radiusspecifies the radius of the circle, in meters.

The circle'seditableproperty specifies whether users can edit the shape. Seeuser-editable shapesbelow. Similarly, you can set thedraggableproperty to allow users todrag the circle.

// This example creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.

interface City {
center: google.maps.LatLngLiteral;
population: number;
}

const citymap: Record<string, City> = {
chicago: {
center: { lat: 41.878, lng: -87.629 },
population: 2714856,
},
newyork: {
center: { lat: 40.714, lng: -74.005 },
population: 8405837,
},
losangeles: {
center: { lat: 34.052, lng: -118.243 },
population: 3857799,
},
vancouver: {
center: { lat: 49.25, lng: -123.1 },
population: 603502,
},
};

function initMap(): void {
// Create the map.
const map = new google.maps.Map(
document.getElementById( "map" ) as HTMLElement,
{
zoom: 4,
center: { lat: 37.09, lng: -95.712 },
mapTypeId: "terrain",
}
);

// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (const city in citymap) {
// Add the circle for this city to the map.
const cityCircle = new google.maps.Circle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 100,
});
}
}

declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
index.ts

const citymap = {
chicago: {
center: { lat: 41.878, lng: -87.629 },
population: 2714856,
},
newyork: {
center: { lat: 40.714, lng: -74.005 },
population: 8405837,
},
losangeles: {
center: { lat: 34.052, lng: -118.243 },
population: 3857799,
},
vancouver: {
center: { lat: 49.25, lng: -123.1 },
population: 603502,
},
};

function initMap() {
// Create the map.
const map = new google.maps.Map(document.getElementById( "map" ), {
zoom: 4,
center: { lat: 37.09, lng: -95.712 },
mapTypeId: "terrain",
});

// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (const city in citymap) {
// Add the circle for this city to the map.
const cityCircle = new google.maps.Circle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 100,
});
}
}

window.initMap = initMap;
index.js

Remove a circle

To remove a circle from the map, call thesetMap()method passingnullas the argument.

circle.setMap(null);

Note that the above method does not delete the circle. It 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 tonull.

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 settingeditabletotruein the shape's options.

var bounds = {
north: 44.599,
south: 44.490,
east: -78.443,
west: -78.649
};

// Define a rectangle and set its editable property to true.
var rectangle = new google.maps.Rectangle({
bounds: bounds,
editable: true
});

View example

Make a shape draggable

By default, a shape drawn on the map will be fixed in position. To allow users to drag a shape to a different location on the map, set draggabletotruein the shape options.

var redCoords = [
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757}
];

// Construct a draggable red triangle with geodesic set to true.
new google.maps.Polygon({
map: map,
paths: redCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
draggable: true,
geodesic: true
});

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

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.

For more information on coordinate systems, consult the guide to map and tile coordinates.

The following map shows two triangles of roughly the same size and dimensions. The red triangle has itsgeodesicproperty set to true.Notice how its shape changes as it moves north.

View example

Listen to editing events

When a shape is edited, an event is fired upon completion of the edit. These events are listed below.

Some useful code snippets:

google.maps.event.addListener(circle, 'radius_changed', function() {
console.log(circle.getRadius());
});

google.maps.event.addListener(outerPath, 'set_at', function() {
console.log('Vertex moved on outer path.');
});

google.maps.event.addListener(innerPath, 'insert_at', function() {
console.log('Vertex removed from inner path.');
});

google.maps.event.addListener(rectangle, 'bounds_changed', function() {
console.log('Bounds changed.');
});

See an example of handling an editing event on a rectangle: view example.

Listen to dragging events

When a shape is dragged, events are fired upon start and end of the dragging action as well as during the dragging. The following events are fired for polylines, polygons, circles and rectangles.

For more about handling events, see the documentation on events.