KML-Daten einblenden

Übersicht

In diesem Tutorial erfahren Sie, wie Sie Daten aus einer KML-Datei in einer Google-Karte und Seitenleiste anzeigen lassen. 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. Klicken Sie dazu rechts oben 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 dieses Tutorial sind folgende Schritte erforderlich:

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

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 KML wird auch in der KML-Dokumentation von Google beschrieben. Diese umfasst sowohl eine Referenzdokumentation als auch eine konzeptbezogene Entwicklerdokumentation.

Wenn Sie noch am Anfang stehen und keine KML-Datei haben, können Sie:

  • die folgende KML-Datei für dieses Tutorial 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 Kartenelemente sind Infofensterinhalte vorhanden. Sie können diese Inhalte in ein description-Element aufnehmen oder sie mit einem ExtendedData-Element und einer Entitätsersetzung (siehe unten) einfügen. Beide sind über die Eigenschaft infoWindowHtml des Kartenelements verfügbar.

„ExtendedData“-Elemente

Die KML-Datei in diesem Tutorial enthält Informationen zu Kartenelementen in einem ExtendedData-Element. Um diese Informationen in die Beschreibung des Kartenelements einzubinden, verwenden Sie die Entitätsersetzung. Diese ist im Wesentlichen 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. Jede Placemark hat ein einzelnes Data-Element mit dem Namensattribut video.
In der Datei dieses Tutorials 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 in der KML-Dokumentation auf der Seite Benutzerdefinierte Daten hinzufügen.

„KMLLayer“-Objekt anzeigen lassen

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.
Mit diesem Code wird ein neues GoogleMap-Objekt erstellt, Mittelpunkt und Zoomstufe dafür festgelegt und die Karte an das div-Element angehängt.
Weitere Informationen zu den Grundlagen der Erstellung einer Google-Karte finden Sie im Tutorial Google-Karte mit einer Markierung auf Ihrer Website einfü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 zum Anzeigen Ihrer KML-Daten.		 
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.
  • als Karte das zuvor erstellte Map-Objekt zu definieren.
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 anzeigen zu lassen. Ein Klick auf ein Kartenelement hat allerdings an diesem Punkt noch keine Auswirkungen.

Daten in der Seitenleiste anzeigen lassen

In diesem Abschnitt werden die Einstellungen erläutert, mit denen der Inhalt des Infofensters in der Seitenleiste angezeigt wird, wenn auf ein Kartenelement geklickt wird. Dies läuft so ab:

  • Es wird mithilfe eines Listeners auf das Ereignis gewartet, dass auf eines der Kartenelemente des „KMLLayer“-Objekts geklickt wird (Click-Event).
  • Die Daten des angeklickten Kartenelements werden erfasst.
  • Die Daten werden in der Seitenleiste ausgegeben.

Event-Listener hinzufügen

Google Maps bietet eine Funktion, mit der Sie auf Nutzerereignisse auf der Karte wie Klicks oder Tastatureingaben warten und entsprechend darauf reagieren können. 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 Event-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.

Daten von KML-Kartenelementen in der Seitenleiste ausgeben

Inzwischen haben Sie Click-Events für die Kartenelemente der Ebene erfasst. Nun können Sie die Anwendung so konfigurieren, dass die Daten des Kartenelements 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 dessen HTML-Code durch den Inhalt des Kartenelements. 
kmlLayer.addListener('click', function(event) {
  var content = event.featureData.infoWindowHtml;
  var testimonial = document.getElementById('capture');
  testimonial.innerHTML = content;
});

Diese Codezeilen werden zur Programmfunktion im addListener-Konstruktor.

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

Weitere Informationen

Weitere Informationen zu KML-Dateien