Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps example</title>
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { width: 1280px; height: 715px; }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?sensor=false&region=GB&libraries=drawing">
    </script>
  </head>
  <body>
    <div id="map_canvas" style="width:1280px; height:715px"></div>
  </body>
</html>
 
.delete-menu{
    overflow-x: hidden; 
    overflow-y: hidden; 
    position: absolute; 
    width: 30px; 
    height: 27px;
    top:21px;
    background:url('http://i.imgur.com/RUrKV.png');
    background-position:0 0;
}
.delete-menu:hover{
    background-position:-30px;
}
.delete-menu:active{
    background-position:-60px;
}
 
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);
}    
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers