Es kann losgehen!

Bevor Sie mit der Entwicklung beginnen, lesen Sie bitte unsere Entwicklerdokumentation.

Die Google Maps JavaScript API aktivieren

Zum Einstieg führen wir Sie durch die Google Developers Console, wo Sie vorab Folgendes tun müssen:

  1. Ein Projekt erstellen oder auswählen
  2. Die Google Maps JavaScript API und zugehörige Dienste aktivieren
  3. Zugehörige Schlüssel erstellen
Weiter

Elevation-Dienst

Übersicht

Mit dem Elevation-Dienst erhalten Sie Höhendaten für Standorte auf der Erde, auch für „tiefe“ Orte am Meeresboden (dann werden negative Werte zurückgegeben). Falls Google keine exakten Höhenmessungen für den von Ihnen angeforderten präzisen Standort vorliegen, führt der Dienst eine Interpolation aus und gibt einen Durchschnittswert auf Basis der vier am nächsten gelegenen Standorte zurück.

Über das Objekt ElevationService erhalten Sie eine einfache Benutzeroberfläche, mit der Sie Höhendaten von Standorten auf der Erde abfragen können. Darüber hinaus können Sie per Intervall ermittelte Höhendaten für Pfade anfordern, sodass Sie die abstandsgenauen Höhenänderungen entlang von Routen berechnen können. Das Objekt ElevationService kommuniziert mit dem Google Maps API Elevation-Dienst, der Höhenanforderungen empfängt und Höhendaten zurückgibt.

Mithilfe des Elevation-Dienstes können Sie Anwendungen zum Wandern und Radfahren, für mobile Positionierung oder für Low-Resolution-Vermessungen entwickeln.

Erste Schritte

Bevor Sie den Elevation-Dienst in der Google Maps JavaScript API verwenden, müssen Sie zuerst sicherstellen, dass die Google Maps Elevation API in der Google API Console im gleichen Projekt aktiviert ist, das Sie für die Google Maps JavaScript API eingerichtet haben.

So zeigen Sie die Liste der aktivierten APIs an:

  1. Navigieren Sie zu Google API Console.
  2. Klicken Sie auf die Schaltfläche Select a project, wählen Sie das Projekt aus, das Sie für die Google Maps JavaScript API eingerichtet haben, und klicken Sie auf Open.
  3. Suchen Sie in der Liste der APIs im Dashboard nach Google Maps Elevation API.
  4. Wenn die API in der Liste angezeigt wird, sind Sie startbereit. Wenn die API nicht in der Liste enthalten ist, aktivieren Sie sie:
    1. Wählen Sie oben auf der Seite ENABLE API aus, um den Tab Library anzuzeigen. Alternativ können Sie im Menü auf der linken Seite Library auswählen.
    2. Suchen Sie nach Google Maps Elevation API und wählen Sie den Eintrag dann in der Ergebnisliste aus.
    3. Wählen Sie ENABLE aus. Nachdem der Vorgang abgeschlossen ist, wird die Google Maps Elevation API in der Liste der APIs im Dashboard angezeigt.

Nutzungsbeschränkungen und Richtlinien

Kontingente

Folgende Nutzungsbeschränkungen gelten für den Elevation-Dienst:

Verwendung des Elevation-Diensts mit dem Standard Plan

  • 2.500 kostenlose Anforderungen pro Tag, berechnet als Summe der clientseitigen und serverseitigen Abfragen; Abrechnung aktivierenaktivieren Sie die Abrechnung, um ein höheres Tageskontingent zu erhalten. Bei maximal 100.000 Anforderungen pro Tag werden 0,50 USD für 1000 weitere Anforderungen in Rechnung gestellt.
  • 512 Standorte pro Anforderung.
  • 50 Anforderungen pro Sekunde, berechnet als Summe der clientseitigen und serverseitigen Abfragen.

Verwendung des Elevation-Diensts mit dem Premium Plan

  • Übergreifendes kostenloses Tageskontingent von 100.000 Anforderungen pro 24 Stunden; weitere Anforderungen werden auf die für jeweils ein Jahr erworbenen Maps APIs Credits angerechnet.
  • 512 Standorte pro Anforderung.
  • Unbegrenzt clientseitige Anforderungen pro Sekunde, pro Projekt. Beachten Sie, dass die serverseitige API auf 50 Anforderungen pro Sekunde beschränkt ist.

Pro Nutzersitzung wird eine Beschränkung angewendet, unabhängig davon, wie viele Nutzer gemeinsam auf das gleiche Projekt zugreifen.

