Andre on Tech: GZoom drag-to-zoom Google Maps control

GZoom is a custom Google Maps control which allows you to zoom by dragging a rectangle on the map. Read on for an example.

Update #1: I've posted the uncompressed source code here: gzoom_uncompressed.js . The code is released under an MIT-style license. Enjoy, and let me know if you make enhancements to the code that others might find useful -- I'll try to roll useful enhancements back into the core.

Update #2: version 0.2 released 11/21/06. What's new:

handles maps that move or are resized on the page
more flexible activation 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
Here's a new example demonstrating some of the new options and the callbacks.

Update #3: GZoom has been incorporated into Google's own Google Maps Utility Library, and renamed DragZoom. From now on, you should use the code from Google's repository. Get DragZoom here.

GZoom Example

Click on the "zoom ..." button, and then drag the area you want to zoom in on.

Example 2: hotspotr.com

GZoom is live on my WiFi Cafes site.

Example 3: with an image button and callbacks

An example page is here: another GZoom example

How to add GZoom to your map

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

Download gzoom.js
Include gzoom.js in your document header.

<script src="/javascripts/gzoom.js" type="text/javascript"></script>

Add GZoom to your map like any other control. Example:

oMap = new GMap2($id("large-google-map"));
oMap.addControl(new GSmallMapControl());
oMap.addControl(new GZoomControl());

Important! Make sure your doctype is set correctly:

<!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">

A complete example HTML document

This is the "Hello World" code from Google's GMaps documentation. The lines you need to add for GZoom 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">
  <head>
    <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&amp;v=2&amp;key=YOUR_KEY_HERE"
      type="text/javascript"></script>
    <script src="/javascripts/gzoom.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 GZoomControl());
      }
    }

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

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:

oMap.addControl(new GZoomControl({},{},{bStickyZoom:true}));

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.

Here's an example with all three properties specified:

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:

Key	Description	Default
sButtonHTML	The HTML in the "zoom" button in normal, un-activated state	'zoom ...'
oButtonStartingStyle	A hash of css styles for the zoom button which are common to both un-activated and activated state	{width:'52px',border:'1px solid black',padding:'0px 5px 1px 5px'}
oButtonStyle	A hash of css styles for the zoom button which will be applied when the button is in un-activated state.	{background:'#FFF'}
sButtonZoomingHTML	HTML which is placed in the zoom button when the button is activated.	'Drag a region on the map'
oButtonZoomingStyle	A hash of css styles for the zoom button which will be applied when the button is activated.	{background:'#FF0'}
nOverlayRemoveMS	number of milliseconds to wait before removing the rectangle indicating the zoomed-in area after the zoom has happened.	6000
bStickyZoom	Whether or not the control stays in "zoom mode" until turned off. When true, the user can zoom repeatedly, until clicking on the zoom button again to turn zoom mode off.	false
bForceCheckResize	If you modify the dimensions of the map by altering the css of its containing div, you need to call map.checkResize() to alert the map that its dimensions have changed. If for some reason you'll not able to do this, setting bForceCheckResize=true will force GZoom to call checkResize on the map whenever the GZoom control is clicked. Bottom line: you shouldn't need to set this to true, and if you do it's because your code isn't doing something it should.	false

Third Hash: Callbacks

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

callback name	Description	callback arguments
buttonClick	called when the GZoom is activated by clicking on the "zoom" button.	none
dragStart	called when the user starts to drag a rectangle	x,y -- the PIXEL values, relative to the upper-left-hand corner of the map, where the user began dragging. See the GMaps API if you need to translate this into latitude/longitude
dragging	called repeatedly while the user is dragging	startX,startY, currentX,currentY -- the PIXEL values of the start of the drag, and the current drag point, respectively.
dragEnd	called when the user releases the mouse button, after dragging the rectangle	NW LatLng, NE LatLng, SE LatLng, SW LatLng, NW GPoint, NE GPoint, SE GPoint, SW GPoint -- eight params in all, the first four describe latitude/longitudes; the second four describe pixels coordinates on the map. Either set can be used (depending on whether you need pixels or latitude/longitudes to determine the rectangle that was zoomed in upon.

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='/images/zoom-button.gif' />",
			sButtonZoomingHTML:"<img src='/images/zoom-button-activated.gif' />",
			oButtonStartingStyle:{width:'24px',height:'24px'}
		},
		/* third set of options specifies callbacks */
		{
			buttonClick:function(){display("Looks like you activated GZoom!")},
			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)},
		}
	));

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.

