-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathelevationmap.html
103 lines (81 loc) · 2.79 KB
/
elevationmap.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Elevation Everglades + Keys</title>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://www.google.com/jsapi"></script>
</head>
<body>
<div>
<div id="map" style="height:250px;"></div>
<div id="elevation_chart"></div>
<script>
google.load('visualization', '1', {packages: ['columnchart']});
function initMap() {
var path = [
{lat: 25.308295, lng: -80.881064}, // SW Everglades Nat'l Park
{lat: 25.756062, lng: -81.317747}, // NW Everglades Nat'l Park
{lat: 25.712764, lng: -80.699208}, // North Everglades Nat'l Park
{lat: 25.751114, lng: -80.506947}, // NE Everglades Nat'l Park
{lat: 25.280163, lng: -80.465062 }, // Southern Glades
{lat: 25.499912, lng: -80.184052}, // Sands Key, Islandia
{lat: 24.814409, lng: -80.812713}, // Long Key State Recreational Area
{lat: 24.738203, lng: -81.000564}]; // Fat Deer Key
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: path[1],
mapTypeId: 'terrain'
});
var elevator = new google.maps.ElevationService;
displayPathElevation(path, elevator, map);
}
function displayPathElevation(path, elevator, map) {
new google.maps.Polyline({
path: path,
strokeColor: '#0000CC',
strokeOpacity: 0.4,
map: map
});
elevator.getElevationAlongPath({
'path': path,
'samples': 50
}, plotElevation);
}
function plotElevation(elevations, status) {
var chartDiv = document.getElementById('elevation_chart');
if (status !== 'OK') {
chartDiv.innerHTML = 'Cannot show elevation: request failed because ' +
status;
return;
}
var chart = new google.visualization.ColumnChart(chartDiv);
var data = new google.visualization.DataTable();
data.addColumn('string', 'Sample');
data.addColumn('number', 'Elevation');
for (var i = 0; i < elevations.length; i++) {
data.addRow(['', elevations[i].elevation]);
}
chart.draw(data, {
height: 150,
legend: 'none',
titleY: 'Elevation (m)'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</div>
</body>
</html>