Die Beschränkung pro Nutzersitzung verhindert, dass clientseitige Dienste für Batchanforderungen genutzt werden. Wenn Sie stattdessen Höhenangaben für statische, bekannte Orte wünschen, verwenden Sie den Elevation-Webdienst der Google Maps Elevation API.

Richtlinien

Die Nutzung des Elevation-Diensts muss im Einklang mit den für die Google Maps Elevation API beschriebenen Richtlinien erfolgen.

Höhenanforderungen

Der Zugriff auf den Elevation-Dienst erfolgt asynchron, da dazu der Aufruf eines externen Servers durch Google Maps API erforderlich ist. Aus diesem Grund müssen Sie eine Callbackmethode übergeben, die bei Abschluss der Anforderung ausgeführt werden soll. Das Ergebnis wird mit der Callbackmethode verarbeitet. Beachten Sie, dass der Elevation-Dienst einen Statuscode (ElevationStatus) und ein Array separater Objekte ElevationResult zurückgibt.

Mit ElevationService werden zwei Anforderungstypen verarbeitet:

  • Anforderungen für einzelne, eigenständige Standorte; hierfür wird die Methode getElevationForLocations() verwendet, an die eine Liste eines oder mehrerer Standorte mithilfe eines Objekts LocationElevationRequest übergeben wird.
  • Anforderungen für Höhen verschiedener verbundener Punkte auf einem Pfad; hier kommt die Methode getElevationAlongPath() zum Einsatz, der eine sortierte Gruppe von Eckpunkten in einem Objekt PathElevationRequest übergeben wird. Beim Anfordern von Höhen entlang Pfaden müssen Sie außerdem einen Parameter übergeben, mit dem festgelegt wird, wie viele Intervalle auf diesem Pfad verwendet werden sollen.

Mit jeder dieser Methoden muss außerdem eine Callbackmethode übergeben werden, um die zurückgegebenen Objekte ElevationResult und ElevationStatus zu verarbeiten.

Standorthöhenanforderungen

Das Objektliteral LocationElevationRequest enthält folgendes Feld:

{
  locations[]: LatLng
}

Das Feld locations (erforderlich) definiert die Standorte auf der Erde, für die Höhendaten zurückgegeben werden sollen. Dieser Parameter nimmt ein Array von LatLng-Objekten an.

Sie können in einem Array eine beliebige Anzahl von mehreren Koordinaten übergeben, solange Sie nicht die Servicekontingente überschreiten. Beachten Sie, dass beim Übergeben von mehreren Koordinaten die Genauigkeit der zurückgegebenen Daten eine niedrigere Auflösung aufweist, als wenn Sie Daten für Einzelkoordinaten anfordern.

Pfadhöhenanforderungen mit Intervallen

Das Objektliteral PathElevationRequest enthält folgende Felder:

{
  path[]: LatLng,
  samples: Number
}

Diese Felder werden nachfolgend erläutert:

  • Das Feld path (erforderlich) definiert einen Pfad auf der Erde, für den Höhendaten zurückgegeben werden sollen. Mit dem Parameter path werden zwei oder mehr geordnete {latitude,longitude}-Paare verwendet, die ein Array von zwei oder mehr Objekten LatLng verwenden.
  • Das Feld samples (erforderlich) gibt die Anzahl der Intervallpunkte entlang des Pfads an, für den Höhendaten zurückgegeben werden sollen. Mit dem Parameter samples wird das vorhandene Element path in einen geordneten Satz von abstandsgetreuen Punkten entlang des Pfads unterteilt.

Wie bei Positionsanforderungen wird auch durch den Parameter path ein Satz aus Längen- und Breitenwerten angegeben. Allerdings wird im Parameter path ein geordneter Satz an Eckpunkten spezifiziert. Anstatt die Höhendaten nur für die Eckpunkte zurückzugeben, werden bei Pfadanforderungen per Intervall die Daten über die Pfadlänge angegeben, wobei alle Intervalle (einschließlich der Endpunkte) den gleichen Abstand haben.

Höhenantworten

Für jede zulässige Anforderung wird vom Elevation-Dienst eine Reihe von Objekten ElevationResult sowie ein Objekt ElevationStatus zurückgegeben.

Höhenstatus

