Key Drag Zoom

This library adds a drag zoom capability to a Google map. When drag zoom is enabled, holding down a user-defined hot key (shift | ctrl | alt) while dragging a box around an area of interest will zoom the map to that area when the hot key is released. Only one line of code is needed: GMap2.enableKeyDragZoom();

Note that if the map's container has a border around it, the border widths must be specified in pixel units (or as thin, medium, or thick). This is required because of an MSIE limitation.

For a description and examples of how to use this library, check out the how-to.

class DragZoom

This class represents a drag zoom object for a map. The object is activated by holding down the hot key. This object is created when GMap2.enableKeyDragZoom is called; it cannot be created directly. Use GMap2.getDragZoomObject to gain access to this object in order to attach event listeners.

Events

Events Arguments Description
activate None This event is fired when the hot key is pressed.
deactivate None This event is fired while the user release the key
drag southwestPixel:GPoint, northeastPixel:GPoint This event is repeatedly fired while the user drags the box. The southwest and northeast point are passed as parameters of type GPoint (for performance reasons), relative to the map container. Note: the event listener is responsible for converting Pixel to LatLng, if necessary, using GMap2.fromContainerPixelToLatLng.
dragend newBounds:GLatLngBounds This event is fired when the drag operation ends. Note that the event is not fired if the hot key is released before the drag operation ends.
dragstart startLatLng:GLatLng This event is fired when the drag operation begins.

class GMap2

These are new methods added to the Google Maps API's GMap2 class.

Methods

Methods Return Value Description
disableKeyDragZoom() None Disable drag zoom.
enableKeyDragZoom(opt_zoomOpts:KeyDragZoomOptions) None Enable drag zoom. The user can zoom to an area of interest by holding down the hot key (shift | ctrl | alt ) while dragging a box around the area.
getDragZoomObject() DragZoom Returns the DragZoom object which is created when GMap2.enableKeyDragZoom is called. With this object you can use GEvent.addListener to attach event listeners for the 'activate', 'deactivate', 'dragstart', 'drag', and 'dragend' events.
keyDragZoomEnabled() Boolean Returns true if the drag zoom feature has been enabled.

class KeyDragZoomOptions

This class represents the optional parameter passed into GMap2.enableDragBoxZoom. There is no constructor for this class. Instead, this class is instantiated as a javascript object literal.

Properties

Properties Type Description
boxStyle Object the css style of the zoom box. The default is {border: 'thin solid #FF0000'}. Border widths must be specified in pixel units (or as thin, medium, or thick).
key String the hot key to hold down to activate a drag zoom, shift | ctrl | alt. The default is shift.
paneStyle Object the css style of the pane which overlays the map when a drag zoom is activated. The default is {backgroundColor: 'white', opacity: 0.0, cursor: 'crosshair'}.