Search by drawing on a Google Map

During the weekend I finally got around to building a feature on the Truffler Sample site that I’ve been meaning to do for quite some time. I call it “crazy map search” as it’s A) probably not very useful in most applications and B) pretty darn cool.

For those that haven’t checked out the sample site yet, it demonstrates some of the search and filtering capabilities of Truffler by querying an index with a number of famous restaurants. The source code for the site is available for download on GitHub and it uses a read-only index so that anyone can download it and play with it without having to first create a Truffler index.

I grabbed the source code from one of the Google Maps samples that, among other things, show how to mark an area by placing a number of points on a map. I then stripped away the other examples, and adapted the code to perform a search for restaurants in the marked area. That is, as soon as at least three points have been added to the map and every time thereafter a point is added or moved the search result is updated to show restaurants within that area.

On the client side the functionality combines the points that make up the polygon into a string and executes an AJAX request to the server which responds with a partial view with the search results. On the server side the serialized points is de-serialized and the search is performed. While the whole functionality consists of about 60 lines of JavaScript and 20 lines of C# code, the actual filtering is as simple as filtering with the Within method.

Check out Crazy map search here. And by all means, download the sample site and see what other geo search things you can come up with :)

PS. For updates about new posts, sites I find useful and the occasional rant you can follow me on Twitter. You are also most welcome to subscribe to the RSS-feed.