Specifying the position of the GZoom control

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

oMap.addControl(new GZoomControl(),new GControlPosition(G_ANCHOR_TOP_RIGHT,new GSize(10,10)));

Browser compatibility

You need a modern browser. GZoom has been tested with IE6/XP, Safari2/OS10.4, FF1.4/OS10.4, FF1.4.1/XP, Opera9/XP.
Not yet tested with IE7 . . .

Notes

currently supports only top-left to bottom-right dragging
doesn't support re-sizable maps -- fixed 11/21/06. NOTE: if you resize the map div via CSS you have to call map.checkResize() -- Google's rules, not mine!
on IE, you must have VML enabled for the post-zoom outline to display: see here. Thanks to Mike Williams for pointing this out.
if you're seeing wierdness on IE, check your doctype. I tested with mostly with XHTML 1.0 Transitional, and noticed some potential problems with border widths and scrolling on other doctypes.
like any GMaps application, make sure you register GUnload() on document unload. See Google's documentation if you're not sure how.

Download (v0.2, 11/21/06)

gzoom.js -- right-click --> save as
gzoom_uncompressed.js -- right-click --> save as

Next: GZoom uncompressed Source released »

Comments

Mike Williams on Jul 22

The reason that the post-zoom outline of the zoomed area doesn't show up in MSIE is because you've got VML disabled on this page. MSIE uses VML for drawing polylines.

If you enable VML, the outline polyline displays correctly.

See: http://www.google.com/apis/maps/documentation/#XHTML_and_VML

Andre on Jul 23

Mike, thanks for that, I've incorporated the fix on this page.

Mike N on Jul 26

Andre,

I'm looking to implement this type of functionality on a static image. Would your component work with that?

Andre on Jul 26

Mike N: This control is GMaps specific, so it wouldn't work on a static image. A similar component for static images would use some of the same principles though.

Andre

Scott on Jul 31

Hi,

I'm interested in tracing a 'veil' over regions on a google maps control.

ie. I'd like to break up a city into regions, and then trace those regions across a zoomable, workable google maps control. The user can then select a number of regions by clicking a marker perhaps...

Is this possible?

Andre Lewis on Jul 31

Scott, it's definitely possible, you'll want to use polylines. Check out http://maps.huge.info/trace.htm or do a google search on Google Maps Polylines

John on Aug 03

Which javascript obfuscator are you using?

Andre Lewis on Aug 03

John: I'm using Dean Edward's Packer -- more for the compression than the obfuscation. I use the .NET stand-alone tool, and configure some build scripts to put the license text header on the file, otherwise packer strips it out. I can put up the unpacked source too if people are interested.

Adamus on Aug 05

Nice component - well done!
I would like to have the source code - I want to add possibility to go back to previous zoom position as a button on map (user zooms with your component and then returns to previous zoom position)

Is it possible to zoom with your component by using right (not left) mouse button?

Chad on Aug 16

Yes, please post an unpacked version if you don't mind.

Andre on Aug 16

Adamus: I think this is possible, and something I will try to do for a future version. Other people have brought up this capability too.

Chad: you got it, I'll put up the full source shortly -- if not tonight, then tomorrow.

Moua Xiong on Aug 17

Great control. I found it very useful and easy to implement. However, have you noticed that once you've zoomed into an area and if there are markers on the map with some text set to its openWindowHTML and the marker is clicked after you've zoomed in, the map will shift way up pass the openwindow? I do not know what could be causing this but could you debug and let me know on what I can do to fix it?

G. on Aug 23

There seems to be a problem in IE when the map is centered or placed in a table. Check http://69.16.231.130/center.html (I'm using IE6). The exact same thing without it centered is at http://69.16.231.130/nocenter.html and it works fine.

Andre on Aug 23

G: instead of wrapping the map div in a center tag (which is deprecated as of HTML 4), set the left and right margin of the map to "auto" via css:

