Rectangles

The Google Maps JavaScript API also includes a specific class for Rectangle objects that simplifies the construction of rectangles on a map.

Add a rectangle to a map

The Rectangle object is somewhat similar to the Polygon object in that we can define custom styles for both objects. However, unlike polygons, we do not define paths for a Rectangle. Instead, we pass the bounds property, which defines the bounds of the rectangle in each cardinal direction.

The Rectangle constructor takes in the RectangleOptions parameter. That parameter defines the rectangle’s center LatLng coordinates, size, and style.

RectangleOptions parameters

All RectangleOptions parameters are optional since there are no required parameters. Here’s a list of all the optional RectangleOptions parameters that we can pass to the Rectangle constructor:

We can construct a Rectangle object without any RectangleOptions parameters, since they all are optional. However, if we want to display a Rectangle object, the map and bounds parameters are required, and the visible parameter value must be true.

We can either provide the map and bounds, and all other parameters during construction or after construction using the setValues() method. The setMap() method can also be used to update the map parameter after construction.

Here’s an example of how a Rectangle object is constructed:

new google.maps.Rectangle({
	bounds: {
		north: 41.001, // Latitude coordinate of Colorado's North
		south: 36.971, // Latitude coordinate of Colorado's South
		east: -102.047, // Longitude coordinate of Colorado's East
		west: -109.078, // Longitude coordinate of Colorado's West
	},
	strokeColor: "#FF0000",
	strokeOpacity: 0,
	strokePosition: google.maps.StrokePosition.CENTER,
	strokeWeight: 2,
	clickable: true,
	draggable: false,
	editable: false,
	fillColor: "#FF0000",
	fillOpacity: 0,
	map: map,
	visible: true,
	zIndex: 1,
});

Code example

In the following example, we completely enclose the State of Colorado in the US in a red rectangle on a map:

Here’s a brief explanation of the JavaScript file in the code widget above:

• line 8: We construct a single Rectangle object over the State of Colorado.
• Lines 9–14: Of all the RectangleOptions parameters we pass, the only one of note is the bounds parameter. In this parameter, we pass separate latitude and longitude in all the cardinal directions to designate the boundaries of the Rectangle to precisely that of Colorado.

Remove a rectangle

We can remove a rectangle from the map by calling the setMap() method on the Rectangle object and passing null as its argument.

newRectangle.setMap(null);

Code example

In the example below, we create a Rectangle object, newRectangle, with a UI control that allows the user to remove the rectangle from the map:

Here’s a brief explanation of the HTML file in the above code widget:

• Lines 8–11: We create a separate div element just above our map’s div element. We create two input buttons in this separate div element: add-rectangle on line 9 for adding a rectangle and remove-rectangle on line 10 for removing the rectangle.

Here’s a brief explanation of the JavaScript file in the above code widget:

• Lines 1–2: We define two global variables: map and newRectangle.
• Line 11: We initialize our Rectangle object, newRectangle. We set the boundaries of Colorado as the bounds of the rectangle such that it completely covers the city.
• Lines 31–35: We define a function addRectangle() to add the rectangle. When this function is called, the setMap() method on line 32 renders newRectangle over the map.
• line 37–41: We define a function removeRectangle() to remove the rectangle, and using the setMap() method on line 38, we set the map parameter to null, which removes the rectangle from the map.
• Line 27: We define an event listener that listens for a click event for the add-rectangle button element and calls the addRectangle() method.
• Line 28: We define an event listener that listens for a click event for the remove-rectangle button element and calls the removeRectangle() method.