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. ...

Get Google Maps JavaScript API Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.