Yes, that does seem like a better way of doing things. Thanks.
There's a couple other little things I've noticed:
1. in Firefox the crosshairs don't revert back to the cursor pointer after zooming.
2. in IE when you press zoom you see the box from the previous zoom.

swetha on Aug 23

Hi,
I am a student and I have to do the same kind of zoom in/ zoom out with my campus map. Is it possible to use the GZoom for my purpose? or does it work only with google maps?

I am programming in cgi/perl and my campus map is eps format one. If the format of the map is a problem, I can change it.Please help me..
Swetha

Rene Husken on Aug 24

Zoom is a nice tool and a test is visible on my new website www.mapstars.com./promoting locations related to tourism & travel. With few knowledge of Java and programming I could change the script for my purpose. Now see what I can do more with the script and concept.
Rene Husken/Netherlands

Andre on Aug 24

Moua Xiong: I haven't seen that, if you point me to an example page I'll take a look.

G: The IE thing, yes I've seen that. The firefox pointer thing I haven't seen -- are you using the latest version of FF?

swetha: You need to switch to Google Maps to use GZoom.

G on Aug 27

I was using FF 1.07, upgraded to 1.5 now that doesn't happen.

Back to the centering thing. http://69.16.231.130/center2.html uses the div with auto margins as suggested. The location of the dragging box still gets wonky if you resize the browser window.

Thomas on Sep 11

Hi,
thank you for GZoom and the sources of it. I made a german version. You can see it on our german geocache website cache test dummies. GZoom is the Button "Rec.Zoom" on the right side of our coordinates-map.

Thailon on Oct 01

Hallo everybody, I have the problem because of JS error (the same like on this home page : document.*.name is null or not a object. In FF, Javascript console has problem with v\:* {

Could anybody help me with ?
Thank you, Peter

Detlev on Oct 05

Hello Andre,
thanks for GZoom as a very nice/useful/powerful Google Maps Control. You can find it now on my gallery website.
thanks again Detlev

katalog on Oct 15

Andre on Oct 15

@katalog: is the error stopping your page from working? I get the error too with FF, but it doesn't keep the page from working properly. What version of FF are you using?

Another option is to wrap the v\:* .... code in a conditional comment, so only IE sees it. See http://www.quirksmode.org/css/condcom.html for info on conditional comments. Also take a look at the source at http://wifi.earthcode.com -- I use the conditional comment technique there.

Hope this helps. -- Andre

Jonas on Oct 22

I tried this with Opera 9 and it seems that it does work well.

Pozycjonowanie on Oct 26

Andre on Oct 26

Pozycjonowanie: others have reported that behavior too. I think the answer is to close any open info windows before zooming. I'll incorporate this into the next version (unfortunately I probably won't get to it for a bit).

Axel on Nov 02

great script !!

Would it be possible to know (through your script)the coordinates of the two opposite corners of a zoom-rectangle you choose. I need this for my project since I want to identify which markers on the map are located inside the zoom-rectangle .. thank you
Regards
Axel

Andre on Nov 02

Axel: if you're willing to go into the source code, it's pretty easy to get the coordinates of the zoom rectangle. On line 191:

oBounds=new GLatLngBounds(sw,ne);

The oBounds object defines the bounds of the rectangle the user just dragged. Call out to your own function at this point and do whatever you need to do with the bounds.

http://www.google.com/apis/maps/documentation/reference.html#GLatLngBounds

scott on Nov 06

Great Zoom tool. I'm currently using it on a fixed map page but would really like to incorporate into a resizable map. Any idea when this might be worked in?

Cris on Nov 07

Hope this will help someone. I have some dynamic content above the map and the map (top) position is always changing and this was making the select rectangle appear at some distance from the cursor. With my modifications the control's divs positions are recalculated every time the zoom button is pressed.

GZoomControl.prototype.initCover_=function(){
var G=GZoomControl.G;
if (G.mc.style.display=='block'){ // reset if clicked before dragging
GZoomControl.prototype.resetDragZoom_();
} else {
G.oMapPos=acl.getElementPosition(G.oMap.getContainer());
GZoomControl.prototype.setDimensions_();GZoomControl.prototype.initStyles_();

G.oButton.innerHTML='Drag a region on the map';
G.oButton.style.background='#ff0';
acl.style([G.mc],{display:'block',background:G.style.sColor});
debug("done initCover_");
}
};

Andre on Nov 07

Scott: Cris's code above should handle resizable maps as well (I think, I haven't tried it), as long as you don't resize the map while GZoom is active.

