Shapes

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, circles and rectangles. You can also configure your shapes so that users can edit or drag them.

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.

TypeScript

// 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); }

JavaScript

// 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); }

View example

// 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); }

/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }

<!DOCTYPE html> <html> <head> <title>Simple Polylines</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <!-- jsFiddle will insert css and js --> </head> <body> <div id="map"></div> <!-- Async script executes immediately and must be after any DOM elements used in callback. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly&channel=2" async ></script> </body> </html>

Try Sample

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

TypeScript

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

JavaScript

// 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,   }); }

View example

// 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, }); }

/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }

<!DOCTYPE html> <html> <head> <title>Complex Polylines</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <!-- jsFiddle will insert css and js --> </head> <body> <div id="map"></div> <!-- Async script executes immediately and must be after any DOM elements used in callback. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly&channel=2" async ></script> </body> </html>

Try Sample

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.

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.

TypeScript

// 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); }

JavaScript

// 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); }

View example

// 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); }

/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }

<!DOCTYPE html> <html> <head> <title>Simple Polygon</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <!-- jsFiddle will insert css and js --> </head> <body> <div id="map"></div> <!-- Async script executes immediately and must be after any DOM elements used in callback. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly&channel=2" async ></script> </body> </html>

Try Sample

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

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.

TypeScript

// 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); }

JavaScript

// 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.   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); }

View example

// 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. 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); }

/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }

<!DOCTYPE html> <html> <head> <title>Polygon Arrays</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <!-- jsFiddle will insert css and js --> </head> <body> <div id="map"></div> <!-- Async script executes immediately and must be after any DOM elements used in callback. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly&channel=2" async ></script> </body> </html>

Try Sample

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.

TypeScript

// 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); }

JavaScript

// 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); }

View example

// 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); }

/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }

<!DOCTYPE html> <html> <head> <title>Polygon With Hole</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <!-- jsFiddle will insert css and js --> </head> <body> <div id="map"></div> <!-- Async script executes immediately and must be after any DOM elements used in callback. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly&channel=2" async ></script> </body> </html>

Try Sample

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.

TypeScript

// 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,     },   }); }

JavaScript

// 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,     },   }); }

View example

// 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, }, }); }

/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }

<!DOCTYPE html> <html> <head> <title>Rectangles</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <!-- jsFiddle will insert css and js --> </head> <body> <div id="map"></div> <!-- Async script executes immediately and must be after any DOM elements used in callback. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly&channel=2" async ></script> </body> </html>

Try Sample

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.

TypeScript

// 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,     });   }); }

JavaScript

// 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(),     });   }); }

View example

// 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(), }); }); }

/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }

<!DOCTYPE html> <html> <head> <title>Rectangle Zoom</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <!-- jsFiddle will insert css and js --> </head> <body> <div id="map"></div> <!-- Async script executes immediately and must be after any DOM elements used in callback. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly&channel=2" async ></script> </body> </html>

Try Sample

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

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.

TypeScript

// 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,     });   } }

JavaScript

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,     });   } }

View example

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, }); } }

/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }

<!DOCTYPE html> <html> <head> <title>Circles</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <!-- jsFiddle will insert css and js --> </head> <body> <div id="map"></div> <!-- Async script executes immediately and must be after any DOM elements used in callback. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly&channel=2" async ></script> </body> </html>

Try Sample

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

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.

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 draggable to true in 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 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.

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 its geodesic property 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.

Shape Events
Circle radius_changed
center_changed
Polygon insert_at
remove_at
set_at

The listener must be set on the polygon's path. If the polygon has multiple paths, a listener must be set on each path.
Polyline insert_at
remove_at
set_at

The listener must be set on the polyline's path.
Rectangle bounds_changed

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.

Event Description
dragstart Fired when the user starts dragging the shape.
drag Fired repeatedly while the user is dragging the shape.
dragend Fired when the user stops dragging the shape.

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

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2021-11-23 UTC.