Jede Höhenanforderung gibt einen Code ElevationStatus in der zugehörigen Callbackfunktion zurück. Dieser Statuscode (status) enthält einen der folgenden Werte:

  • OK gibt an, dass die Dienstanforderung erfolgreich war.
  • INVALID_REQUEST gibt an, dass die Dienstanforderung falsch formatiert war.
  • OVER_QUERY_LIMIT gibt an, dass der Anforderer sein Kontingent überschritten hat.
  • REQUEST_DENIED gibt an, dass die Anforderung vom Dienst nicht abgeschlossen wurde, vermutlich aufgrund eines unzulässigen Parameters.
  • UNKNOWN_ERROR gibt an, dass ein unbekannter Fehler vorliegt.

Sie sollten sicherstellen, dass Ihr Callback erfolgreich war, indem Sie prüfen, ob dieser Statuscode OK ist.

Höhenergebnisse

Wenn der Callback erfolgreich war, enthält das Argument results Ihrer Callbackfunktion eine Reihe von Objekten ElevationResult. In diesen Objekten sind die folgenden Elemente enthalten:

  • Ein Element des Typs location (in dem Objekte LatLng enthalten sind) mit der Position, für die Höhendaten berechnet werden. Beachten Sie, dass bei Pfadanforderungen im Satz der Elemente location die Intervallpunkte entlang des Pfads enthalten sind.
  • Ein Element des Typs elevation, mit dem die Höhe des Standorts in Metern angegeben wird.
  • Ein Wert für resolution, mit dem die maximale Entfernung zwischen den Datenpunkten, anhand derer die Höhe interpoliert wurde, in Metern angegeben wird. Falls die Auflösung nicht bekannt ist, fehlt diese Eigenschaft. Beachten Sie, dass bei der Übergabe von mehreren Punkten die Höhendaten gröber werden (höhere Werte für resolution). Ein Punkt sollte einzeln abgefragt werden, um den präzisesten Höhenwert zu erhalten.

Höhenbeispiele

Mit dem folgenden Code wird ein Klick auf der Karte mithilfe des Objekts LocationElevationRequest in eine Höhenanforderung übersetzt:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 63.333, lng: -150.5},  // Denali.
    mapTypeId: 'terrain'
  });
  var elevator = new google.maps.ElevationService;
  var infowindow = new google.maps.InfoWindow({map: map});

  // Add a listener for the click event. Display the elevation for the LatLng of
  // the click inside the infowindow.
  map.addListener('click', function(event) {
    displayLocationElevation(event.latLng, elevator, infowindow);
  });
}

function displayLocationElevation(location, elevator, infowindow) {
  // Initiate the location request
  elevator.getElevationForLocations({
    'locations': [location]
  }, function(results, status) {
    infowindow.setPosition(location);
    if (status === 'OK') {
      // Retrieve the first result
      if (results[0]) {
        // Open the infowindow indicating the elevation at the clicked position.
        infowindow.setContent('The elevation at this point <br>is ' +
            results[0].elevation + ' meters.');
      } else {
        infowindow.setContent('No results found');
      }
    } else {
      infowindow.setContent('Elevation service failed due to: ' + status);
    }
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 63.333, lng: -150.5},  // Denali.
    mapTypeId: 'terrain'
  });
  var elevator = new google.maps.ElevationService;
  var infowindow = new google.maps.InfoWindow({map: map});

  // Add a listener for the click event. Display the elevation for the LatLng of
  // the click inside the infowindow.
  map.addListener('click', function(event) {
    displayLocationElevation(event.latLng, elevator, infowindow);
  });
}

function displayLocationElevation(location, elevator, infowindow) {
  // Initiate the location request
  elevator.getElevationForLocations({
    'locations': [location]
  }, function(results, status) {
    infowindow.setPosition(location);
    if (status === 'OK') {
      // Retrieve the first result
      if (results[0]) {
        // Open the infowindow indicating the elevation at the clicked position.
        infowindow.setContent('The elevation at this point <br>is ' +
            results[0].elevation + ' meters.');
      } else {
        infowindow.setContent('No results found');
      }
    } else {
      infowindow.setContent('Elevation service failed due to: ' + status);
    }
  });
}

Beispiel anzeigen (elevation-simple.html).

Im folgenden Beispiel wird eine Polylinie anhand einer Reihe Koordinaten konstruiert; entlang dem Pfad werden mithilfe von Google Visualization API Höhendaten angezeigt. (Sie müssen diese API mithilfe von Google Common Loader laden.) Eine Höhenanforderung wird mithilfe von PathElevationRequest konstruiert:

// Load the Visualization API and the columnchart package.
google.load('visualization', '1', {packages: ['columnchart']});