Cris: thanks for that. I've been crazy busy, and haven't had a chance to do anything new with GZoom.

I'm going to try to look at some of the requests and enhancements next week.

Cheers,

Scott Oelfke on Nov 09

Amazing control. Worked like a charm as soon as I put it in my page. Thank you.

Geoff Hopson on Nov 20

I tried using the fix from Chris above, but to no avail. On Firefox, when I click on zoom, then on the map, the top left corner appears about an inch to the right of the mouse click. Works like a charm in IE and Safari, but Firefox...weird.

Any ideas?

Mike on Nov 25

Thanks for this great addition to GMap controls. It works like a charm.

vorken on Nov 27

Hi Mate..GZOOM is great but the latest version (11/21/06) I'have downloaded today (27/11/2006) seems no working with IE version 6.0.2900.xpsp_sp2 (just reinstalled xp prof with sp2)
Also the map on your site doesn't work.
On FF is great but IE give us grey map..
No problem with the old version.
I used
html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
in both versions
gogogo mate =) you rock!!

Andre on Nov 27

vorken: thanks for the heads up, I fixed the IE problem. Tested on IE6/XP.

Axel E. Christensen on Nov 28

Hi Andre
I have tried to use GZoom on a map with a large number og markers build up with "custom tiles" similar to http://googlemapsbook.com/chapter7/ServerCustomTiles
BUT GZoom does not seem to work on this. Do you have any explanation to this ?
Thanx
Axel

Volker on Dec 05

GZoom is a very useful application. Thanks for it.
My question: Is there a special experience at Netscape 8.1.2?

Luberth Dijkman on Dec 12

Hello
having a problem with gzoom
not sure if its a gzoom problem or something i have created

after using zoom
links in another layer doesnt work
in mozilla 1.7.13
see
http://www.luberth.com/FullWindowGoogleMaps.php
does not hapen in ie7

greetings luberth

James on Dec 22

Is there any way of disabling the post-zoom box completely on all browsers?

I don't have the VML declaration in my page but it stil shows post zoom in FF.

Also, in IE6 I get an error if I don't declare the vml in the header: Line 29: Unexpected call to method or property access.

Here's the page:
http://holidaychateau.accommodia.co.uk/googlemapproperty_v2.php?property=2285
And here's a link to my main processing js:
http://holidaychateau.accommodia.co.uk/googlemap.js

Annegret on Dec 24

@ Luberth Dijkman
In IE6 your Website hang-up.

qazeem on Dec 28

i really need to use the GZoom Control outside the map by clicking on an static image.

is it so difficult to implement a function, that does this?

can anybody help me, i am not so fit in JS.

leon on Jan 08

Custom Zoom Controls working perfect in Firefox as well as Explorer on Mac and XP.

Thank you very much for the clear explanation, took me only minutes to implement, kind regards, Leon

http://krijnen.com/googlemaps.shtml

FatMonk on Jan 16

Superb little gMap addition, but I'm having a bit of trouble with it in IE6 and Opera 7 (WinXP) - I haven't tried SeaMonkey yet, but thats not really a priority at the mo.

In IE everything (overlay and area marker) is shifted 50% of the width of the map...

In Opera the overlay is 100% opaque so you can't see where you are drawing the zoom area.

You can see the problem on this page:
http://www.gonmad.co.uk/satnav_poi.php?v=2.4

It works perfectly in FF though....

-FM

PS If someone can give me a clue how to add an extra button in the same style as the map/satellite/hybrid buttons and trap a click of it, I'd much appreciate that too coz I'd like to add a 'Print' button.

Andre Lewis on Jan 21

FatMonk: GZoom doesn't work in opera 7 -- works in Opera 9+ plus though, AFAIK. IE6 and 7 should work, because other instances of GZoom work -- I see there is a problem on your map though.

Tanie linie lotnicze on Jan 25

