Monday, September 14, 2009

Introducing ContextMenuControl 1.0: Give Your Users the Power of Right-Click

My name is Wolfgang Pichler. I have been developing with the Google Maps JS API for a few years now, posting in the forums and publishing my various experiments for others to learn from.

When a user right-clicks on Google Maps, a context menu appears with options like getting directions, zooming in, or finding the address of the center point (reverse geocoding). Since I wanted this helpful feature in my own maps, and the core API does not provide it, I decided to implement a fully open-source version and release it in the utility library: ContextMenuControl.

This control includes all the same items as the native Google Maps control, but I've implemented the directions functionality in a different way. Instead of requiring the developer to provide a panel and inserting the directions steps there, I create infowindows that the user can step through. Now, any developer can use this control and not worry about having to allocate space on their page for the directions steps. The directions functionality also includes the ability to add, remove, and drag points, so that the user can easily customize their query.

The result is a control that's easy for users and easy for developers, and is probably the fastest way to add reverse geocoding and directions functionality to your map (especially if it's a small map). Just include the script tag for the source code, insert this line in your map init function, and you'll get a right-click menu like the screenshot shows below:

  map.addControl(new ContextMenuControl());

For more information, read through the reference and developer's guide. For other open-source extensions that can enhance your mashup, check out the utility library. Enjoy giving your users the power of right-click!