JSFiddle - React, Tailwind, and code Playground
HTML
<div id="main">
<div id="map_canvas"></div>
</div>
<script src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false"></script>
<script src="http://jscott.me/minify/media/js/jsundoable.js"></script>
CSS
html {
height: 100%;
}
#map_canvas, #main, #container, body {
width: auto;
height: auto;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
JavaScript
var WoosmapEditor = function() {
var undoManager = new UndoManager({
undoChange: function() {
$(undoManager).trigger('stackchange');
},
redoChange: function() {
$(undoManager).trigger('stackchange');
}
});
var tools = {
marker:function() {
var clickHandler = null;
return {text:'add marker',
install:function(map) {
_map = map;
map.setOptions({draggableCursor:'crosshair'});
clickHandler = google.maps.event.addListener(map, 'click', function(event) {
function addMarker(marker, add) {
marker.setMap(add ? map : null);
undoManager.undoable("marker added", addMarker, [marker, !add]);
}
addMarker(new google.maps.Marker({position:event.latLng}), true);
});
},
uninstall:function() {
google.maps.event.removeListener(clickHandler);
clickHandler = null;
_map.setOptions({draggableCursor:null});
}}
}(),
polyline:function() {
var _map;
var uninstallers = [];
function removeUninstaller(uninstaller) {
uninstallers.splice(uninstallers.indexOf(uninstaller), 1);
}
function bindEventOnce(target, eventName, callback) {
var handler;
var uninstaller = function() {
google.maps.event.removeListener(handler);
};
handler = google.maps.event.addListenerOnce(target, eventName, function() {
removeUninstaller(uninstaller);
callback.apply(this, arguments);
});
uninstallers.push(uninstaller);
return...