Gzoom works in Opera 9!

Tony Montana on Jan 28

Hi. I cant get it to work on my site: http://www.nqccs.com.au/vitamin2.htm
Could someone edit my code and show me how to add it? Thanks.

Chimbu on Feb 18

Hi,
First, thanks for he wonderful GZoom, In my application, I would like to use the zoom option with the following condition:

when i select a region (draw the rectangle):
1)the map should not zoom-in but just needs to draw the rectangle
2)the rectangle should not disappear
3)when I draw another rectangle, the previous one needs to be cleared.

ie, I would like to use the draw rectangle option just for selecting a region and get the coordinates

Any help is greatly appreciated.

Thanks!

pete on Feb 28

Hi, great tool. Is there a way to disassociate the box's ratio to that of the map window? In other words, can the box be somewhat freeform and allow a user to create either a rectangle or square, depending on the extent they'd want to window in on (but not necessarily zoom to).

I'd like to allow users to define an area (square, rectangle) using GZoom and enter those coordinates into a geodatabase. Whether or not it could zoom to that exact location wouldn't be critical.

Thanks.

Andre on Feb 28

Pete, you could disassociate the box's ratio from the map's ratio by hacking around in the code. There's extra code in there to detect the map's aspect ratio and enforce the same dimensions on the draggable area.

Mark on Mar 05

Thank you very much for this excellent control Andre.

I also had overlay alignment problems and found that the css style for the map was incompatible with GZoom. The overlay didn't like these settings:

padding-top: 14px;
padding-bottom: 30px;

As it happens I didn't need them so I dropped them. I also found that setting

text-align: left;

for the map style prevented any inherited "center" alignment which minimised any changes I had to make elsewhere.

Thanks again, excellent work,
Cheers,
Mark

Mark on Mar 09

I found that the "zoom ..." box wrapped into two lines on Firefox, although not on IE. I changed the width to 68px and now it displays as a single line on both.

Mark on Mar 21

Does anyone know how to fix this error message that appears in IE when you use the Gzoom button:

Line: 29
Char: 18
Error: Unexpected call to method or property access
Code: 0
URL: http://krijnen.com/googlemaps.shtml

Cheers,
Mark

kostenlos Versicherungsvergleich on Mar 23

Thank you for the great article. Greetings from Germany.

christos on Mar 27

This is great work. Thank you for sharing. I am using on my website and it works great.I was wondering if there is a way to capture the last zoom position in order to provide a zoom back button.

leon on Apr 14

@Mark; saw your comment today, but the zoom function is working allright in my IE7

fee on Apr 17

Hi,.
First, thanks for he wonderful GZoom, In my application, I would like to use the zoom option with the following condition:

Thanks!.

Andre on Apr 21

@Fee, you should be able to get some pointers from the GZoom source code. In particular look at the end-of-dragging callback function -- that's where the coordinates of the box are extracted.

Good luck,

Al on May 13

Andre: Given that the selection box gives you the coords of the area selected, how is it possible to determine if a point is within that area?

Example: Box gives coords: NE=(26.641321416596867, -79.9530029296875);SW=(26.502530898533244,
-80.16036987304687)

I have a point 26.580276,-80.123012. What would be the formula for figuring out if it's within the selected area?

Andre Lewis on May 14

Al, you can do this directly through the GMaps API -- see the GLatLngBounds.contains() method.

Enrico on May 16

Hi, is it possible to have more than one GZoom Control on a map ? With one GZoom control I have to select an area (to get the selected area coordinates) and with another GZoom control I have to zoom the selected area.

Thanks for your help.

nakashima_mika on Jun 03

Hi all,
With regards to the alignment issue with IE, I have a workaround which will help.

jquery codes:
$('#gzoom-map-cover').css('left', '0px');
$('#gzoom-map-cover').css('top', '0px');

pure javascript codes:
document.getElementById('gzoom-map-cover').style.left = '0px';
document.getElementById('gzoom-map-cover').style.top = '0px';

Reason being IE will render the default css for left and top to AUTO, which has a BIG issue with this add-on.

Nevertheless, this is a kickass addon and I am still using it. Thanks Andre!

domy drewniane on Jun 13

Rohith g on Jul 23

Hi friends,

