Adding drag zoom to the map

Google Maps has a zoom control and the JavaScript API makes use of this control to offer a variety of options for programmers. It is a very useful and easy-to-use control. But there are other ways for zooming; for instance, by drawing an area of interest by dragging a box, so that the map zooms to that area.

This functionality does not exist in the standard Google Maps JavaScript API and any of its libraries; you have to code it. Or, you can make use of the utility libraries, developed by the good guys, at the following link:

https://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries

One of their libraries, KeyDragZoom, is exactly for this zoom functionality, and we will use this library in this recipe.

Getting ready

You have to download the keydragzoom.js JavaScript source file from the following link (the latest release is 2.0.9 as of the time of writing this book) and place it in the same directory as our recipe source code:

http://google-maps-utility...