var G = google.maps;

var zoom = 9;

var centerPoint = new G.LatLng(47.3, 43.6);

var polyline;

var deleteMenu;

var map;

​

$(function() {

  // create options object

  var myOptions = {

    center: centerPoint,

    zoom: zoom,

    mapTypeId: G.MapTypeId.ROADMAP

  };

  // create map with options

  map = new G.Map($("#map_canvas")[0], myOptions);

  map.addListener('click', addLatLng);

  addPolyline(map);

  // init deleting possibility

  deleteMenu = new DeleteMenu();

});

​

function DeleteMenu() {

  console.log('inid del');

  this.div_ = document.createElement('div');

  this.div_.className = 'delete-menu';

​

  var menu = this;

  google.maps.event.addDomListener(this.div_, 'click', function(e) {

    console.log('butdiv clicked');

    menu.removeVertex();

​

    e.stopPropagation();

  });

}

DeleteMenu.prototype = new google.maps.OverlayView();

​

DeleteMenu.prototype.onAdd = function () {

  var deleteMenu = this;

  var map = this.getMap();

  this.getPanes().floatPane.appendChild(this.div_);

​

  // mousedown anywhere on the map except on the menu div will close the menu

  this.divListener_ = google.maps.event.addDomListener(map.getDiv(), 'mousedown', function (e) {

    if (e.target != deleteMenu.div_) {

      deleteMenu.close();

    } else {

      // delete button clicked

    }

  }, true);

};

​

DeleteMenu.prototype.onRemove = function () {

  google.maps.event.removeListener(this.divListener_);

  this.div_.parentNode.removeChild(this.div_);

​

  // clean up

  this.set('position');

  this.set('path');

  this.set('vertex');

};

​

DeleteMenu.prototype.close = function () {

  this.setMap(null);

};

​

DeleteMenu.prototype.draw = function () {

  var position = this.get('position');

  var projection = this.getProjection();

​

  if (!position || !projection) {

    return;

  }

​

  var point = projection.fromLatLngToDivPixel(position);

  this.div_.style.top = (10 + point.y)  + 'px';

  this.div_.style.left = (10 + point.x) + 'px';

};

​

/**

     * Opens the menu at a vertex of a given path.

     */

DeleteMenu.prototype.open = function (map, path, vertex) {

  this.set('position', path.getAt(vertex));

  this.set('path', path);

  this.set('vertex', vertex);

  this.setMap(map);

​

  this.draw();

};

​

/**

     * Deletes the vertex from the path.

     */

DeleteMenu.prototype.removeVertex = function () {

  console.log('remove top' + this.get('vertex'));

  var path = this.get('path');

  var vertex = this.get('vertex');

​

  if (!path || vertex == undefined) {

    this.close();

    return;

  }

​

  path.removeAt(vertex);

​

  this.close();

​

  // when vertex is deleted show delete button for previous if it is long enough

  if(vertex > 2) {

    this.open(map, path, vertex - 1);

  }

};

​

​

function addPolyline(map){

  polyline = new google.maps.Polyline({

    strokeColor: '#FF00FF',

    strokeOpacity: 0.8,

    editable: true,

    draggable: true,

    strokeWeight: 3,

  });

  polyline.setMap(map);

}

​

function addLatLng(event) {

  var path = polyline.getPath();

​

  // add point

  path.push(event.latLng);

​

  // show delete button for last point

  deleteMenu.open(map, path, path.length - 1);

}