Love My Maps? Use its Line and Shape Editing in your API Apps!

Friday, May 16, 2008 at 4:30:00 PM

When we launched the map editing tools in Google Maps, the reaction of developers was "This is cool, but how can I use it on my own site?" As someone who was originally drawn to Google in part because of the Maps API and the great developer community around it, I committed to making the My Maps tools useful for developers on their own sites.

Today, I'm pleased to announce that our user interface functionality for editable polylines and polygons is now part of the Maps API.

Say, for example, that you have a GPolygon you want users to be able to edit. Simply call GPolygon.enableEditing() and the poly will have draggable edit control vertices when the user mouses over it. To later make it non-editable, call GPolygon.disableEditing().

We've also exposed additional events for GPolygon and GPolyline so that you can easily mimic the MyMaps behavior (in mashups or Mapplets) by calling enableEditing on "mouseover" and disableEditing on "mouseout". To find out when the user makes an edit, listen for the "lineupdated" event. And if you want users to be able to draw a new GPolyline completely from scratch, just use enableDrawing as shown below:

var polyline = new GPolyline([]);
map.addOverlay(polyline);
polyline.enableDrawing();

Every click on the map will add a new vertex to the polyline until the user double-clicks or clicks again on the last vertex. You can also call enableDrawing to lets users append vertices to either end of an existing polyline. And just because everyone likes pretty colors, we exposed methods to let you change the style of a polyline or polygon: setStrokeStyle and setFillStyle. Have fun, and let us know what you think in the forum.

View example in its own window.