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

Geländeüberlagerungen

  1. Einführung
  2. Geländeüberlagerungen hinzufügen
  3. Geländeüberlagerungen entfernen

Einführung

Überlagerungen sind Objekte auf einer Karte, die an Breiten-/Längenkoordinaten gebunden sind, so dass sie beim Ziehen oder Vergrößern der Karte verschoben werden. Wenn Sie ein Bild auf einer Karte platzieren möchten, können Sie ein Objekt GroundOverlay verwenden.

Informationen zu weiteren Überlagerungstypen finden Sie im Eintrag Auf Karten zeichnen.

Geländeüberlagerungen hinzufügen

Der Konstruktor für ein Objekt GroundOverlay gibt die URL eines Bilds und die Werte für LatLngBounds des Bilds als Parameter an. Das Bild wird auf der Karte entsprechend den definierten Grenzen und der Kartenprojektion wiedergegeben.

// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.

var historicalOverlay;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 40.740, lng: -74.18}
  });

  var imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655
  };

  historicalOverlay = new google.maps.GroundOverlay(
      'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
      imageBounds);
  historicalOverlay.setMap(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>
// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.

var historicalOverlay;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 40.740, lng: -74.18}
  });

  var imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655
  };

  historicalOverlay = new google.maps.GroundOverlay(
      'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
      imageBounds);
  historicalOverlay.setMap(map);
}

Beispiel anzeigen (groundoverlay-simple.html).

Geländeüberlagerungen entfernen

Um eine Überlagerung aus einer Karte zu entfernen, rufen Sie die Methode setMap() auf, und übergeben Sie den Wert null. Beachten Sie, dass die Überlagerung mit der obigen Methode nicht gelöscht wird. Die Überlagerung wird lediglich aus der Karte entfernt. Wenn Sie die Überlagerung stattdessen löschen möchten, entfernen Sie sie aus der Karte, und setzen Sie anschließend die Überlagerung selbst auf null.

function removeOverlay() {
  historicalOverlay.setMap(null);
}

Beispiel anzeigen (overlay-remove.html).

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API