Elevation Height on PolyLine
HTML
<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<div id="map_canvas"></div>
CSS
#map_canvas { width:640px; height:400px; border: 1px solid black; }
JavaScript
var elevator,
map,
polyline,
crowders = new google.maps.LatLng(35.2083, -81.3108),
spencer = new google.maps.LatLng(35.2582, -81.1137),
charlotte = new google.maps.LatLng(35.2302, -80.8528);
$(window).load(function() {
var myOptions = {
zoom: 10,
center: spencer,
mapTypeId: 'terrain'
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
elevator = new google.maps.ElevationService();
drawPath();
});
function drawPath() {
var path = [ crowders, spencer, charlotte ],
pathRequest = {
'path': path,
'samples': 100
};
elevator.getElevationAlongPath(pathRequest, plotElevation);
}
function plotElevation(results, status) {
if (status == google.maps.ElevationStatus.OK) {
var elevations = results,
eleIcons = [],
elevationPath = [];
// The magic beans
for (var i = 0; i < results.length; i++) {
elevationPath.push(elevations[i].location);
var theIcon = {
path: 'M 0,1 0,' + (elevations[i].elevation * 0.10),
strokeColor: "red",
rotation: 180,
strokeWeight: 4,
strokeOpacity: 0.8,
scale: 1
};
var theShadow = {
path: 'M 0,6 0,' + (elevations[i].elevation * 0.05),
strokeColor: "#000000",
rotation: 330,
strokeWeight: 8,
strokeOpacity: 0.2,
scale: 1
};
eleIcons.push({ icon: theShadow, offset: i + "%" });
eleIcons.push({ icon: theIcon, offset: i + "%" });
}
var pathOptions = {
path: elevationPath,
strokeColor: '#0000CC',
strokeWeight: 5,
icons: eleIcons,
map: map
};
polyline = new...