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.

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

• Lines 4–9: We define the latitude and longitude bounds for New Zealand and store them in the NEW_ZEALAND_BOUNDS variable.
• lines 15–18: We set up map restrictions. We pass the bounds we defined for New Zealand to the latLngBounds parameter to limit the bounds to New Zealand. We also set strictBounds parameter to false, which allows the user to zoom out until the complete bounded area is in view, together with areas outside the bounded area if needed.