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

Anzeigen von KML

Übersicht

In dieser Anleitung erfahren Sie, wie Sie die Daten einer KML-Datei in einer Google-Karte und Seitenleiste anzeigen. Weitere Informationen zur Verwendung von KML-Dateien in Karten finden Sie im Leitfaden zu KML-Ebenen. Klicken Sie unten in der Karte auf einen Marker, um die Daten in der Seitenleiste anzuzeigen.

Der folgende Abschnitt enthält den gesamten Code, den Sie zum Erstellen der Karte und der Seitenleiste benötigen.

var map;
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

/**
 * Initializes the map and calls the function that loads the KML layer.
 */
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });
  loadKmlLayer(src, map);
}

/**
 * Adds a KMLLayer based on the URL passed. Clicking on a marker
 * results in the balloon content being loaded into the right-hand div.
 * @param {string} src A URL for a KML file.
 */
function loadKmlLayer(src, map) {
  var kmlLayer = new google.maps.KmlLayer(src, {
    suppressInfoWindows: true,
    preserveViewport: false,
    map: map
  });
  google.maps.event.addListener(kmlLayer, 'click', function(event) {
    var content = event.featureData.infoWindowHtml;
    var testimonial = document.getElementById('capture');
    testimonial.innerHTML = content;
  });
}
<div id="map"></div>
<div id="capture"></div>
html, body {
  height: 370px;
  padding: 0;
  margin: 0;
  }
#map {
 height: 360px;
 width: 300px;
 overflow: hidden;
 float: left;
 border: thin solid #333;
 }
#capture {
 height: 360px;
 width: 480px;
 overflow: hidden;
 float: left;
 background-color: #ECECFB;
 border: thin solid #333;
 border-left: none;
 }
 <!-- 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>


Probieren Sie es selbst aus

