This is Part 3 of a week long series featuring code for the Google Maps API.

When I was planning tonight’s post I was having all sorts of fun looking at optomizing the addOverlay function. This function, when used again and again with hundreds of points slows things down very quickly. The code, which is all the rage on the Google Maps API mailing list, can be found at the above page (copied below for completeness):

GMap.prototype.addOverlays = function( a ) {
  for ( var i = 0; i < a.length; i++ ) {
    this.overlays.push( a[i] );
    a[i].initialize( this );
    a[i].redraw( true );
  }
  this.reOrderOverlays();
};

One problem, though – this feature is no longer going to be needed in the new version of the API. Which is a very good thing. So, that killed my original article for tonight. However, a new topic just so happened to fall in my lap: Advanced Mouse Control.

The one hack that I really like, that was posted to the Google Maps API mailing list, was the ability to zoom in using your middle scroll wheel. It feels incredibly natural and is a lot of fun to play with – you can view a demo here.

After doing some more digging around I realized that no one has built any sort of good, natural, support for the following mouse actions: Double Clicking, Right Clicking, and Middle Clicking. So, I went about to do just that. I waded through the API code for a while and finally acheived a result that I like. All of the events can be used with absolutely no extra code, observe:

var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(-122.4419, 37.4419), 4);

GEvent.addListener( map, "dblclick", function(p){
  map.addOverlay( new GMarker( p ) );
});
GEvent.addListener( map, "rightclick", function(p){
  alert( "Right!" );
});
GEvent.addListener( map, "middleclick", function(p){
  alert( "Middle!" );
});

As you can see, the events behave exactly as a ‘click’ event would – except no overlay information is passed in the arguments. The only argument passed along is the current lat/long of where the click was made – from which a lot can be done.

One functional change that I made was to disable the ‘pan’ animation that occurs when you normally double-click. If you attach any listener to “dblclick” then that ‘pan’ will no longer fire – which is a smart move, in my opinion.

To make the above code work, all you have to do is include this file in your header, just after you include the Google Maps API, like this:

<script src="http://maps.google.com/maps?file=api&v=1&key=key" type="text/javascript"></script>
<script src="gclick.js" type="text/javascript"></script>

And that’s it – you’ll be ready to go from there! If you’re interested in viewing a very quick demo, using the above code, click here.