Tuesday, April 20, 2010

InfoBox 1.0: Highly Customizable Information Window For Google Maps API V3

I'm Gary Little, a realtor in the small town of Sechelt, British Columbia, located about 40 minutes by ferry from Vancouver. Before returning to Canada a few years ago, I worked for many years in Silicon Valley at Apple Inc. and Sun Microsystems, Inc.

I'm known around here as "Map Guy", not only for my numerous interactive maps but also my collection of antique paper maps of the west coast of North America. I've even got a car with MAP GUY plates!

My most prolific mapping project to date has been an interactive map application that shows the locations of all MLS-listed properties for sale on the Sunshine Coast (an area about 50 miles long with Sechelt at the center). You can see the application at map.garylittle.ca. I recently rewrote and simplified this application so that it works well on iPhone and Android phones. This meant migrating to theV3 Maps API. One problem I faced was that there was no easy way to create and display a custom info window when a property's marker was clicked.

To solve this problem I created a class called InfoBox. You use it just as you would a google.maps.InfoWindow but it supports several additional properties for controlling the styling of the box. You can also use an InfoBox as a map label, so it's useful for identifying landmarks that are not on the base map. InfoBox is now part of the google-maps-utility-library-v3.

The image below shows an InfoBox from my V3 real estate map at imap.garylittle.ca. It's a simple yellow box with a small arrow pointing to the property's location. A flashier box could easily be displayed through creative use of CSS styles.

To learn more about InfoBox, read the class reference and check out the examples.