Add Map Search to your site

This week I am speaking on Search APIs at the Search Engine Strategies Conference. Unfortunately, by the time I got around to reading the Hotel and Venue page, I discovered that all the recommended hotels are sold out.



When I look at that page, all I see is text (and of course a sidebar of logos for the sponsors). Where is the map? Why can't I just just search for a nearby hotel directly from this page, or search for nearby restaurants? This happens to me every time I go to a conference, like a few weeks ago when I ended up on the other side of the river from OSCON's conference center.



I called my friends over at O'Reilly and asked them if they would mind if I worked on their OSCON site a little. In the process of tinkering with it, I created a re-usable component, something that could be applied to other conference sites just as easily. The result is a Mapsearch Solution that uses the Google AJAX Search API and Google Maps API. I'm calling it a "solution" because it's a piece of code that you can use as-is, or copy and enhance to suit your needs. Take a look at the mapsearch sample to see how easy it is to add something like this to your site.

If you are already using these APIs, you already have a key and know how to include the code. Once you've done that:

1. Include the new gsmapsearch.js and gsmapsearch.css solution files


2. Create and style a div element, one for each control


3. Add a call to GSmapSearchControl(element, address, options?), one for each control. Something like:
   
   
   var container = document.getElementById("mapSearchDiv");
   new GSmapSearchControl(container, "1236 Lisa Lane, Los Altos CA");
   
   
   

If you are running a conference web site, or a hotel web site, or any sort of travel or community web site, this could be a great feature to add without much effort. And it's something your visitors will appreciate.