Restricting the map extent

Google Maps has a worldwide extent that shows almost every street on the earth. You can use the Google Maps JavaScript API for the whole earth, but sometimes you need to show only the related area in the mapping application. You can zoom to a fixed location, but this doesn't stop users from moving to another place that is not in the extent of your application.

In this recipe, we will listen for map events to check if we are in an allowed extent. If we are not in the allowed extent, then we move the map to the allowed center within the extent. We used Turkey's geographic extent in this recipe.

Getting ready

This recipe is still using the same map creation process defined in Chapter 1, Google Maps JavaScript API Basics, but there are some additional code blocks to listen for map events and to check for the restricted extent.

You can find the source code at Chapter 5/ch05_restrict_extent.html.

How to do it…

Restricting the map extent is quite easy if you perform the following...