<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®ion=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 xKeyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |