Hi, I'm Andre Lewis and I'm on the Internet

I added a few things to GZoom today. What's new:

• GZoom now works on maps that move or are resized on the page
• new "Sticky" mode -- can stay in zoom mode for multiple zooms
• more flexible zoom button, can use images, arbitrary text, etc.
• tested and confirmed to work with GMaps new Marker Manager
• you can specify optional callback functions for the following events: buttonClick,dragStart,dragging,dragEnd

See the GZoom original post, the new example, or read on for details of what's updated. Or just grab the new code:

Read on much more detail . . .

Advanced usage

The GZoom constructor takes three optional arguments, all three of which are hashes of key-value pairs. All three are optional, but if you want to include one, you need to include the previous hashes too, even if they are empty:

First Hash: Visual options for the overlay

The first optional hash you can pass to the GZoom constructor allows you to customize the overlay which goes over the map when you activate GZoom. The hash recognizes three keys:

• sColor: the color of the transparent veil which is put over the map when you click "zoom...". Use a standard hex value for this. Defaults to #000.
• nOpacity: the opacity of the veil -- a value from 0 to 1, with one 1 being totally opaque. Defaults to .2
• sBorder: the border of the area which you drag on the map. Takes a three-part string, just as if you were specifying a border in CSS. Defaults to "2px solid blue". If you specify this value, you must provide a three-part string in the same format.

oMap.addControl(new GZoomControl({sColor:'#FFF',nOpacity:.4,sBorder:'1px solid yellow'}));

Second Hash: Other Options

The second hash allows you to set the following options:

Third Hash: Callbacks

The third hash allows you to set callback functions for various GZoom events:

An Example with Some Advanced Features

This example customizes the overlay (first hash), provides some of the additional options (second hash), and all of the callbacks (third hash): see example. The GZoom instantiation code:

  map.addControl(new GZoomControl(
		/* first set of options is for the visual overlay.*/
		{
			nOpacity:.2,
			sBorder:"2px solid red"
		},
		/* second set of options is for everything else */
		{
			sButtonHTML:"<img src="/img/spacer.gif"> 
Using an image for the button instead of text
The example above demonstrates how to substitute an image for text on the GZoom 
  button. Basically, use the sButtonHTML and sButtonZoomingHTML arguments (in 
  the second hash) 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 oButtonStartingStyle) as 
  appropriate for the look of the button. If you need to the shape/background 
  etc. of the button to change when activated, you can set styles in the oButtonZoomingStyle 
  argument.