Über Berg und Tal – Google Maps API mit Höhenprofil
Neue Bausteine für die Google Maps API: Die noch in den “Code Labs” also im Entwicklungsstadium angesiedelte Version 3 (V3) der Kartendienst-Schnittstelle ermittelt zu den zweidimensional bestimmten Geodaten nun auch die dritte Dimension der jeweiligen Höhenlage eines Orts. Damit lässt sich das Höheprofil einer geplanten oder zurückgelegten Strecken als zusätzliches Diagramm zu einer Karte anzeigen:
Im Zentrum der neuen Funktionen steht der “Elevation service”. Dieser gibt für jeden angegeben Ort die Höhe über dem Meeresspiegel aus – oder die Meerestiefe (negative Werte) bei Ortsangaben auf hoher See. Der Dienst wird mit einer JavaScript-Variablen aufgerufen:
elevator = new google.maps.ElevationService(); |
Genutzt wird der Dienst in diesem Beispiel von zwei Funktionen: 1) Anzeige der Höhe bei Mausklick auf die Karte Dies ermöglicht die Funktion “getElevation”, die mit einem Array der angeklickten Orte arbeitet:
function getElevation(event) { var locations = []; var clickedLocation = event.latLng; locations.push(clickedLocation); var positionalRequest = { 'locations': locations } |
Das Ergebnis wird in einem InfoWindow ausgegeben:
infowindow.setContent("Dieser Ort liegt <br/>" + results[0].elevation + " Meter hoch."); infowindow.setPosition(clickedLocation); infowindow.open(map); |
(Für die lesefreundliche Anzeige der Höhenwerte müsste noch eine JavaScript-Funktion geschrieben werden, um den Wert “results[0].elevation” so zu behandeln, dass die Zahl der Dezimalstellen begrenzt wird.)
2) Höhenprofil in einem eigenen Diagramm unter der Karte Dazu wird zunächst ein “Chart” gezeichnet und festgelegt, dass die Höhenangaben entlang der auf der Karte gezeichneten Strecke ermittelt werden sollen (die Variablen d1 bis d18 wurden zuvor mit ihren Längen- und Breitenangaben bestimmt), Mit “Samples” wird die Dichte der zu erfassenden Höhenangaben entlang der Strecke angegeben:
chart = new google.visualization.ColumnChart(document.getElementById('elevation_chart')); var path = [ d1, d2, d3, d4, d5, d6, d7, d8, d9, d10, d11, d12, d13, d14, d15, d16, d17, d18, d1]; var pathRequest = { 'path': path, 'samples': 256 } |
Zum Anpassen des Beispiels an eigene Karten und Strecken benötigt man eigentlich nur die Geodaten der Streckenpunkte (in Dezimalschreibweise). Diese lassen sich entweder unterwegs mit einem GPS-Empfänger aufzeichnen oder auch gut in der Statuszeile von Google Earth ablesen. Beim Basteln mit dem hier folgenden vollständigen Code sind also vor allem die Variablen der Streckenpunkte und die “var mitte” für das Zentrieren der Karte zu ändern, außerdem auch Position, “title” und png-Datei für den Marker.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Dolomiten-Tour</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//Hier werden zunächst die wichtigsten Variablen für Karte und Höhenprofil eingeführt.
var elevator;
var map;
var chart;
var infowindow = new google.maps.InfoWindow();
var polyline;
//Diese Variablen geben die Streckenpunkte an
var d1 = new google.maps.LatLng(46.542188, 11.608083);
var d2 = new google.maps.LatLng(46.540191, 11.618361);
var d3 = new google.maps.LatLng(46.537904, 11.623841);
var d4 = new google.maps.LatLng(46.536214, 11.621730);
var d5 = new google.maps.LatLng(46.532002, 11.629502);
var d6 = new google.maps.LatLng(46.530672, 11.625254);
var d7 = new google.maps.LatLng(46.525628, 11.630647);
var d8 = new google.maps.LatLng(46.506408, 11.635466);
var d9 = new google.maps.LatLng(46.501398, 11.637656);
var d10 = new google.maps.LatLng(46.497171, 11.633011);
var d11 = new google.maps.LatLng(46.497195, 11.623170);
var d12 = new google.maps.LatLng(46.500806, 11.606213);
var d13 = new google.maps.LatLng(46.508566, 11.580157);
var d14 = new google.maps.LatLng(46.512705, 11.586113);
var d15 = new google.maps.LatLng(46.511653, 11.607487);
var d16 = new google.maps.LatLng(46.522531, 11.608748);
var d17 = new google.maps.LatLng(46.532556, 11.601073);
var d18 = new google.maps.LatLng(46.538196, 11.604311);
//noch eine Variable, um die Karte über einem Ort zu zentrieren
var mitte = new google.maps.LatLng(46.520408, 11.617443);
// hier werden zwei Pakete zur Darstellung von Karte und Diagramm geladen
google.load("visualization", "1", {packages: ["columnchart"]});
//Beim Initialisieren der Karte werden gleich die wichtigsten Optionen für ihre Darstellung übergeben, diese in Form von Objektliteralen
function initialize() {
var myOptions = {
zoom: 13,
center: mitte,
scrollwheel: false,
mapTypeId: 'satellite'
}
// nun wird die Karte gezeichnet, ihre ID bezieht sich auf das HTML-Element <div>
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// der Marker für die Karte
var marker = new google.maps.Marker({
position: new google.maps.LatLng(46.542188, 11.608083),
map: map,
title: 'Start und Ziel',
icon: 'http://www.xml-ecke.de/images/hike.png'
});
// der ElevationService wird erzeugt, zusammen mit einem EventListener, um bei Mausklick die Höhe zu ermitteln
elevator = new google.maps.ElevationService();
google.maps.event.addListener(map, 'click', getElevation);
drawPath();
// Funktion für die Berechnung der Höhenangaben bei den angeklickten Orten und Ausgabe im InfoWindow
}
function getElevation(event) {
var locations = [];
var clickedLocation = event.latLng;
locations.push(clickedLocation);
var positionalRequest = {
'locations': locations
}
if (elevator) {
elevator.getElevationForLocations(positionalRequest, function(results, status) {
if (status == google.maps.ElevationStatus.OK) {
if (results[0]) {
infowindow.setContent("Dieser Ort liegt <br/>" + results[0].elevation + " Meter hoch.");
infowindow.setPosition(clickedLocation);
infowindow.open(map);
} else {
alert("No results found");
}
} else {
alert("Elevation service failed due to: " + status);
}
});
}
}
// jetzt wird das Höhenprofil gezeichnet
function drawPath() {
chart = new google.visualization.ColumnChart(document.getElementById('elevation_chart'));
var path = [ d1, d2, d3, d4, d5, d6, d7, d8, d9, d10, d11, d12, d13, d14, d15, d16, d17, d18, d1];
// Anzahl der erfassten Höhenpunkte entlang des Pfades
var pathRequest = {
'path': path,
'samples': 256
}
if (elevator) {
elevator.getElevationAlongPath(pathRequest, plotElevation);
}
}
function plotElevation(results, status) {
if (status == google.maps.ElevationStatus.OK) {
elevations = results;
var elevationPath = [];
for (var i = 0; i < results.length; i++) {
elevationPath.push(elevations[i].location);
}
var pathOptions = {
path: elevationPath,
strokeColor: '#0000CC',
opacity: 0.4,
map: map
}
polyline = new google.maps.Polyline(pathOptions);
var data = new google.visualization.DataTable();
data.addColumn('string', 'Sample');
data.addColumn('number', 'Höhe');
for (var i = 0; i < results.length; i++) {
data.addRow(['', elevations[i].elevation]);
}
document.getElementById('elevation_chart').style.display = 'block';
chart.draw(data, {
width: 640,
height: 200,
legend: 'none',
title: 'Höhe (m)'
});
}
}
</script>
</head>
<body style="margin:0px; padding:0px;" onLoad="initialize();">
<div>
<div id="map_canvas" style="width: 640px; height: 500px; float:left; border: 1px solid black;"></div>
<div id="elevation_chart" style="width:640px; height:200px; "></div>
</div>
</body>
</html> |
