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

Dienst für maximale Bildvergrößerung

  1. Maximale Bildvergrößerung
  2. MaxZoom-Anforderungen
  3. MaxZoom-Antworten

Übersicht

In Google Maps API werden Kartenkacheln mit verschiedenen Vergrößerungsstufen für das Kartentyp-Bildmaterial bereitgestellt. Die meisten Bilder für Straßenkarten sind beispielsweise für die Vergrößerungsstufen 0 bis 18 verfügbar. Satellitenbilder variieren stärker, da diese Bilder nicht generiert, sondern direkt fotografiert werden.

Da Satellitenbilder für entfernte Standorte – z. B. dünnbesiedelte Regionen oder Teile des Meeres – nicht immer in großen Vergrößerungsstufen verfügbar sind, ist es sinnvoll größte verfügbare Vergrößerungsstufe für Bilder an einem bestimmten Standort im Vorfeld zu kennen. Das Objekt MaxZoomService bietet eine einfache Schnittstelle zur Ermittlung der maximalen Vergrößerungsstufe an einem bestimmten Standort, für den Google Maps über Satellitenbilder verfügt.

MaxZoom-Anforderungen

Der Zugriff auf MaxZoomService 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.

Um eine Anforderung an MaxZoomService zu stellen, rufen Sie einfach getMaxZoomAtLatLng() auf, übergeben Sie den Wert LatLng des Standorts und eine Callbackfunktion, die nach Abschluss der Anforderung ausgeführt wird.

MaxZoom-Antworten

Wenn mit getMaxZoomAtLatLng() eine Callbackfunktion ausgeführt wird, werden zwei Parameter zurückgegeben:

  • status: enthält den MaxZoomStatus der Anforderung.
  • zoom enthält die Vergrößerungsstufe. Wenn der Dienst fehlschlägt, ist dieser Wert nicht vorhanden.

Mit dem Code status kann einer der folgenden Werte zurückgegeben werden:

  • OK bedeutet, dass mit dem Dienst die maximale Vergrößerungsstufe für die Satellitenbilder gefunden wurde.
  • ERROR bedeutet, dass die MaxZoom-Anforderung nicht verarbeitet werden konnte.

Im nachfolgenden Beispiel ist eine Karte der Metropole Tokio dargestellt: Wenn Sie an einer beliebigen Stelle auf die Karte klicken, wird die maximale Vergrößerungsstufe für diesen Standort angezeigt. (Vergrößerungsstufen um Tokio variieren im Allgemeinen zwischen den Vergrößerungsstufen 18 und 21.)

var map;
var maxZoomService;
var infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 35.6894, lng: 139.692},
    mapTypeId: 'hybrid'
  });

  infoWindow = new google.maps.InfoWindow();

  maxZoomService = new google.maps.MaxZoomService();

  map.addListener('click', showMaxZoom);
}

function showMaxZoom(e) {
  maxZoomService.getMaxZoomAtLatLng(e.latLng, function(response) {
    if (response.status !== 'OK') {
      infoWindow.setContent('Error in MaxZoomService');
    } else {
      infoWindow.setContent(
          'The maximum zoom at this location is: ' + response.zoom);
    }
    infoWindow.setPosition(e.latLng);
    infoWindow.open(map);
  });
}
<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>
var map;
var maxZoomService;
var infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 35.6894, lng: 139.692},
    mapTypeId: 'hybrid'
  });

  infoWindow = new google.maps.InfoWindow();

  maxZoomService = new google.maps.MaxZoomService();

  map.addListener('click', showMaxZoom);
}

function showMaxZoom(e) {
  maxZoomService.getMaxZoomAtLatLng(e.latLng, function(response) {
    if (response.status !== 'OK') {
      infoWindow.setContent('Error in MaxZoomService');
    } else {
      infoWindow.setContent(
          'The maximum zoom at this location is: ' + response.zoom);
    }
    infoWindow.setPosition(e.latLng);
    infoWindow.open(map);
  });
}

Beispiel anzeigen (maxzoom-simple.html).

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API