Question

This page describes The Default Control Set for Google Maps V3 API: http://code.google.com/apis/maps/documentation/javascript/controls.html#DefaultUI

I am interested in taking over PanControl’s click event and bind it to my custom function.

For example, when user clicks on Pan Left (Up/Right/Down) UI control, not only map’s viewport changes, but also function A is called.

As I imagine, one way of doing this, would be to listen to Map’s click event and check it’s target?

Any suggestions/examples (particularly helpful) on how this can be done?

Answer 1

Your assumption (listen to Map’s click event and check it’s target) sounds correct, as there is no implementation for accessing the controls .

This works for me(now):

google.maps.event.addDomListener(map.getDiv(),'click', 
             function(e) 
             {
                var t=e.target,
                    a=[null,'left','right','up','down'];

                if(
                    t.parentNode.parentNode.hasAttribute('controlwidth')
                      &&
                    t.parentNode.childNodes.length==5
                      &&
                    t.parentNode.firstChild.tagName=='IMG'
                      &&
                    t.parentNode.firstChild.src
                         =="http://maps.gstatic.com/mapfiles/mapcontrols3d7.png"
                  )
                  {
                    for(var i=1;i<t.parentNode.childNodes.length;++i)
                    {
                      if(t.parentNode.childNodes[i]==t)
                      {
                        alert('You\'ve clicked on \n>>>'+a[i]+
                              '\nyou may call a function now.');
                      }
                    }
                  }
             });

http://jsfiddle.net/doktormolle/fwgMy/

But it only works until Google will modify the markup, and this may be tomorrow.

A better approach would be to hide the pan-control and create your own control.