Draw Custom Shapes Using Google Maps API

February 26th, 2013 - Posted by Steve Marks to Javascript / jQuery, Web Development.

When I first saw the ‘Draw-a-search’ feature on the Rightmove website a few years ago I was impressed. It was a method of searching that I hadn’t seen before and provided the user with a visual concept of filtering results. Three years on from it’s original creation and my thoughts on this feature remain the same.

What’s this got to do with drawing custom shapes? Well, I have just one niggle with the feature in that, whilst creating my shape I found my self clicking, and clicking a lot. To create even a basic shape avoiding and including certain areas warranted at least 10 clicks. As a result I set to work on my own ‘Draw-a-search’ feature that requires just two clicks and allows you to draw the most complex shapes. The rest is done by simply dragging the mouse around the required area and, when done, simply click again to close the shape off.

Let’s take a look at it in action.

How to use: Click once to begin the shape, move the mouse, and click again to finish. Don’t keep mouse button clicked

Click here to view a full screen version and to download the source code.

This entry was posted on Tuesday, February 26th, 2013 at 10:19 am by +Steve Marks and is filed under Javascript / jQuery, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.

Fear not, we won't publish this

Comments (2)
  1. @Romi – If you’re looking for the source code you can view the page below and view the page source:


  2. romi says:

    that’s cool. anw you seems not included the link download for source code. can I learn it?