You can add DragZoom to any Google map with a couple of lines of code.
<script src="gzoom.js" type="text/javascript"></script>
map = new GMap2($id("large-google-map"));
map.addControl(new GSmallMapControl());
map.addControl(new DragZoomControl());
<!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" >
<style type="text/css">v\:* {behavior:url(#default#VML);}</style>
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).
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.
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).
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.
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)));
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.