Bewegen Sie die Maus oben rechts über den Codeblock, um den Code zu kopieren, oder öffnen Sie ihn in JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>KML Click Capture Sample</title>
    <style>
      html, body {
        height: 370px;
        padding: 0;
        margin: 0;
        }
      #map {
       height: 360px;
       width: 300px;
       overflow: hidden;
       float: left;
       border: thin solid #333;
       }
      #capture {
       height: 360px;
       width: 480px;
       overflow: hidden;
       float: left;
       background-color: #ECECFB;
       border: thin solid #333;
       border-left: none;
       }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="capture"></div>
    <script>
      var map;
      var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

      /**
       * Initializes the map and calls the function that loads the KML layer.
       */
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-19.257753, 146.823688),
          zoom: 2,
          mapTypeId: 'terrain'
        });
        loadKmlLayer(src, map);
      }

      /**
       * Adds a KMLLayer based on the URL passed. Clicking on a marker
       * results in the balloon content being loaded into the right-hand div.
       * @param {string} src A URL for a KML file.
       */
      function loadKmlLayer(src, map) {
        var kmlLayer = new google.maps.KmlLayer(src, {
          suppressInfoWindows: true,
          preserveViewport: false,
          map: map
        });
        google.maps.event.addListener(kmlLayer, 'click', function(event) {
          var content = event.featureData.infoWindowHtml;
          var testimonial = document.getElementById('capture');
          testimonial.innerHTML = content;
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Erste Schritte

Dies sind die Phasen zum Erstellen der Karte und der Seitenleiste für diese Anleitung:

  1. Einrichten der KML-Datei
  2. Anzeigen der KML-Ebene (Objekt „KMLlayer“)
  3. Anzeigen der Daten in der Seitenleiste

Einrichten der KML-Datei für den Import

Ihre KML-Datei muss den KML-Standard erfüllen. Nähere Informationen zu diesem Standard finden Sie auf der Website des Open Geospatial Consortium. In der KML-Dokumentation von Google wird auch die Sprache beschrieben. Dort finden Sie außerdem sowohl eine Referenz als auch eine konzeptionelle Entwicklerdokumentation.

Wenn Sie sich nur zu Schulungszwecken mit dem Thema befassen und keine eigene KML-Datei haben, können Sie:

  • Die folgende KML-Datei für diese Anleitung verwenden:

    https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml

  • Eine KML-Datei im Web suchen. Sie können den Suchoperator filetype von Google verwenden.

    Ersetzen Sie velodromes durch einen beliebigen Suchbegriff oder lassen Sie den Begriff ganz weg, damit alle KML-Dateien gefunden werden.

Wenn Sie Ihre eigene Datei erstellen, wird in diesem Codebeispiel Folgendes vorausgesetzt:

  • Die Datei wurde öffentlich im Internet gehostet. Dies ist eine Voraussetzung für alle Anwendungen, die KML in eine KMLLayer laden, sodass die Server von Google die Inhalte finden und abrufen können, um sie auf der Karte anzuzeigen.
  • Die Datei befindet sich nicht auf einer kennwortgeschützten Seite.
  • Für Ihre Funktionen sind Info-Fensterinhalte vorhanden. Diese Inhalte können in ein Element vom Typ description oder mithilfe eines Elements vom Typ ExtendedData und über Entitätsersetzungen eingefügt werden (weitere Informationen finden Sie weiter unten). Auf beides kann als Eigenschaft infoWindowHtml der Funktion zugegriffen werden.

Elemente vom Typ ExtendedData

Die KML-Datei in dieser Anleitung enthält Informationen zu Funktionen in einem Element vom Typ ExtendedData. Um diese Informationen in die Beschreibung der Funktion zu übernehmen, verwenden Sie die Entitätsersetzung, bei der es sich im Wesentlichen um eine Variable im Tag BalloonStyle handelt.

In der folgenden Tabelle wird der Code für diesen Abschnitt erläutert.

Code und Beschreibung 
<Style id="west_campus_style">
  <IconStyle>
    <Icon>
      <href>https://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png
      </href>
    </Icon>
  </IconStyle>
  <BalloonStyle>
    <text>$[video]</text>
  </BalloonStyle>
</Style>

Die KML-Datei enthält ein einzelnes Element vom Typ Style, das auf alle Ortsmarken angewendet wird.
Dieses Element vom Typ Style weist den Wert #[video] dem Textelement für BalloonStyle zu.
Durch das Format $[x] wird der KML-Parser angewiesen, nach einem Element vom Typ Data namens video zu suchen und es als Sprechblasentext zu verwenden.		 
<Placemark>
    <name>Google West Campus 1</name>
    <styleUrl>#west_campus_style</styleUrl>
    <ExtendedData>
      <Data name="video">
        <value><![CDATA[<iframe width="640" height="360"
          src="https://www.youtube.com/embed/ZE8ODPL2VPI" frameborder="0"
          allowfullscreen></iframe><br><br>]]></value>
      </Data>
    </ExtendedData>
    <Point>
      <coordinates>-122.0914977709329,37.42390182131783,0</coordinates>
    </Point>
</Placemark>

Jede Ortsmarke (Placemark) enthält ein Element vom Typ ExtendedData, das das Element Data enthält. Beachten Sie, dass jede Ortsmarke (Placemark) über ein einzelnes Element vom Typ Data mit dem Namensattribut video verfügt.
In der Datei für diese Anleitung wird das eingebettete YouTube-Video als Wert des Sprechblasentexts jeder Ortsmarke verwendet.

Weitere Informationen über die Entitätsersetzung finden Sie im Kapitel Hinzufügen benutzerdefinierter Daten der KML-Dokumentation.

Anzeigen der KML-Ebene (Objekt „KMLLayer“)

Initialisieren der Karte

In dieser Tabelle wird der Code für diesen Abschnitt erläutert.

Code und Beschreibung 
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });
}

Um KML auf einer Karte anzuzeigen, müssen Sie zuerst die Karte erstellen.
Mit diesem Code wird ein neues Google-Kartenobjekt erstellt, es wird angewiesen, wo die Zentrierung und die Vergrößerung erfolgen soll und und die Karte wird dem Objekt div hinzugefügt.
Weitere Informationen zu den Grundlagen des Erstellens einer Google-Karte finden Sie in der Anleitung Hinzufügen einer Google-Karte mit einem Marker zu Ihrer Website .

Erstellen der KML-Ebene (Objekt „KMLLayer“)

In dieser Tabelle wird der Code erläutert, mit dem eine KML-Ebene (Objekt „KMLLayer“) erstellt wird.

Code und Beschreibung 
var kmlLayer = new google.maps.KmlLayer();

