Editor's Note: Joshua Lau studies Computer Science and Mathematics at the University of New South Wales, Australia. He has spent the past summer interning on the Google Maps JavaScript API v3 team in Sydney. He’s had lots of fun enabling users to edit, drag and create Data layer Features on Maps.
Today we’re introducing new features to the Data Layer that will make it easy for you to allow users to input and edit geographic data and get the updated data in GeoJSON format. Geographical data make maps interesting, informative and useful for users. For example, interactive Data Layers can be used to gather user opinions on the best places to visit and easily build heatmaps based on popular hotspots by using a Styling Function on the Data Layer. Or perhaps you could build a real estate site that allow users to draw Polygons to describe the areas that they do and don’t want to live in. The possibilities are endless.
Previously, we introduced Data Layers in the JavaScript Maps API v3, enabling you to visualize custom geographical data features on your maps and style them based on their attributes. You could also import and export data onto Data Layers in the popular GeoJSON format. For details, see the Developer’s Guide to the Data Layer.
Graphically Edit a Data Layer
You can allow users to edit a Data Layer by setting the draggable and editable styling options. Using the existing toGeoJson() method, you’ll also be able to easily extract the updated Data Layer in GeoJSON format.
Users can also draw new Points, LineStrings and Polygons. You can enable this behaviour by specifying a list of drawing controls. See editing and drawing in action below.
map.data.setStyle({draggable: true, editable: true});
map.data.setControls(['Point', 'LineString', 'Polygon']);
 |
| Editing a polygon |
To showcase these new features, we’ve built a Simple GeoJSON Editor that lets users import GeoJSON via drag and drop, edit it, and export. Play with it, and take a look at the source to see how it’s done.
 |
| Adding some extra points using the app |
Display Geodesics in the Data Layer
As an added bonus, we’re also rolling out the ability to display Line String and Polygon geometries geodesically (their edges follow the curvature of the Earth). This can be enabled by setting the geodesic styling option on the respective Data Layer.
 |
| The shortest route from San Francisco to London is via Greenland |
If you’d like to know more, head over to our API Reference. We’d love to hear about the exciting new apps you’re building with the new features in the Data layer. Feel free to share them in the comments below. Have fun!