KML-Daten anzeigen

Übersicht

In dieser Anleitung erfahren Sie, wie Sie Daten aus 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. Wenn Sie auf der Karte unten eine Markierung anklicken, werden Daten in der Seitenleiste angezeigt.

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

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

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

  var kmlLayer = new google.maps.KmlLayer(src, {
    suppressInfoWindows: true,
    preserveViewport: false,
    map: map
  });
  kmlLayer.addListener('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
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Selbst ausprobieren

Sie können mit diesem Code in JSFiddle experimentieren. Dazu klicken Sie oben rechts im Codefenster auf das Symbol <>.

<!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';

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

        var kmlLayer = new google.maps.KmlLayer(src, {
          suppressInfoWindows: true,
          preserveViewport: false,
          map: map
        });
        kmlLayer.addListener('click', function(event) {
          var content = event.featureData.infoWindowHtml;
          var testimonial = document.getElementById('capture');
          testimonial.innerHTML = content;
        });
      }
    </script>
    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Erste Schritte

Zum Erstellen der Karte und Seitenleiste für diese Anleitung sind folgende Schritte erforderlich:

  1. KML-Datei einrichten
  2. „KMLLayer“-Objekt anzeigen
  3. Daten in der Seitenleiste anzeigen

KML-Datei für den Import einrichten

Die KML-Datei muss dem KML-Standard entsprechen. Weitere Informationen zu diesem Standard finden Sie auf der Website des Open Geospatial Consortium. Die Sprache wird auch in der KML-Dokumentation von Google beschrieben. Sie bietet sowohl eine Referenz- als auch eine konzeptionelle Entwicklerdokumentation.

Wenn Sie noch am Anfang sind und keine 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. Dazu bietet sich der filetype-Suchoperator von Google an.

    Ersetzen Sie velodromes durch einen Suchbegriff oder lassen Sie den Begriff ganz weg, damit nach allen KML-Dateien gesucht wird.

Wenn Sie eine eigene Datei erstellen, wird im Code in diesem Beispiel von Folgendem ausgegangen:

  • Sie haben die Datei öffentlich im Internet gehostet. Das ist für alle Anwendungen erforderlich, die KML in ein KMLLayer-Objekt laden, damit die Server von Google den Inhalt finden und abrufen können, um ihn auf der Karte anzuzeigen.
  • Die Datei befindet sich nicht auf einer passwortgeschützten Seite.
  • Für Ihre Features sind Infofensterinhalte vorhanden. Sie können diese Inhalte in ein description-Element aufnehmen oder mit einem ExtendedData-Element und einer Entitätsersetzung (siehe unten) einfügen. Beide sind über die Eigenschaft infoWindowHtml des Merkmals verfügbar.

„ExtendedData“-Elemente

Die KML-Datei in dieser Anleitung enthält Informationen zu Features in einem ExtendedData-Element. Um diese Informationen in die Beschreibung der Funktion einzubinden, verwenden Sie die Entitätsersetzung. Diese ist im Grunde eine Variable im BalloonStyle-Tag.

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 hat ein einzelnes Style-Element, das auf alle Ortsmarkierungen angewendet wird.
Dieses Style-Element weist dem BalloonStyle-Textelement den Wert #[video] zu.
Das Format $[x] weist den KML-Parser an, nach einem Data-Element namens video zu suchen und dieses als Text für das Info-Pop-up 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 Placemark enthält ein ExtendedData-Element, das das Element Data enthält. Jedes Placemark hat ein einzelnes Data-Element mit dem Namensattribut video.
In der Anleitung wird das eingebettete YouTube-Video als Wert für den Text der Info-Pop-ups der einzelnen Ortsmarkierungen verwendet.

Weitere Informationen zum Ersetzen von Entitäten finden Sie auf der Seite zum Hinzufügen von benutzerdefinierten Daten der KML-Dokumentation.

„KMLLayer“-Objekt anzeigen

Karte initialisieren

In der folgenden 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'
  });
}

