KeyDragZoom

Apr 08, 2014 in Maps 5929 views

Download

Overview
Documents
Demos

User Rating: 4.2/5 ( 1 votes)

Your Rating:

This class allows a user to zoom in to an area on the map by holding down a hot key (e.g. Shift) while dragging a box around the area. Version 2.0 adds an optional visual control for turning zoom mode on and off.

Including Scripts

The first step is to include keydragzoom.js or keydragzoom_packed.js in your document header after the Google Maps JavaScript API V3 has been included. You can use the online version if you do not want to download the script.

<script src="/path/to/keydragzoom_packed.js" type="text/javascript"></script>

Enabling KeyDragZoom

You simply call google.maps.Map.enableKeyDragZoom() to enable KeyDragZoom.

var myOptions = {
  zoom: 12,
  center: new google.maps.LatLng(35.227, -80.84),
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);

map.enableKeyDragZoom();

Styling the Zoom Box and the Veil

You can pass some css properties when you enable KeyDragZoom. Those associated with boxStyle are applied to the zoom box the user drags across the area of interest and those associated with veilStyle are applied to the veil that covers the map when the hot key is down. In the following example, the zoom box is transparent with a 4-pixel dashed black border and the veil is red with 35% opacity.

var myOptions = {
  zoom: 13,
  center: new google.maps.LatLng(49.2903, -123.1294),
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);

map.enableKeyDragZoom({
  key: "shift", 
  boxStyle: {
    border: "4px dashed black",
    backgroundColor: "transparent",
    opacity: 1.0
  },
  veilStyle: {
    backgroundColor: "red",
    opacity: 0.35,
    cursor: "crosshair"
  }
});

Using a Different Hot Key

If you do not want to use the Shift key as the hot key, you can pass one of the other two keys: Alt or Ctrl. In the following example, you can start a drag zoom operation by holding down the Alt key. Use of the Ctrl key with Google Maps JavaScript API V3 is not recommended because it causes a context menu to appear when running on the Macintosh.

var myOptions = {
  zoom: 12,
  center: new google.maps.LatLng(35.227, -80.84),
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);

map.enableKeyDragZoom({
  key: 'alt'
});

Visual Drag Zoom Control

You can also use a visual control to turn KeyDragZoom on and off. Set the visualEnabled parameter to true, indicate the position of the control with visualPosition and visualPositionOffset, and use visualSprite to specify the URL for the sprite containing the images of the control in the on, hot, and off states. (The control is hot when the mouse moves over it.) visualSize holds the size of the images in the sprite. Use the visualTipsproperty to set the values of the help tips to be displayed when the control is on and off.

var myOptions = {
  zoom: 13,
  center: new google.maps.LatLng(49.2903, -123.1294),
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);

map.enableKeyDragZoom({
  visualEnabled: true,
  visualPosition: google.maps.ControlPosition.LEFT,
  visualPositionOffset: new google.maps.Size(35, 0),
  visualPositionIndex: null,
  visualSprite: "http://maps.gstatic.com/mapfiles/ftr/controls/dragzoom_btn.png",
  visualSize: new google.maps.Size(20, 20),
  visualTips: {
    off: "Turn on",
    on: "Turn off"
  }
});

Multiple Maps Supported

Each map on the same webpage can have its own independent KeyDragZoom tool.

var myOptions = {
  zoom: 12,
  center: new google.maps.LatLng(35.227, -80.84),
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map1 = new google.maps.Map(document.getElementById("map1"), myOptions);
map1.enableKeyDragZoom();
var map2 = new google.maps.Map(document.getElementById("map2"), myOptions);
map2.enableKeyDragZoom();

KeyDragZoom Events

Different events are triggered at key moments of a drag zoom operation.

var myOptions = {
  zoom: 12,
  center: new google.maps.LatLng(49.49088, -123.75446),
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);

map.enableKeyDragZoom();
var dz = map.getDragZoomObject();
google.maps.event.addListener(dz, 'activate', function () {
  log('KeyDragZoom Activated');
});
google.maps.event.addListener(dz, 'deactivate', function () {
  log('KeyDragZoom Deactivated');
});
google.maps.event.addListener(dz, 'dragstart', function (latlng) {
  log('KeyDragZoom Started: ' + latlng);
});
google.maps.event.addListener(dz, 'drag', function (startPt, endPt) {
  log('KeyDragZoom Dragging: ' + startPt + endPt);
});
google.maps.event.addListener(dz, 'dragend', function (bnds) {
  log('KeyDragZoom Ended: ' + bnds);
});

JS Tutorial