Adding Delete Vertex to Google Maps

Google Maps API is awesome. (It was even better when it was free, but that’s beside the point). One of the things that it allows you to do is create and edit shapes on a map. This is increasingly useful when customers have services that are location and search-based, as many of Fluent’s are.

To edit a shape you can drag a vertex around on the map (the point where two sides meet). Unfortunately, the latest version of the API doesn’t allow you to remove vertices from the shape easily (as you can see below). If you want to delete points, you’re better off deleting the whole shape and starting again.

That, of course, affects the user experience. It’s the kind of thing that you can live with, but it would be less frustrating if you didn’t have to. 

Without Delete Vertex

What I love about website scripting is that it’s easy for any developer to see what another developer has done and change it. So I wrote some code which found the undo button that Google Maps add to the page when dragging a vertex, and attached a new button next to it. I could then delete the point that was last moved when this button is pressed.

Presto: Google Maps on our customer's sites now have a shiny new delete vertex button (take that Google).

With Delete Vertex

Get the code from GitHub here, or JS Bin here.

Want more tips on digital product development from people at the cutting edge? Follow Fluent on LinkedIn and keep learning