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

Info-Fenster

  1. Einführung
  2. Info-Fenster hinzufügen
  3. Info-Fenster öffnen
  4. Info-Fenster schließen
  5. Info-Fenster verschieben

Einführung

In einem Info-Fenster (InfoWindow) werden Inhalte (normalerweise Texte oder Bilder) in einem Popup-Fenster über der Karte an einem bestimmten Ort angezeigt. Das Info-Fenster besteht aus einem Inhaltsbereich und einem sich verjüngenden Hals. Die Spitze des Halses ist an einen bestimmten Ort auf der Karte angefügt.

In der Regel wird ein Info-Fenster an einen Marker angefügt, Sie können Info-Fenster aber auch an eine Breiten-/Längenangabe anfügen, wie im Abschnitt zum Hinzufügen von Info-Fenstern weiter unten beschrieben.

Generell betrachtet sind Info-Fenster ein Überlagerungstyp. Informationen zu weiteren Überlagerungstypen finden Sie im Eintrag Auf Karten zeichnen.

Info-Fenster hinzufügen

Der Konstruktor InfoWindow verwendet ein Objektliteral InfoWindowOptions, mit dem die Anfangsparameter für die Anzeige des Info-Fensters angegeben werden.

Das Objektliteral InfoWindowOptions enthält folgende Felder:

  • Das Feld content enthält entweder eine Textzeichenfolge oder einen DOM-Knoten für die Anzeige im Info-Fenster.
  • Das Feld pixelOffset enthält einen Offset von der Spitze des Info-Fensters zum Standort, an dem das Fenster verankert ist. In der Praxis sollte es nicht erforderlich sein, einen Wert für dieses Feld zu definieren. Sie können den Standardwert verwenden.
  • Das Feld position enthält den Wert LatLng, an dem das Info-Fenster verankert ist. Hinweis: Ein Info-Fenster (InfoWindow) kann entweder an einem Objekt Marker verankert sein (was bedeutet, dass seine Position auf der Markerposition basiert) oder direkt auf der Karte an einem definierten Wert LatLng. Eine Möglichkeit, einen Wert vom Typ LatLng abzurufen, besteht in der Verwendung des Geocoding-Dienstes. Wird ein Info-Fenster zu einem Marker geöffnet, wird die position automatisch aktualisiert.
  • Das Feld width gibt die maximale Breite des Info-Fensters in Pixeln an. Standardmäßig passt sich die Größe des Info-Fensters an den Fensterinhalt an; der Text wird automatisch umgebrochen, wenn das Info-Fenster die Karte ausfüllt. Wenn Sie einen Wert maxWidth hinzufügen, wird der Text im Fenster automatisch umgebrochen, um die festgelegte Breite des Info-Fensters sicherzustellen. Wenn die maximale Breite erreicht ist und in vertikaler Richtung Platz auf dem Bildschirm ist, kann das Info-Fenster in vertikaler Richtung erweitert werden.

Ein Info-Fenster (InfoWindow) kann eine Textzeichenfolge, einen HTML-Codeausschnitt oder ein DOM-Element enthalten. Um den Inhalt zu definieren, geben Sie ihn in InfoWindowOptions ein, oder rufen Sie explizit setContent() für das Info-Fenster (InfoWindow) auf.

Wenn Sie eine genaue Größe für den Inhalt festlegen möchten, setzen Sie den Inhalt in ein Element <div>, und formatieren Sie das Element <div> mit CSS. Sie können CSS außerdem dazu verwenden, den Bildlauf zu aktivieren. Hinweis: Wenn Sie den Bildlauf nicht aktivieren und der Inhalt den im Info-Fenster verfügbaren Platz übersteigt, kann der Inhalt über das Info-Fenster herausragen.

Info-Fenster öffnen

Wenn Sie ein Info-Fenster erstellen, wird es nicht automatisch auf der Karte angezeigt. Damit das Info-Fenster sichtbar ist, müssen Sie die Methode open() im Info-Fenster (InfoWindow) aufrufen und den Wert Map für die Karte, auf der das Fenster geöffnet werden soll, sowie optional den Marker, an dem das Fenster verankert werden soll, übergeben. Ist kein Marker angegeben, wird das Info-Fenster an seiner Eigenschaft position geöffnet.

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}
<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 displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}

Beispiel anzeigen (infowindow-simple.html).

Im folgenden Beispiel wird der Wert maxWidth eines Info-Fensters definiert: Beispiel anzeigen (infowindow-simple-max.html).

Info-Fenster schließen

Standardmäßig bleibt ein Info-Fenster (InfoWindow) geöffnet, bis der Benutzer auf das Steuerelement zum Schließen klickt (ein Kreuz oben rechts im Info-Fenster). Bei Bedarf können Sie das Info-Fenster explizit schließen, indem Sie die zugehörige Methode close() aufrufen.

Info-Fenster verschieben

Es gibt verschiedene Möglichkeiten, um die Position eines Info-Fensters zu ändern.

  • Rufen Sie setPosition() im Info-Fenster auf, oder:
  • Fügen Sie das Info-Fenster mit der Methode InfoWindow.open() an einen neuen Marker an. Hinweis: Wenn Sie open() aufrufen, ohne einen Marker zu übergeben, wird im Info-Fenster (InfoWindow) die Position verwendet, die bei der Konstruktion durch das Objektliteral InfoWindowOptions festgelegt wurde.

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API