Set the variables instead of having the user input them
I would like to change the code to have origin and destination be
populated from set variables, instead of from an html form. Any ideas? I
think this is fairly easy. Any advice is very much appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Draggable elevation</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var recalcHeight = function() {
$("#map").height($(window).height() - $("form").height() -
$("#elevation").height());
map && google.maps.event.trigger(map, 'resize');
};
$(window).resize(recalcHeight);
recalcHeight();
for (o in google.maps.DirectionsTravelMode) {
$("#mode").append(new Option(o));
}
var map = new google.maps.Map($('#map')[0], {
center: new google.maps.LatLng(-33.86685, 151.19348),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 10
});
var dr = new google.maps.DirectionsRenderer({
map: map,
draggable: true,
preserveViewport: true
});
var hoverMarker = new google.maps.Marker({
map: map
});
$("#elevation").mouseleave(function() {
hoverMarker.setVisible(false);
$("#elevation-hover").hide();
});
var es = new google.maps.ElevationService();
var ds = new google.maps.DirectionsService();
var fitBounds = false;
google.maps.event.addListener(dr, 'directions_changed', function() {
var route = dr.getDirections().routes[0];
var path = route.overview_path;
es.getElevationAlongPath({
path: path,
samples: Math.max(50, path.length * 2)
}, function(result, status) {
if (status == google.maps.ElevationStatus.OK) {
drawElevation(result);
recalcHeight();
if (fitBounds) {
map.fitBounds(route.bounds);
fitBounds = false;
}
}
else {
$('#error').text(status).show();
}
recalcHeight();
});
});
$('#directions-form').submit(function(e) {
$('#error').hide();
ds.route({
origin: $('#from').val(),
destination: $('#to').val(),
travelMode: $('#mode').val()
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
fitBounds = true;
dr.setDirections(result);
}
else {
$('#error').text(status).show();
}
recalcHeight();
});
e.preventDefault();
return false;
});
var drawElevation = function(r) {
var max = writeStats(r);
drawGraph(r, max);
};
var writeStats = function(r) {
var prevElevation = r[0].elevation;
var climb = 0;
var drop = 0;
var max = 0;
for (var i = 1; i < r.length; i++) {
var diff = r[i].elevation - prevElevation;
prevElevation = r[i].elevation;
if (diff > 0) {
climb += diff;
}
else {
drop -= diff;
}
if (r[i].elevation > max) {
max = r[i].elevation;
}
}
max = Math.ceil(max);
$('#climb-drop').text("Climb: " + Math.round(climb) + "m Drop: " +
Math.round(drop) + "m");
return max;
};
var drawGraph = function(r, max) {
var ec = $("#elevation-chart").empty()
var width = Math.max(1, Math.floor(Math.min(11, ec.width() /
r.length)) - 1);
var height = 100;
$.each(r, function(i, e) {
var barHeight = Math.round(e.elevation / max * height);
var bar = $("<div style='width:" + width + "px'><div
style='height:" + barHeight + "px;'></div></div>");
ec.append(bar);
bar.mouseenter(function() {
var offset = bar.find("div").offset();
offset.top -= 25;
offset.left -= 3;
hoverMarker.setVisible(true);
hoverMarker.setPosition(e.location);
$("#elevation-hover").show().text(Math.round(e.elevation) +
'm').offset(offset);
if (!map.getBounds().contains(e.location)) {
map.panTo(e.location);
}
}).click(function() {
map.panTo(e.location);
});
});
};
$(".share").click(function() {
$(this).find("input").focus().select();
});
});
</script>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen"
charset="utf-8">
</head>
<body>
<form action="#" method="get" accept-charset="utf-8" id="directions-form">
<input id="from" name="from" value="Bondi Beach, Sydney Australia">
<input id="to" name="to" value="48 Pirrama Rd, Sydney Australia">
<select name="mode" id="mode"></select>
<input type="submit" value="Elevate →">
<span class="share">Share this page: <input type="text" readonly
value="http://goo.gl/v2UB"></span>
<div id="error"></div>
</form>
<div id="map"></div>
<div id="elevation">
<div id="elevation-hover"></div>
<div id="climb-drop"></div>
<div id="elevation-chart"></div>
</div>
</body>
</html>
No comments:
Post a Comment