Ü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:
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.kmleine KML-Datei im Web suchen. Dazu bietet sich der
filetype-Suchoperator von Google an.
Ersetzen Sie
velodromesdurch 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 einemExtendedData-Element und einer Entitätsersetzung (siehe unten) einfügen. Beide sind über die EigenschaftinfoWindowHtmldes 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 | |
|---|---|
|
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. |
|
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 | |
|---|---|
|
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 | |
|---|---|
|
Erstellt ein neues „KMLLayer“-Objekt zum Anzeigen Ihrer KML-Daten. |
|
Der „KMLLayer“-Konstruktor definiert die URL Ihrer KML-Datei. Außerdem legt er Eigenschaften für das „KMLLayer“-Objekt fest, um:
|
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 | |
|---|---|
|
Für den Event-Listener kmlLayer.addListener ist Folgendes wichtig:
|
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 | |
|---|---|
|
Übergibt den Inhalt des Infofensters an eine Variable. |
|
Identifiziert das div-Element, an das der Inhalt übergeben werden soll, und ersetzt dessen HTML-Code durch den Inhalt des Kartenelements.
|
|
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.