JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map_canvas" style="float:left;width:70%;height:100%"></div>
<div style="float:right;width:30%;height:100%;overflow:auto">
<button id="undo" style="display:block;margin:auto" onclick="undo()">Undo
</button>
<div id="directions_panel" style="width:100%"></div>
</div>
</body>
</html>
JavaScript
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var oldDirections = [];
var currentDirections = null;
function initialize() {
var myOptions = {
zoom: 13,
center: new google.maps.LatLng(-33.879,151.235),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay = new google.maps.DirectionsRenderer({
'map': map,
'preserveViewport': true,
'draggable': true
});
directionsDisplay.setPanel(document.getElementById("directions_panel"));
google.maps.event.addListener(directionsDisplay, 'directions_changed',
function() {
if (currentDirections) {
oldDirections.push(currentDirections);
setUndoDisabled(false);
}
currentDirections = directionsDisplay.getDirections();
});
setUndoDisabled(true);
calcRoute();
}
function calcRoute() {
var start = '48 Pirrama Road, Pyrmont NSW';
var end = 'Bondi Beach, NSW';
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
function undo() {
currentDirections = null;
directionsDisplay.setDirections(oldDirections.pop());
if (!oldDirections.length) {
setUndoDisabled(true);
}
}
function setUndoDisabled(value) {
document.getElementById("undo").disabled = value;
}
$(document).ready(function() {
initialize();
});