Erstellt ein neues Objekt vom Typ KMLLayer zum Anzeigen von KML.		 
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
var kmlLayer = new google.maps.KmlLayer(src, {
  suppressInfoWindows: true,
  preserveViewport: false,
  map: map
});

Der KMLLayer-Konstruktor legt die URL Ihrer KML-Datei fest. Er definiert außerdem die Eigenschaften des KMLLayer-Objekts, mit denen Folgendes ausgeführt wird:
  • Weist die Ebene an, kein Info-Fenster anzuzeigen, wenn darauf geklickt wird.
  • Weist die Karte an, bei der Zentrierung und Vergrößerung den Begrenzungsrahmen der Inhalte der Ebene zu berücksichtigen.
  • Legt das zuvor erstellte Kartenobjekt als Karte fest.
Im Google Maps JavaScript API-Referenzleitfaden werden alle verfügbaren Optionen für diese Ebene aufgelistet.
Laden Sie Ihre HTML-Datei, um den Inhalt der KML-Datei als Ebene anzuzeigen, die über die Basiskarte gelegt wird. Wenn Sie auf eine Funktion klicken, hat dies jedoch noch keine Aktion zur Folge.

Anzeigen von Daten in der Seitenleiste

In diesem Abschnitt werden die Einstellungen erläutert, mit denen Inhalte von Info-Fenstern in der Seitenleiste angezeigt werden, wenn Sie auf eine Funktion in der Karte klicken. Dies geschieht folgendermaßen:

  • Warten auf ein Klickereignis für eine der Funktionen des Objekts KMLLayer.
  • Erfassen der Daten der Funktion, auf die geklickt wurde.
  • Schreiben der Daten in die Seitenleiste.

Hinzufügen eines Ereignislisteners

Google Maps bietet eine Funktion zum Überwachen und Reagieren auf Nutzerereignisse auf der Karte, wie Klicks und Tastenanschläge. Sie fügt einen Listener für derartige Ereignisse vom Typ click hinzu.

In der folgenden Tabelle wird der Code für diesen Abschnitt erläutert.

Code und Beschreibung 
google.maps.event.addListener(kmlLayer, 'click', function(event) {});

Der Ereignislistener google.maps.event.addListener konzentriert sich auf Folgendes:
  • Das Objekt, das gewartet werden soll. In dieser Anleitung ist dies das Objekt kmlLayer.
  • Den Typ des Ereignisses, auf das gewartet werden soll. In dieser Anleitung ist dies das Ereignis click.
  • Eine Funktion, die aufgerufen werden soll, wenn das Ereignis eintritt.
Weitere Informationen zu Ereignissen finden Sie im Entwickler-Leitfaden.

Schreiben der KML-Funktionsdaten in die Seitenleiste

Wenn Sie diese Phase der Anleitung erreicht haben, haben Sie Klickereignisse für die Funktionen der Ebene erfasst. Sie können die Anwendung jetzt so konfigurieren, dass die Daten der Funktion und der Inhalt des Info-Fensters in die Seitenleiste übernommen werden.

In der folgenden Tabelle wird der Code für diesen Abschnitt erläutert.

Code und Beschreibung 
var content = event.featureData.infoWindowHtml;

Schreibt den Inhalt des Info-Fensters in eine Variable. 
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;

Ermittelt das Objekt vom Typ div, in das geschrieben werden soll, und ersetzt den darin enthaltenen HTML-Code durch den Inhalt der Funktion. 
google.maps.event.addListener(kmlLayer, 'click', function(event) {
  var content = event.featureData.infoWindowHtml;
  var testimonial = document.getElementById('capture');
  testimonial.innerHTML = content;
});

Diese Codezeilen werden zu der Funktion im Konstruktor addListener .

Jedes Mal, wenn Sie auf eine KML-Funktion auf der Karte klicken, wird jetzt die Seitenleiste aktualisiert und der Inhalt des entsprechenden Info-Fensters angezeigt.

Weitere Informationen

Hier erfahren Sie mehr über die Verwendung von KML-Dateien.

Feedback geben zu...

Diese Seite
Feedback zur Dokumentation
Google Maps JavaScript API
Google Maps JavaScript API
Feedback zum Produkt
Weitere Fragen? Besuchen Sie unsere Supportseite.