is there any "enableDragging()" for Google Map api v3

212 views
Skip to first unread message

Bimal

unread,
Sep 5, 2009, 5:32:27 AM9/5/09
to Google Maps JavaScript API v3
Hello
I want a link on my page to enable/disable map. Map will cannot be
dragable by default. There will be a link on homepage to make map
dragable. I got v2 help which is "enableDragging()" but I need v3 code
for this.

Thanks

Esa

unread,
Sep 5, 2009, 7:05:25 AM9/5/09
to Google Maps JavaScript API v3


map.setOptions( {draggable:false} );
map.setOptions( {draggable:true} );

bratliff

unread,
Sep 5, 2009, 9:55:56 AM9/5/09
to Google Maps JavaScript API v3
On Sep 5, 11:05 am, Esa <esa.ilm...@gmail.com> wrote:
> map.setOptions( {draggable:false} );
> map.setOptions( {draggable:true} );

Unfortunately, "doubleClickZoom" cannot be controlled unless I am
missing something.

Esa

unread,
Sep 5, 2009, 3:21:42 PM9/5/09
to Google Maps JavaScript API v3


On Sep 5, 4:55 pm, bratliff wrote:

> Unfortunately, "doubleClickZoom" cannot be controlled unless I am
> missing something.

I think I found a dirty hack. It seems to be the parent <div> of the
map panes that gathers the mouse events like 'dblclick'. I managed to
kill doubleclick by:

google.maps.event.clearListeners(
document.getElementById("pane_0").parentNode, 'dblclick');

That must be done after the panes are built. There may be more
sophisticated ways to access the <div>.

Oops! We hijacked the thread.

bratliff

unread,
Sep 5, 2009, 4:17:38 PM9/5/09
to Google Maps JavaScript API v3
Actually, I am doing the same thing for a "mousemove" event listener
but it requires knowledge of the DOM which has changed twice in the
past month.

www.polyarc.us/event.html

bratliff

unread,
Sep 5, 2009, 4:40:28 PM9/5/09
to Google Maps JavaScript API v3
On Sep 5, 8:17 pm, bratliff <bratl...@umich.edu> wrote:

> Actually, I am doing the same thing for a "mousemove" event listener
> but it requires knowledge of the DOM which has changed twice in the
> past month.
>
> www.polyarc.us/event.html

OOPS - bad URL. Should be:

www.polyarc.us/polycluster/event.html

I use:

l=this.get_map().getDiv().childNodes[0].childNodes[1];
l.style.display="";
l.style.zIndex=1;

Actually, I hijacked the thread but you had already answered the
question.

Esa

unread,
Sep 5, 2009, 5:32:16 PM9/5/09
to Google Maps JavaScript API v3
You have really an impressive library of functions.

Esa

unread,
Sep 6, 2009, 11:35:57 AM9/6/09
to Google Maps JavaScript API v3

I did not find if you have a function to calculate pixel position of
an overlay on map.

Now when CSS3 'transform' property is used for panning the map,
offsetTop and offsetLeft properties give you wrong information. They
don't contain the offset made with CSS transform.

I have not found any DOM method that could be used for calculating the
actual position on map.

document.defaultView.getComputedStyle(elementUnderTest,
null).MozTransform;

returns a string like:

"matrix(1, 0, 0, 1, 600px, 300px)"

I tried parsing that and added that to the position finder function of
PPK from quirksmode.org

function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {var trans = document.defaultView.getComputedStyle(obj,
null).MozTransform;
if(trans){
trans = trans.split(",");
var transX = parseInt(trans[4]) || 0;
var transY = parseInt(trans[5]) || 0;
}
curleft += obj.offsetLeft;
curleft += transX;
curtop += obj.offsetTop;
curtop += transY;
}while (obj = obj.offsetParent);
}
return {x:curleft, y:curtop};
}

It seems to return correct values with FF3.5 but it is an ugly hack. I
have not studied Webkit yet and even thinking about IE makes me feel
sick.

We would need an official LatLng.toPoint() method.

bratliff

unread,
Sep 6, 2009, 2:45:25 PM9/6/09
to Google Maps JavaScript API v3
On Sep 6, 3:35 pm, Esa <esa.ilm...@gmail.com> wrote:

See issue 1651:

http://code.google.com/p/gmaps-api-issues/issues/detail?id=1651

Internet Explorer behaves differently than the other browsers (what a
surprise).