function initMap() {
  // The following path marks a path from Mt. Whitney, the highest point in the
  // continental United States to Badwater, Death Valley, the lowest point.
  var path = [
      {lat: 36.579, lng: -118.292},  // Mt. Whitney
      {lat: 36.606, lng: -118.0638},  // Lone Pine
      {lat: 36.433, lng: -117.951},  // Owens Lake
      {lat: 36.588, lng: -116.943},  // Beatty Junction
      {lat: 36.34, lng: -117.468},  // Panama Mint Springs
      {lat: 36.24, lng: -116.832}];  // Badwater, Death Valley

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: path[1],
    mapTypeId: 'terrain'
  });

  // Create an ElevationService.
  var elevator = new google.maps.ElevationService;

  // Draw the path, using the Visualization API and the Elevation service.
  displayPathElevation(path, elevator, map);
}

function displayPathElevation(path, elevator, map) {
  // Display a polyline of the elevation path.
  new google.maps.Polyline({
    path: path,
    strokeColor: '#0000CC',
    strokeOpacity: 0.4,
    map: map
  });

  // Create a PathElevationRequest object using this array.
  // Ask for 256 samples along that path.
  // Initiate the path request.
  elevator.getElevationAlongPath({
    'path': path,
    'samples': 256
  }, plotElevation);
}

// Takes an array of ElevationResult objects, draws the path on the map
// and plots the elevation profile on a Visualization API ColumnChart.
function plotElevation(elevations, status) {
  var chartDiv = document.getElementById('elevation_chart');
  if (status !== 'OK') {
    // Show the error code inside the chartDiv.
    chartDiv.innerHTML = 'Cannot show elevation: request failed because ' +
        status;
    return;
  }
  // Create a new chart in the elevation_chart DIV.
  var chart = new google.visualization.ColumnChart(chartDiv);

  // Extract the data from which to populate the chart.
  // Because the samples are equidistant, the 'Sample'
  // column here does double duty as distance along the
  // X axis.
  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]);
  }

  // Draw the chart using the data within its DIV.
  chart.draw(data, {
    height: 150,
    legend: 'none',
    titleY: 'Elevation (m)'
  });
}
<div>
  <div id="map" style="height:250px;"></div>
  <div id="elevation_chart"></div>
</div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://www.google.com/jsapi"></script>
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// Load the Visualization API and the columnchart package.
google.load('visualization', '1', {packages: ['columnchart']});

function initMap() {
  // The following path marks a path from Mt. Whitney, the highest point in the
  // continental United States to Badwater, Death Valley, the lowest point.
  var path = [
      {lat: 36.579, lng: -118.292},  // Mt. Whitney
      {lat: 36.606, lng: -118.0638},  // Lone Pine
      {lat: 36.433, lng: -117.951},  // Owens Lake
      {lat: 36.588, lng: -116.943},  // Beatty Junction
      {lat: 36.34, lng: -117.468},  // Panama Mint Springs
      {lat: 36.24, lng: -116.832}];  // Badwater, Death Valley

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: path[1],
    mapTypeId: 'terrain'
  });

  // Create an ElevationService.
  var elevator = new google.maps.ElevationService;

  // Draw the path, using the Visualization API and the Elevation service.
  displayPathElevation(path, elevator, map);
}

function displayPathElevation(path, elevator, map) {
  // Display a polyline of the elevation path.
  new google.maps.Polyline({
    path: path,
    strokeColor: '#0000CC',
    strokeOpacity: 0.4,
    map: map
  });

  // Create a PathElevationRequest object using this array.
  // Ask for 256 samples along that path.
  // Initiate the path request.
  elevator.getElevationAlongPath({
    'path': path,
    'samples': 256
  }, plotElevation);
}

// Takes an array of ElevationResult objects, draws the path on the map
// and plots the elevation profile on a Visualization API ColumnChart.
function plotElevation(elevations, status) {
  var chartDiv = document.getElementById('elevation_chart');
  if (status !== 'OK') {
    // Show the error code inside the chartDiv.
    chartDiv.innerHTML = 'Cannot show elevation: request failed because ' +
        status;
    return;
  }
  // Create a new chart in the elevation_chart DIV.
  var chart = new google.visualization.ColumnChart(chartDiv);

  // Extract the data from which to populate the chart.
  // Because the samples are equidistant, the 'Sample'
  // column here does double duty as distance along the
  // X axis.
  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]);
  }

  // Draw the chart using the data within its DIV.
  chart.draw(data, {
    height: 150,
    legend: 'none',
    titleY: 'Elevation (m)'
  });
}

Beispiel anzeigen (elevation-paths.html).

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API