This is Part 4 of a week long series featuring code for the Google Maps API.

An incredibly common function, for most Google Maps applications, is the ability to ‘add a new point’ to the map. I’ve seen a lot of implementations where they force you to line up a crosshair to where your point will go – or even worse: Make you enter a latitude/longitude for the point.

In my opinion, the easiest way to add free-form points is to add some sort of ‘click to add a point’ functionality. For example, using the double-click capturing code that I wrote yesterday, a new point could be added wherever the user double clicks.

The second part of this operation is to collect information from the user, to be added to this particular point. The Google Maps API provides the very nice Info Window funcionality so why not display the data entry form right in one of those?

I’ve set up a demo to demonstrate the above, here.

From my demo, there arrise a couple points to ponder:

• In my demo, I create a new marker where the user has double-clicked – if a user cancels adding a new point (by exiting out of the info window) then I remove the point that was created – you should be sure to do the same.
• Google Maps are embedded directly in your web page – there are no IFrames – this means that if you write some CSS to render a form that you’ve written, it will take effect in the Info Windows that you display – this is very handy!
• The handling of CSS floats in the GMap info windows is very poor, to say the least. The best way to work around them is to provide a wrapper, for example:

  <div style="width:400px;height:200px;">Your normal Info Window content...</div>

• This brings up another point – if you have an info window that is particularly large, it is trivial to be able to add scrollbars to the content, observe:

  <div style="width:400px;height:200px;overflow:auto;"> ... </div>

The more I use the Google Maps API, the more I realize that Google is really giving the developer a lot of power to be able to make these Maps behave in a way that they want – I highly recommend reading through the raw javascript files sometime – they’re very informative, and full of new un-documented features.