Damit KML-Daten auf einer Karte angezeigt werden können, müssen Sie zuerst die Karte erstellen.
Dieser Code erstellt ein neues Google Maps-Objekt, legt Mittelpunkt und Zoomstufe dafür fest und hängt die Karte an das div-Element an.
Weitere Informationen zu den Grundlagen der Erstellung einer Google-Karte finden Sie in der Anleitung Google Maps-Karte mit einer Markierung auf Ihrer Website hinzufügen.

„KMLLayer“-Objekt erstellen

In dieser Tabelle wird der Code erläutert, mit dem ein „KMLLayer“-Objekt erstellt wird.

Code und Beschreibung 

var kmlLayer = new google.maps.KmlLayer();

Erstellt ein neues „KMLLayer“-Objekt, um Ihre KML-Daten anzuzeigen.		 

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 definiert die URL Ihrer KML-Datei. Außerdem legt er Eigenschaften für das „KMLLayer“-Objekt fest, um…
  • die Ebene anzuweisen, bei einem Klick kein Infofenster einzublenden.
  • die Karte anzuweisen, auf den Begrenzungsrahmen des Inhalts der Ebene zu zentrieren und zu zoomen.
  • die Karte auf das zuvor erstellte Map-Objekt zu setzen.
Im Referenzhandbuch zur Maps JavaScript API finden Sie alle verfügbaren Optionen für diese Ebene.
Laden Sie Ihre HTML-Datei, um den Inhalt der KML-Datei als Ebene über der Basiskarte anzuzeigen. Ein Klick auf ein Feature hat allerdings noch keine Auswirkungen.

Daten in der Seitenleiste anzeigen

In diesem Abschnitt werden die Einstellungen erläutert, mit denen der Inhalt des Infofensters in der Seitenleiste angezeigt wird, wenn Sie auf ein Feature auf der Karte klicken. Das läuft so ab:

  • Es wird auf ein Klickereignis auf eines der Features des „KMLLayer“-Objekts gewartet.
  • Die Daten des angeklickten Features werden erfasst.
  • Die Daten werden in der Seitenleiste ausgegeben.

Ereignis-Listener hinzufügen

Google Maps bietet eine Funktion, mit der Nutzerereignisse auf der Karte, wie Klicks oder Tastatureingaben, erfasst werden und entsprechend darauf reagiert werden kann. Für solche click-Ereignisse wird ein Listener hinzugefügt.

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

Code und Beschreibung 

kmlLayer.addListener('click', function(event) {});

Für den Ereignis-Listener kmlLayer.addListener ist Folgendes wichtig:
  • Die Art des Ereignisses, das erfasst werden soll. Hier sind es Ereignisse vom Typ click.
  • Die Funktion, die beim Eintreten des entsprechenden Ereignisses aufgerufen werden soll.
Weitere Informationen zu Ereignissen finden Sie im Entwicklerhandbuch.

KML-Daten in der Seitenleiste ausgeben

Inzwischen haben Sie Klickereignisse für die Features der Ebene erfasst. Nun können Sie die Anwendung so konfigurieren, dass die Daten des Features und der Inhalt des Infofensters in der Seitenleiste ausgegeben werden.

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

Code und Beschreibung 

var content = event.featureData.infoWindowHtml;

Übergibt den Inhalt des Infofensters an eine Variable. 

var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;

Identifiziert das div-Element, an das der Inhalt übergeben werden soll, und ersetzt den HTML-Code darin durch den Inhalt des Features. 

kmlLayer.addListener('click', function(event) {
  var content = event.featureData.infoWindowHtml;
  var testimonial = document.getElementById('capture');
  testimonial.innerHTML = content;
});

Diese Codezeilen werden zur Funktion im addListener-Konstruktor.

Jedes Mal, wenn Sie nun ein KML-Element auf der Karte anklicken, wird die Seitenleiste aktualisiert und der Inhalt des entsprechenden Infofensters angezeigt.

Weitere Informationen

Weitere Informationen zu KML-Dateien