This library adds a drag zoom capability to a V2 Google map.
When drag zoom is enabled, holding down a designated hot key (shift | ctrl | alt)
while dragging a box around an area of interest will zoom the map in to that area when
the mouse button is released. Optionally, a visual control can also be supplied for turning
a drag zoom operation on and off.
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.
This class represents a drag zoom object for a map. The object is activated by holding down the hot key
or by turning on the visual control.
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 | Arguments | Description |
---|---|---|
activate |
None |
This event is fired when the hot key is pressed. |
deactivate |
None |
This event is fired when the hot key is released. |
drag |
southwestPixel:GPoint, northeastPixel:GPoint |
This event is fired repeatedly while the user drags a box across the area of interest.
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 position to geographic coordinates, if necessary, using
GMap2.fromContainerPixelToLatLng . |
dragend |
bnds:GLatLngBounds |
This event is fired when the drag operation ends. The parameter passed is the geographic bounds of the selected area. Note that this event is not fired if the hot key is released before the drag operation ends. |
dragstart |
latlng:GLatLng |
This event is fired when the drag operation begins. The parameter passed is the geographic position of the starting point. |
These are new methods added to the Google Maps JavaScript API V2's GMap2 class.
Methods | Return Value | Description |
---|---|---|
disableKeyDragZoom() |
None |
Disables drag zoom. |
enableKeyDragZoom(opt_zoomOpts:KeyDragZoomOptions) |
None |
Enables 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 or by turning
on the visual control then 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. |
This class represents the optional parameter passed into GMap2.enableKeyDragZoom
. There is no constructor for this class. Instead, this class is instantiated as a javascript object literal.
Properties | Type | Description |
---|---|---|
boxStyle |
Object |
An object literal defining the css styles of the zoom box.
The default is {border: "4px solid #736AFF"} .
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 .
Note that the alt shift. |
veilStyle |
Object |
An object literal defining the css styles of the veil pane
which covers the map when a drag zoom is activated. The previous name for this property was
paneStyle but the use of this name is now deprecated.
The default is {backgroundColor: "gray", opacity: 0.25, cursor: "crosshair"} . |
visualClass |
string |
The name of the CSS class defining the styles for the visual control. |
visualEnabled |
Boolean |
A flag indicating whether a visual control is to be used.
The default is false . |
visualPosition |
GControlPosition |
The position of the visual control. The default position is (27,295) relative to the top left corner of the map. |
visualSize |
GSize |
The width and height values provided by this property are
the size (in pixels) of each of the images within visualSprite .
The default is (20,20). |
visualSprite |
String |
The URL of the sprite image used for showing the visual control
in the on, off, and hot (i.e., when the mouse is over the control) states. The three images
within the sprite must be the same size and arranged in on-hot-off order in a single row
with no spaces between images.
The default is http://maps.gstatic.com/mapfiles/ftr/controls/dragzoom_btn.png . |
visualTips |
Object |
An object literal defining the help tips that appear when
the mouse moves over the visual control. The off property is the tip to be shown
when the control is off and the on property is the tip to be shown when the
control is on.
The default values are "Turn on drag zoom mode" and "Turn off drag zoom mode", respectively. |