PolyCluster.prototype.click=function(e)
{
var x=window.event ? window.event.x : e.layerX;
var y=window.event ? window.event.y : e.layerY;

e=window.event ? window.event.srcElement : e.currentTarget;

for (;(!e._)*(!!e.parentNode);) e=e.parentNode;

if (e._) e._.clickCallBack({x:x+e._.X-(e._.X_>>1),y:y+e._.Y-
(e._.Y_>>1)},e._.Z);
}

Because the "this" property refers to the "in-play" element rather
than to the OverlayView object, I have to retain a back reference to
the "this" property of the OverlayView object. It contains the DIV
pixel offsets. I have to loop back through parent nodes in order to
find it.

e._ is "this" for the OverlayView object.
e._.X is the center X position.
e._.Y is the center Y position.
e._.X_ is the width of the DIV.
e._.Y_ is the height of the DIV.
x is the X pixel offset of the click.
y is the Y pixel offset of the click.

Firefox calculates "x" & "y" relative to the DIV containing the tile.
Internet Explorer calculates "x" & "y" relative to the parent DIV. In
order to make Firefox calculate pixel offsets correctly, I have to
expose an otherwise hidden but empty DIV covering the tiles.

l=this.get_map().getDiv().childNodes[0].childNodes[1];

l.style.display="";

l.style.left=0+"px";
l.style.top=0+"px";

l.style.width="100%";
l.style.height="100%";

l.style.zIndex=1;

l.parentNode.onclick=this.click;
l.parentNode.onmousemove=this.cover;
l.parentNode.onmouseover=this.cover;
l.parentNode.onmouseout=this.clear;

l.parentNode._=this;

I have to place the event handlers on the parent node. Otherwise,
Internet Explorer will never see it.

Clearly, it makes sense for Google to do it to avoid the browser
dependencies & conflict with its own event listeners.

Esa

unread,
Sep 6, 2009, 5:17:39 PM9/6/09
to Google Maps JavaScript API v3
I would say, that is creative. You discovered an unused <div>, took
that and modified for your purposes. Clever.

'Your' static div is sibling to the draggable div that contains the
map panes. That draggable div is not positioned by style.left and
style.top anymore. It is positioned by CSS3 transform like:

style.MozTransform = "translate(-801px, -213px) scale(1)";

That kind of positioning does not change offsetLeft and offsetTop
values of the div. So it is very hard to find out the actual position.
I proved that it can be done by parsing getComputedStyle.MozTransform
return string with FF and probably WebkitTransform with Safari and
Chrome. IE does not support CSS3 transform, so api is using some other
technology with it.

I think I am going to take an easier way to calculate pixel positions
from the data readily available. That means duplicating Mercator
projection.

bratliff

unread,
Sep 6, 2009, 8:10:05 PM9/6/09
to Google Maps JavaScript API v3
On Sep 6, 9:17 pm, Esa <esa.ilm...@gmail.com> wrote:

I have simplified the demo:

www.polyarc.us/polycluster/event.html

by removing everything non-essential. I left the "Examine" stuff in
to look at the DOM. If you figure out something else, please post it
but clearly, Google ought to provide something.

Bimal

unread,
Sep 7, 2009, 1:14:11 AM9/7/09
to Google Maps JavaScript API v3
Thanks a lot.. That what I want..
Thanks :)

bratliff

unread,
Sep 8, 2009, 10:08:14 AM9/8/09
to Google Maps JavaScript API v3
It is broken in Firefox but working in Internet Explorer, an unusual
reversal. It may be related to recent DOM changes. It may not be
worth fixing if it will just break again. The API really ought to
provide a "mousemove" event listener for the map canvas.

Paul Kulchenko

unread,
Oct 13, 2009, 5:34:43 PM10/13/09
to Google Maps JavaScript API v3
Berry, Esa,

I put together an example that tracks mouse movements:

http://notebook.kulchenko.com/maps/gridmove

This demo works in FF and IE as well as in both v2 and v3 APIs.

I also added a circle that shows current position in FF (and other
browsers that support canvas). I had errors in IE, so it's disabled
there for now.

The logic ended up being quite simple; although I do track transform
and look at specific DOM element for offset information. An API call
to provide offset would eliminate this code.

Berry, so far I haven't encountered any conflicts with google's event
handling. Was there anything in particular that didn't work for you?
Notice that I used addDomListener as provided by the API, which might
have eliminated those issues you saw.

Paul (http://notebook.kulchenko.com/maps/)
Reply all
Reply to author
Forward
0 new messages