DragZoomControl How-to

You can add DragZoom to any Google map with a couple of lines of code.

  1. Include gzoom.js in your document header.
  2. <script src="gzoom.js" type="text/javascript"></script>
  3. Add DragZoom to your map like any other control. Example:
  4. map = new GMap2($id("large-google-map"));
    map.addControl(new GSmallMapControl());
    map.addControl(new DragZoomControl());
  5. Important! Make sure your and doctype and namespaces are set correctly:
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" >
  7. For Internet Explorer: make sure you enable the VML behavior:
    <style type="text/css">v\:* {behavior:url(#default#VML);}</style>

A Simple DragZoomControl Example

This is the "Hello World" code from the GMaps documentation. The lines you need to add for DragZoom are in bold.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" >
<head>
<style type="text/css">v\:* {behavior:url(#default#VML);}</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=YOUR_KEY_HERE"
type="text/javascript"></script>
<script src="/javascripts/dragzoom.js" type="text/javascript"></script>
<script type="text/javascript">

//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addControl(new DragZoomControl());
}
}

//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 900px; height: 600px"></div>
</body>
</html>

View example (simpledragzoom.html).

Advanced usage

The DragZoom constructor takes three optional arguments, DragZoomBoxStyleOptions, DragZoomOtherOptions, and DragZoomCallbacks. All three are optional, but if you want to include one, you need to include the previous hashes too, even if they are empty. The following example uses all the default options except one - stickyZoomEnabled, which makes the zoom stay on until the user clicks the control.

map.addControl(new DragZoomControl({},{},{stickyZoomEnabled:true}));

To play with the first two options parameters, check out this interactive options playground.

An Advanced DragZoomControl Example

This example customizes the overlay (with DragZoomBoxStyleOptions), provides some of the additional options (with DragZoomOtherOptions), and all of the callback (with DragZoomCallbacks): see example. The DragZoom instantiation code:

  /* first set of options is for the visual overlay.*/
  var boxStyleOpts = {
    opacity:.2,
    border:"2px solid red"
  }

  /* second set of options is for everything else */
  var otherOpts = {
    buttonHTML:"<img src='/images/zoom-button.gif' />",
    buttonZoomingHTML:"<img src='/images/zoom-button-activated.gif' />",
    buttonStartingStyle:{width:'24px',height:'24px'}
  };

  /* third set of options specifies callbacks */
  var callbacks = {
    buttonclick:function(){display("Looks like you activated DragZoom!")},
    dragstart:function(){display("Started to Drag . . .")},
    dragging:function(x1,y1,x2,y2){display("Dragging, currently x="+x2+",y="+y2)},
    dragend:function(nw,ne,se,sw,nwpx,nepx,sepx,swpx){display("Zoom! NE="+ne+";SW="+sw)}
  };
  
  map.addControl(new DragZoomControl(boxStyleOpts, otherOpts, callbacks));	

View example (advanceddragzoom.html).

Using an image for the button instead of text

The example above demonstrates how to substitute an image for text on the DragZoom button. Basically, you can do so by using the buttonHTML and buttonZoomingHTML arguments (in DragZoomOtherOptions) to specify images rather than text. You can put any valid html in these arguments, even a combination of images and text. Just make sure you set the width and height of the button (through the buttonStartingStyle) as appropriate for the look of the button. If you need the size or background of the button to change when activated, you can set styles in the buttonZoomingStyle argument.

Specifying the position of the DragZoom control

Like all controls, DragZoom can be placed anywhere you want on the map by specifying an optional GControlPosition. An example:

map.addControl(new DragZoomControl(),new GControlPosition(G_ANCHOR_TOP_RIGHT,new GSize(10,10)));

Browser compatibility

You need a modern browser. DragZoom has been tested with IE6/XP, IE7/XP,Safari2/OS10.4, FF1.4/OS10.4, FF1.4.1/XP, FF2/XP.

It works with Opera9/XP, but there is some jumpiness and odd scrollbar behavior.

Notes