I need to do Zooming option by just clicking on the map rather than dragging.
SO if any one is having solutions for this , please do send it to me.

sohbet on Jul 23

Thanks for your help.
hALoooo

Desenie on Jul 26

Really great tool. Keep up the great work! Thanks

Alper Dinçer on Jul 26

I want to use DragZoom control outside the map, not as a control. I'm preparing a toolbox outside the map and how can I integrate this component to my toolbox?

Thanks,

Alper.

sohbet: you will only be able to put one GZoom on the map at a time.

Alper: You will have to hack the JavaScript code to make this happen. It shouldn't be too hard though -- you can hook into the events GZoom broadcases (see the API) for a lot of it. Good Luck!

oyunlar on Aug 06

Andre on Aug 06

oyunlar -- currently DragZoom has to live inside the map as a control. You could hack it to work outside in the toolbox fairly easily if your proficient in JavaScript however.

fitzxp on Aug 27

Question to everyone. I have a pair of lat lon that top left right and bottom right corner I would like to have the system take those cords and zoom into the map as best possible but keeping that frame visible. Any suggestions?

Fitz

Thomas on Sep 14

hi there

see standalone-map at
http://www.ue30-clan.de/user/user_map.php?width=750&height=305
(implemented on http://www.ue30-clan.de/user/index.php?action=userlist )

I use
http://gmaps-utility-library.googlecode.com/svn/trunk/dragzoom/release/src/
,has correct doctype and the ms-vml-thingies.

drag-n-zooming works fine in FF - but in IE6 everything your code generates (semitransparent layer, zooming-rectangle) has a x-offset half the width of the map-div.

if i try and use old (?) version of js:
http://gmaps-utility-library.googlecode.com/svn/trunk/dragzoom/1.2/src/

zooming does not work, BUT it places your layers (eg the red rectangle) correctly.

got any ideas?

Thanks
Thomas

Thomas on Sep 17

in response to comment 74:

found the problem.
if the map-div is WITHIN a table/td your dhmtl fails to align properly.
if i put the map.div just within the body things work fine.

dont know whats the problem exactly

to test (without any pins placed)
working (map-div just within body):
http://www.ue30-clan.de/user/user_map.php?width=750&height=305&showUser=999

notworking (map-div is within the table):
http://www.ue30-clan.de/user/user_map_buggy.php?width=750&height=305&showUser=999

greetings
Thomas

evden eve nakliyat on Sep 20

Iban Borràs on Oct 03

(Sorry for my translation english :-P)

I have needed to modify your wonderful DragZoom to allow that the rectangle is not restricted to the proportion of the map. I have created the new option “restrictedRectangleMap” for it (line 141) and modified the function getRectangle. If you wish it, you can incorporate it to the development branch. The complete code you have it in: http://viewat.org/js/dragzoom_mod.js

The effect of the modification you can see it in:
http://viewat.org/

Iban Borràs on Oct 05

(Sorry for my translation english :-P)

Another thing, I have had to modify the names of varialves "zoomLevel" and "center" in the function "mouseup" because IExplorer are idiot. These names caused an error to me only in IExplorer.

Not if it is only problem mine:

drg_zoomLevel = G.map.getBoundsZoomLevel(polyBounds);
drg_center = polyBounds.getCenter();
G.map.setCenter(drg_center, drg_zoomLevel);

proxy site on Oct 16

...I want to use DragZoom control outside the map, not as a control. I'm preparing a toolbox outside the map and how can I integrate this component to my toolbox?...

Xin on Oct 22

Iban Borràs, I wish I had seen your comment before I implemented it myself!

Just to clarify. With GZoom, when drawing a boundary to zoom into, it is a fixed ratio rectangular box. If you wish to use any shaped boundary, have a look at Iban Borras's modification.

If you want to tweak the code yourself, like I have, go to function getRectangle_, on line 556.

In the return hash, change to the following:
endX: startX + dX,
endY: startY + dY,
width: dX,
height: dY

Keep the other values as they are.

Hope that helps someone.

sandhya on Nov 23

hi,
I have used above control for zooming on selection of area.
But in this control is placed on map.
I want this control in my navigation toolbar.

Is this possible??
Please Reply me you have any idea.
Its very urgent.

Thanks,
San

Nicolas on Nov 26

Hello,

Do you think that it's possible to modify the GZoom to be able, when the zooming mode is set, to click and the markers to display infowindows ?

If anybody have an idea.....

Thanks a lot

Nicolas

Andre Lewis on Nov 26

@sandhya: it's defintely possible, but you'll have to get into the code. If you're comfortable with JavaScript you can get rid of the control as it displays on the map, and wire the events to external DOM elements.

Quite a few other folks have asked for the same thing -- it may be worth posting to the Google Group to see if anyone has made these changes.

@Nicolas: that's an interesting idea. It may be possible by adding the overlay div (the thing that receives the click event) to a layer of the map, rather than adding it on top of the map. Basically, GMap has different layers. If you can add it to the appropriate layer, and the event capturing works out right, it might work. You want the layer that is above the map tiles but underneath the markers. Let me know if it works out.

You might also hit some usability problems if a user misses a marker by a few pixels and the map zooms in radically as a result. You could probably counteract that by setting a minimum size for the zoom-to rectangle.

Nicolas on Nov 30

Thanks but I tried with JS to put the layer just underneath the markers with this code
[code]
var coverDiv = document.getElementById('gzoom-map-cover');
var mapResultDiv = document.getElementById('mapResult');
mapResultDiv.childNodes[0].childNodes[0].appendChild(coverDiv);
[/code]

But it works just on firefox and this puts a lot of problems, the map is mixing the zoom and drag movement.
Basically you're dragging (you can see the zoom layer moving) and when you release the mouse, you're zooming on a no-sense area.

So I think it's not possible to change the zoom layer position without breaking the map behavior. Or perhaps I didn't put it at the correct position ?

PS: The min size for the zoom rectangle is already set but anyway the pointer of the mouse change when you pass over a marker.

And thanks a lot for gzoom it's cool tool and I learned a lot thanks to this.

sandhya on Nov 30

have u any idea about following error:

Sys.WebForms.PageRequestManagerServerErrorException: An unknown error occurred while processing the request on the server. The status code returned from the server was: 500
Following all possibilities are done but still there is error:
.Added “ValidateRequest="false" in Page Directive.

2.Increased Session time out.

When I have searched on this I found that it is due to IIS setting.

Can you suggest me what IIS setting is required or Can recycle all pools after some interval automatically???

san on Nov 30

Frankly speaking I am not expert in javascript.

So Can you give me any link or reference where I will get code for external zoom to selection control?
I have searched on google groups also.

San

hosting on Dec 07

I think it's very useful article. I will have to try gzoom finally and start using it on my sites.

Антивирус on Dec 15

gry on Jan 14

I am not expert in javascript.
So Can you give me any link or reference where I will get code for external zoom to selection control?

Mike on Jan 22

Great control. I found it very useful and easy to implement.

Greetings from Germany

evden eve nakliyat on Feb 22

think it's very useful article. I will have to try gzoom finally and start using it on my sites.

Oyun İndir on Feb 25

I am not expert in javascript.
So Can you give me any link or reference where I will get code for external zoom to selection control? thank you

Jangla on Apr 08

I have a site that allows users to hide the map controls. Only thing is, I can't figure out a way of hiding the GZoom control. Is there a way?

Is there any way of specifying the ID of the zoom control? I have a site that needs two controls but they are automatically given the same ID name. I need to hide one of them at times and therefore need to specify the ID name ndividually so I can hide the right one.

Like this?

Recommend me on Working With Rails

Last Five Posts

Hotspotr partners with LightPole for mobile
deprec2: Mongrel, nginx, Rails, mysql on Ubuntu 7.1
Cheap Rails VPS options
PostgreSQL on Leopard gotchas
Geocoding Advanced Rails Recipes

My Book

Available now from Apress

My WiFi site

Top cities: San Francisco WiFi; Portland WiFi; Charlotte WiFi

Name:
Email Address:
URL:
Comments: (HTML OK)
	Please enter the word 'human' below (required) This is so filters can reject the spam-bots. Thanks!

Andre Lewis on Tech

Rails, JavaScript, Maps

GZoom drag-to-zoom Google Maps control