Google Elevation Api

Z pomocą google elevation api narysujemy profil szlaku pokazanego w postaci polilinii. Na początku utwórzmy plik html z miejscem na mapę i na wykres profilu.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width; initial-scale=1.0">
        <title>Google Elevation Api</title>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script language="javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&v=3"></script>
		<script type="text/javascript" src="js/main.js?a"></script>
	</head>
    <body>
        <div id="map" style="width:700px; height:500px;"></div>
        <div id="chart_div"></div>
    </body>
</html>

Kod javascript umieścimy w pliku main.js. Na początku ładujemy bibliotekę do rysowania wykresów google oraz zmienną globalną chart reprezentującą wykres profilu trasy.

google.load("visualization", "1", {packages: ["columnchart"]});
var chart = null;

Kolejna część kodu będzie już wywoływana po załadowaniu dokumentu. Standardowo definiujemy mapę google. Ponadto tworzymy obiekt ElevationService. Do zmiennej chart przypisujemy nowy obiekt wykresu kolumnowego (jako parametr przekazujemy miejsce gdzie wykres ma być rysowany).

$(function() {
    var mapOptions = {
		mapTypeId: google.maps.MapTypeId.TERRAIN
	};
	var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    var SAMPLES = 256;
	var elevationService = new google.maps.ElevationService();
    chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
});

Teraz ajaxem pobieram xml z pliku gpx abyśmy mieli jakiś przykładowy szlak. W tym celu budujemy tablicę punktów dla polilinii na podstawie współrzędnych z pliku gpx i przekazujemy ją do obiektu polilinii. Więcej na temat rysowania szlaku na podstawie gpx w artykule Phonegap odczyt gpx. Tę samą tablicę punktów przekazujemy do elevationService. Jako callback przekazujemy nazwę funkcji, która będzie rysowała wykres na podstawie otrzymanych danych (w tym przypadku plotElevation) na temat wysokości.

$.ajax({
    type: "GET",
    url: 'szlak.gpx',
    dataType: "xml",
    crossDomain: true,
    success: function(xml) {
        var points = [];
        var bounds = new google.maps.LatLngBounds();
        $(xml).find("trkpt").each(function() {
            var lat = $(this).attr("lat");
            var lon = $(this).attr("lon");
            var p = new google.maps.LatLng(lat, lon);
            points.push(p);
            bounds.extend(p);
        });

        var poly = new google.maps.Polyline({
            path: points,
            strokeColor: "#FF00AA",
            strokeOpacity: .7,
            strokeWeight: 4
        });

        poly.setMap(map);
        map.fitBounds(bounds);

        elevationService.getElevationAlongPath({
          path: points,
          samples: SAMPLES
        }, plotElevation);

    }
});

Funkcja plotElevation przedstawia się następująco:

function plotElevation(results) {
	elevations = results;

	var data = new google.visualization.DataTable();
	data.addColumn('string', 'Sample');
	data.addColumn('number', 'Elevation');
	for (var i = 0; i < results.length; i++) {
        data.addRow(['', elevations[i].elevation]);
	}

	document.getElementById('chart_div').style.display = 'block';
	chart.draw(data, {
        width: 512,
        height: 200,
        legend: 'none',
        titleY: 'Elevation (m)',
        focusBorderColor: '#00ff00'
	});
}

Google elevation api demo