Scroll Zoom Function

[lordal...@gmail.com]

I've been working on a Scroll Zoom Function the last two days and
Managed to get it to work with GMapEZ.

The code is mostly assembled from other snippets on the internet.

I've tested this on the newest Firefox (2.0.0.1), IE (7.0.5730.11) and
Opera (9.10 Build 8679).

Sadly I have no Apple to test it on Safari. If someone would try it out
and lemme know if it works and which specific Safari version you use.
The same goes for other browsers.

This isn't the exact same functionality as http://maps.google.com
employs but simulates it to a degree. It's exact effect can differ
slightly from browser to browser or it might not work at all.

Add the following Method:

// Start Zoom at Cursor on Scroll method
EZMap.prototype.onScroll = function(ScrollEvent) {
if (ScrollEvent.cancelable) {
ScrollEvent.preventDefault();
}
if (ScrollEvent.detail) {
var zoom=ScrollEvent.detail;
} else if (ScrollEvent.wheelDelta) {
var zoom=-ScrollEvent.wheelDelta;
}
if ( zoom ) {
var m = this.map.fromLatLngToDivPixel(new
GLatLng(mouselat,mouselng));
var c = this.map.fromLatLngToDivPixel(this.map.getCenter());
if (zoom < 0) {
var x = c.x - ((m.x - c.x) * -.5);
var y = c.y - ((m.y - c.y) * -.5);
var n = this.map.fromDivPixelToLatLng(new GPoint(x,y));
this.map.setCenter(n);
this.map.zoomIn();
}
if (zoom > 0) {
var x = c.x - (m.x - c.x);
var y = c.y - (m.y - c.y);
var n = this.map.fromDivPixelToLatLng(new GPoint(x,y));
this.map.setCenter(n);
this.map.zoomOut();
}
}
};
// End of Zoom at Cursor on Scroll method

And add the following to the EZMap.prototype.initParse method (must be
after the this.map declaration):

// The Event handlers for Zoom at Cursor on Scroll
GEvent.addListener( this.map, 'mousemove', function(point) {
mouselat = point.y.toFixed(6);
mouselng = point.x.toFixed(6);
});
GEvent.bindDom( this.div, 'DOMMouseScroll', this, this.onScroll
); //Firefox
GEvent.bindDom( this.div, 'mousewheel', this, this.onScroll ); //
IE + Opera
// End of Event handlers for Zoom at Cursor on Scroll

Or use this file:
http://google-maps-ez.googlegroups.com/web/gmapez-2.scrollzoom.js

[AgapeDisciple]

Sweet! Works great with FF 2.0.0.2 and IE 6.0.2900.2180.....

BTW, anyone that wants to use it, just make sure that replace the
normal link to the GMapEZ script link with the link above.

http://bluweb.com/chouser/gmapez/gmapez-2.js
---> http://google-maps-ez.googlegroups.com/web/gmapez-2.scrollzoom.js

The page scrolls with the map in IE, but most gmap pages that will use
this take up the just one screen anyway. The page doesn't scroll with
FF unless you scroll faster than the maps load. This is awesome!

Thanks!

GOD Bless,
Logan

On Jan 25, 8:43 am, "lordalder...@gmail.com" <lordalder...@gmail.com>
wrote:
> I've been working on a ScrollZoomFunction the last two days and

> Managed to get it to work with GMapEZ.
>
> The code is mostly assembled from other snippets on the internet.
>
> I've tested this on the newest Firefox (2.0.0.1), IE (7.0.5730.11) and
> Opera (9.10 Build 8679).
>
> Sadly I have no Apple to test it on Safari. If someone would try it out
> and lemme know if it works and which specific Safari version you use.
> The same goes for other browsers.
>

> This isn't the exact same functionality ashttp://maps.google.com

> employs but simulates it to a degree. It's exact effect can differ
> slightly from browser to browser or it might not work at all.
>
> Add the following Method:
>

> // StartZoomat Cursor on Scroll method

> EZMap.prototype.onScroll = function(ScrollEvent) {
> if (ScrollEvent.cancelable) {
> ScrollEvent.preventDefault();
> }
> if (ScrollEvent.detail) {
> varzoom=ScrollEvent.detail;
> } else if (ScrollEvent.wheelDelta) {
> varzoom=-ScrollEvent.wheelDelta;
> }
> if (zoom) {
> var m = this.map.fromLatLngToDivPixel(new
> GLatLng(mouselat,mouselng));
> var c = this.map.fromLatLngToDivPixel(this.map.getCenter());
> if (zoom< 0) {
> var x = c.x - ((m.x - c.x) * -.5);
> var y = c.y - ((m.y - c.y) * -.5);
> var n = this.map.fromDivPixelToLatLng(new GPoint(x,y));
> this.map.setCenter(n);
> this.map.zoomIn();
> }
> if (zoom> 0) {
> var x = c.x - (m.x - c.x);
> var y = c.y - (m.y - c.y);
> var n = this.map.fromDivPixelToLatLng(new GPoint(x,y));
> this.map.setCenter(n);
> this.map.zoomOut();
> }
> }
> };

> // End ofZoomat Cursor on Scroll method

>
> And add the following to the EZMap.prototype.initParse method (must be
> after the this.map declaration):
>

> // The Event handlers forZoomat Cursor on Scroll

> GEvent.addListener( this.map, 'mousemove', function(point) {
> mouselat = point.y.toFixed(6);
> mouselng = point.x.toFixed(6);
> });
> GEvent.bindDom( this.div, 'DOMMouseScroll', this, this.onScroll
> ); //Firefox
> GEvent.bindDom( this.div, 'mousewheel', this, this.onScroll ); //
> IE + Opera

> // End of Event handlers forZoomat Cursor on Scroll