Enables Google Maps API V3 Polyline Editing
Switch branches/tags
Nothing to show
Pull request Compare This branch is 2 commits ahead of ubilabs:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Polyline editing for the Google Maps V3 API

This library adds an edit method to the google.maps.Polyline class. When the polyline is in edit mode it shows up draggable markers for every point. Right clicking an existing marker will remove it. By default you will see transparent "ghost" markers. Click and drag them to add new points to the polyline.



Basic Usage

var polyline = new google.maps.Polyline({
  map: map,
  path: [
    new google.maps.LatLng(40.77153,-73.97722),
    new google.maps.LatLng(40.77803,-73.96657)

polyline.edit(); // start edit

Stopping an edit

To stop editing simply pass false to the method.


Options for editing

You can disable ghost markers by passing an options object and set the ghost property to false.

var options = {
  ghosts: false

polyline.edit(true, options);


While in edit mode events are fired while interacting with the polyline.

  • edit_start - Editing was enabled.
  • edit_end - Editing was disabled. Passes the new path.
  • update_at - A point was edited. Passes index and position
  • insert_at - A point was added. Passes index and position
  • remove_at - A point was deleted. Passes index and position


// when editing started
google.maps.event.addListener(polyline, 'edit_start', function(){

// when editing in finished
google.maps.event.addListener(polyline, 'edit_end', function(path){
  var coords = [];
  log("[edit_end]   path: " + coords.join(" | "));

// when a single point has been moved
google.maps.event.addListener(polyline, 'update_at', function(index, position){
  log("[update_at]  index: " +  index +  " position: " + position);

// when a new point has been added
google.maps.event.addListener(polyline, 'insert_at', function(index, position){
  log("[insert_at]  index: " +  index +  " position: " + position);

// when a point was deleted
google.maps.event.addListener(polyline, 'remove_at', function(index, position){
  log("[remove_at]  index: " +  index +  " position: " + position);

Marker images

Note: This class uses several marker images in edit mode.

  • GhostVertex - ghostVertex.png
  • GhostVertexOver - ghostVertexOver.png
  • Vertex - vertex.png
  • VertexOver - vertexOver.png

By default it looks for those images in "../src/images/".

You can override this settings globally:

google.maps.Polyline.prototype.edit.settings.imagePath = "/myImages/polyline/" 

or you can pass the imagePath option to the edit call:

polyline.edit(true, {
  imagePath: "/myImages/polyline/"


Origial work is done by Dmitry Ryshkin. Special thanks Jan Pieter Waagmeester for the idea of using the library google.maps.geometry, which performs spherical linear interpolation between the two locations.


Licensed under the MIT license.