Restrict Map Bounds

Sometimes, there may be a need to restrict gesture and zoom controls to a certain part of the map. The Google Maps API has a number of properties that can be modified to enforce this restriction.

Limit and control map bounds

To restrict controls to a particular bound or set a maximum or minimum value of zoom, use the restriction, minZoom, and maxZoom options. The syntax for these options is included below:

new google.maps.Map(document.getElementById("map"), {
	zoom,
	center,
	minZoom: zoom - 3,
	maxZoom: zoom + 3,
	restriction: {
		latLngBounds: {
			north: -10,
			south: -40,
			east: 160,
			west: 100,
		},
	},
});

Code example

Here’s an example of a map that has been restricted to New Zealand. The behavior can be tested by zooming out or dragging the map towards the north.