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

KML- und GeoRSS-Ebenen

Mit KmlLayer werden KML- und GeoRSS-Elemente in einer Google Maps JavaScript API-Kachelüberlagerung wiedergegeben.

Übersicht

Die Google Maps JavaScript API unterstützt die KML- und GeoRSS-Datenformate zur Anzeige geografischer Informationen. Diese Daten werden auf einer Karte mithilfe eines Objekts KmlLayer angezeigt, dessen Konstruktor die URL einer öffentlich zugänglichen KML- oder GeoRSS-Datei verwendet.

Mit der Maps JavaScript API werden die bereitgestellten XML-Daten in eine KML-Darstellung umgewandelt, die dann mithilfe einer Maps JavaScript API-Kachelüberlagerung angezeigt wird. Die KML-Darstellung (und das Verhalten) entspricht bekannten Maps JavaScript API-Überlagerungselementen. Das KML-Element <Placemark> und das GeoRSS-Element point werden beispielsweise als Marker wiedergegeben, Elemente vom Typ <LineString> als Polylinien und Elemente vom Typ <Polygon> als Polygone. Vergleichbar werden Elemente vom Typ <GroundOverlay> als rechteckige Bilder auf der Karte dargestellt. Wichtig ist jedoch, dass es sich bei diesen Objekten nicht um Markers, Polylines, Polygons oder GroundOverlays der Google Maps JavaScript API handelt. Stattdessen werden sie in einem einzelnen Objekt auf der Karte wiedergegeben.

Objekte vom Typ KmlLayer werden auf der Karte dargestellt, sobald ihre Eigenschaft map definiert wurde. Sie können diese Objekte aus der Karte entfernen, indem Sie setMap() aufrufen und den Wert null übergeben. Mit dem Objekt KmlLayer wird die Wiedergabe dieser untergeordneten Elemente gesteuert, indem automatisch die entsprechenden Funktionen für die definierten Grenzen der Karte abgerufen werden. Wenn sich die Grenzen ändern, werden die Funktionen im aktuellen Viewport automatisch wiedergegeben.

Da alle Komponenten eines Objekts KmlLayer auf Anforderung dargestellt werden, können Sie mit der Ebene ganz einfach die Wiedergabe tausender Marker, Polylinien und Polygone verwalten. Beachten Sie, dass Sie die darin enthaltenen Objekte nicht direkt aufrufen können, obwohl für jedes einzelne Objekt Klickereignisse vorhanden sind, die Daten zu diesen einzelnen Objekten zurückgeben.

Optionen für KML-Ebenen

Der Konstruktor KmlLayer() übergibt wahlweise verschiedene Optionen KmlLayerOptions:

  • Mit map wird die Karte (Map) definiert, auf der KmlLayer wiedergegeben wird. Sie können KmlLayer ausblenden, indem Sie diesen Wert in der Methode setMap() auf null setzen.
  • Mit preserveViewport wird festgelegt, dass die Karte nicht an die Größe der Inhalte von KmlLayer angepasst werden soll, wenn die Ebene angezeigt wird. Standardmäßig wird die Karte bei der Anzeige von KmlLayer vergrößert und so positioniert, dass sämtliche Inhalte der Ebene angezeigt werden.
  • Mit suppressInfoWindows wird angegeben, dass klickbare Funktionen in KmlLayer keine Anzeige von Objekten InfoWindow auslösen sollen.

Darüber hinaus enthält die Option, sobald KmlLayer wiedergegeben wird, eine nicht veränderliche Eigenschaft metadata, die den Namen, die Beschreibung, den Codeausschnitt und den Verfasser in einem Objektliteral KmlLayerMetadata enthält. Diese Informationen können Sie mithilfe der Methode getMetadata() überprüfen. Da die Wiedergabe von Objekten des Typs KmlLayer asynchrone Kommunikation mit einem externen Server erfordert, müssen Sie auf das Ereignis metadata_changed warten, mit dem angegeben wird, dass für die Eigenschaft ein Wert gesetzt wurde.

Im folgenden Beispiel wird KmlLayer aus dem vorgegebenen GeoRSS-Feed konstruiert:

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

  var georssLayer = new google.maps.KmlLayer({
    url: 'http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss'
  });
  georssLayer.setMap(map);
}
<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>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 49.496675, lng: -102.65625}
  });

  var georssLayer = new google.maps.KmlLayer({
    url: 'http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss'
  });
  georssLayer.setMap(map);
}

GeoRSS-Beispiel anzeigen.

Im folgenden Beispiel wird KmlLayer aus dem vorgegebenen KML-Feed konstruiert:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 41.876, lng: -87.624}
  });

  var ctaLayer = new google.maps.KmlLayer({
    url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
    map: map
  });
}
<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>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 41.876, lng: -87.624}
  });

  var ctaLayer = new google.maps.KmlLayer({
    url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
    map: map
  });
}

KML-Beispiel anzeigen

Details zu KML-Funktionen

Da KML eine große Anzahl Funktionen umfassen kann, können Sie nicht direkt auf Funktionsdaten des Objekts KmlLayer zugreifen. Stattdessen werden die angezeigten Funktionen so dargestellt, dass sie wie klickbare Maps JavaScript API-Überlagerungen aussehen. Werden einzelne Funktionen angeklickt, wird standardmäßig ein Info-Fenster (InfoWindow) mit KML-Informationen zum Titel (<title>) und zur Beschreibung (<description>) der jeweiligen Funktion angezeigt. Außerdem wird durch Klicken auf eine KML-Funktion ein Ereignis KmlMouseEvent generiert, mit dem folgende Informationen übergeben werden:

  • Mit position werden die Breiten- und Längenkoordinaten angegeben, an denen das Info-Fenster (InfoWindow) für diese KML-Funktion verankert ist. Diese Position entspricht bei Polygonen, Polylinien und GroundOverlays der Klickposition, bei Markern jedoch dem tatsächlichen Ursprung des Markers.
  • Mit pixelOffset wird der Offset von der obigen position zum Anker des Endpunktes des Info-Fensters (InfoWindow) angegeben. Bei Polygonalobjekten ist dieser Offset normalerweise 0,0; bei Markern enthält der dagegen die Höhe des Markers.
  • featureData enthält eine JSON-Struktur von KmlFeatureData.

Nachstehend finden Sie ein Beispielobjekt KmlFeatureData.

{
  author: {
    email: "nobody@google.com",
    name: "Mr Nobody",
    uri: "http://example.com"
  },
  description: "description",
  id: "id",
  infoWindowHtml: "html",
  name: "name",
  snippet: "snippet"
}

Im folgenden Beispiel wird der Text <Description> der KML-Funktion in einem seitlichen Element <div> angezeigt, wenn auf die Funktion geklickt wird:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: 37.06, lng: -95.68}
  });

  var kmlLayer = new google.maps.KmlLayer({
    url: 'http://googlemaps.github.io/kml-samples/kml/Placemark/placemark.kml',
    suppressInfoWindows: true,
    map: map
  });

  kmlLayer.addListener('click', function(kmlEvent) {
    var text = kmlEvent.featureData.description;
    showInContentWindow(text);
  });

  function showInContentWindow(text) {
    var sidediv = document.getElementById('content-window');
    sidediv.innerHTML = text;
  }
}
<div id="map"></div>
<div id="content-window"></div>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  float: left;
  height: 100%;
  width: 79%;
}
#content-window {
  float: left;
  font-family: 'Roboto','sans-serif';
  height: 100%;
  line-height: 30px;
  padding-left: 10px;
  width: 19%;
}
 <!-- 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>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: 37.06, lng: -95.68}
  });

  var kmlLayer = new google.maps.KmlLayer({
    url: 'http://googlemaps.github.io/kml-samples/kml/Placemark/placemark.kml',
    suppressInfoWindows: true,
    map: map
  });

  kmlLayer.addListener('click', function(kmlEvent) {
    var text = kmlEvent.featureData.description;
    showInContentWindow(text);
  });

  function showInContentWindow(text) {
    var sidediv = document.getElementById('content-window');
    sidediv.innerHTML = text;
  }
}

KML-Beispiel anzeigen

Größen- und Komplexitätsbeschränkungen für die KML-Wiedergabe

Die Google Maps JavaScript API weist Beschränkungen hinsichtlich der Größe und Komplexität der geladenen KML-Dateien auf. Nachfolgend finden Sie eine Übersicht über die aktuellen Grenzwerte:

Hinweis: Diese Grenzwerte können sich jederzeit ändern.

Maximale Größe der abgerufenen Datei (Raw-KML-, Raw-GeoRSS- oder komprimierte KMZ-Datei)
3 MB
Maximale Größe der nicht komprimierten KML-Datei
10 MB
Maximale Anzahl der Netzwerklinks
10
Maximale Anzahl der dokumentweiten Funktionen insgesamt
1.000
Anzahl der KML-Ebenen
Es gibt einen Grenzwert für die Anzahl der KML-Ebenen, die auf einer einzelnen Google-Karte angezeigt werden können. Wenn Sie diesen Grenzwert überschreiten, werden keine Ihrer Ebenen auf der Karte angezeigt und es wird ein Fehler in der JavaScript-Konsole Ihres Webbrowsers gemeldet. Der Grenzwert basiert auf einer Kombination aus der Anzahl der erstellten KMLLayer-Klassen und der Gesamtlänge aller URLs, die zur Erstellung dieser Ebenen verwendet wurden. Jede neue erstellte KMLLayer übernimmt einen Anteil des Grenzwertes für die Ebene sowie einen weiteren Anteil des Grenzwertes, je nach Länge der URL, von der die KML-Datei geladen wurde. Infolgedessen kann die Anzahl der Ebenen, die Sie hinzufügen können, je nach Anwendung unterschiedlich sein. Sie sollten durchschnittlich 10 bis 20 Ebenen laden können, ohne den Grenzwert zu erreichen. Wenn Sie den Grenzwert dennoch erreichen, verwenden Sie einen Kurz-URL-Dienst (z. B. https://goo.gl), um die KML-URLs zu kürzen. Erstellen Sie alternativ eine einzelne KML-Datei, die aus Netzwerklinks (NetworkLinks) für die einzelnen KML-URLs besteht.

Unterstützte KML-Elemente

Die Google Maps JavaScript API unterstützt die folgenden KML-Elemente. Der KML-Parser ignoriert in der Regel XML-Tags, die er nicht versteht, ohne Meldung.

  • Ortsmarken
  • Symbole
  • Ordner
  • Beschreibender HTML-Code – Entitätsersetzung über <BalloonStyle> und <text>
  • KMZ (komprimierter KML-Code, einschließlich angefügte Bilder)
  • Polylinien und Polygone
  • Formate für Polylinien und Polygone, einschließlich Farbe, Füllung und Deckkraft
  • Netzwerklinks für den dynamischen Import von Daten
  • Geländeüberlagerungen und Bildschirmüberlagerungen

Die folgende Tabelle enthält umfassende Informationen über die unterstützten KML-Elemente.

KML-Element In der API unterstützt? Anmerkung
<address> Nein
<AddressDetails> Nein
<Alias> - <Model> wird nicht unterstützt.
<altitude> Nein
<altitudeMode> Nein
<atom:author> Ja
<atom:link> Ja
<atom:name> Ja
<BalloonStyle> Teilweise Nur <text> wird unterstützt.
<begin> - <TimeSpan> wird nicht unterstützt.
<bgColor> Nein
<bottomFov> - <PhotoOverlay> wird nicht unterstützt.
<Camera> Nein
<Change> Teilweise Nur Formatänderungen werden unterstützt.
<color> Teilweise Umfasst #AABBGGRR und #BBGGRR; nicht unterstützt in <IconStyle>, <ScreenOverlay> und <GroundOverlay>
<colorMode> Nein
<cookie> Nein
<coordinates> Ja
<Create> Nein
<Data> Ja
<Delete> Nein
<description> Ja HTML-Inhalte sind zulässig, werden jedoch bereinigt, um Nutzer vor browserübergreifenden Angriffen zu schützen. Entitätsersetzungen in der Form $[dataName] werden nicht unterstützt.
<displayMode> Nein
<displayName> Nein
<Document> Teilweise Implizit, untergeordnete Elemente werden unterstützt; keine Auswirkung bei untergeordnetem Element anderer Funktionen
<drawOrder> Nein
<east> Ja
<end> - <TimeSpan> wird nicht unterstützt.
<expires> Ja Weitere Informationen finden Sie im Abschnitt „Übersicht“.
<ExtendedData> Teilweise <Data> nur nicht typisiert, nicht <SimpleData> oder <Schema> und Entitätsersetzungen in der Form $[dataName] werden nicht unterstützt.
<extrude> Nein
<fill> Ja
<flyToView> Nein
<Folder> Ja
<geomColor> Nein Verworfen
<GeometryCollection> Nein Verworfen
<geomScale> Nein Verworfen
<gridOrigin> - <PhotoOverlay> wird nicht unterstützt.
<GroundOverlay> Ja Kann nicht gedreht werden.
<h> Ja Verworfen
<heading> Ja
hint Ja target=... wird unterstützt
<hotSpot> Ja
<href> Ja
<httpQuery> Nein
<Icon> Ja Kann nicht gedreht werden.
<IconStyle> Ja
<ImagePyramid> - <PhotoOverlay> wird nicht unterstützt.
<innerBoundaryIs> Ja Implizit aus Reihenfolge <LinearRing>
<ItemIcon> - <ListStyle> wird nicht unterstützt.
<key> - <StyleMap> wird nicht unterstützt.
<kml> Ja
<labelColor> Nein Verworfen
<LabelStyle> Nein
<latitude> Ja
<LatLonAltBox> Ja
<LatLonBox> Ja
<leftFov> - <PhotoOverlay> wird nicht unterstützt.
<LinearRing> Ja
<LineString> Ja
<LineStyle> Ja
<Link> Ja
<linkDescription> Nein
<linkName> Nein
<linkSnippet> Nein
<listItemType> - <ListStyle> wird nicht unterstützt.
<ListStyle> Nein
<Location> - <Model> wird nicht unterstützt.
<Lod> Ja
<longitude> Ja
<LookAt> Nein
<maxAltitude> Ja
<maxFadeExtent> Ja
<maxHeight> - <PhotoOverlay> wird nicht unterstützt.
<maxLodPixels> Ja
<maxSessionLength> Nein
<maxWidth> - <PhotoOverlay> wird nicht unterstützt.
<message> Nein
<Metadata> Nein Verworfen
<minAltitude> Ja
<minFadeExtent> Ja
<minLodPixels> Ja
<minRefreshPeriod> Nein <NetworkLink>
<Model> Nein
<MultiGeometry> Teilweise Wird wiedergegeben, aber als separate Funktionen im Bereich auf der linken Seite angezeigt.
<name> Ja
<near> - <PhotoOverlay> wird nicht unterstützt.
<NetworkLink> Ja  
<NetworkLinkControl> Teilweise <Update> und <expires> werden teilweise unterstützt. Die Ablaufeinstellungen in den HTTP-Headern werden von der API ignoriert, die in der KML-Datei angegebenen Ablaufeinstellungen werden hingegen verwendet. Wenn keine Ablaufeinstellungen vorhanden sind oder Sie sich innerhalb des Gültigkeitszeitraums befinden, kann Google Maps aus dem Internet abgerufene Daten für unbestimmte Zeit zwischenspeichern. Das erneute Abrufen der Daten aus dem Internet kann erzwungen werden, indem das Dokument umbenannt und der Abruf unter einer anderen URL durchgeführt wird oder indem Sie sicherstellen, dass das Dokument die geeigneten Ablaufeinstellungen aufweist.
<north> Ja
<open> Ja
<Orientation> - <Model> wird nicht unterstützt.
<outerBoundaryIs> Ja Implizit aus Reihenfolge <LinearRing>
<outline> Ja
<overlayXY> Nein
<Pair> - <StyleMap> wird nicht unterstützt.
<phoneNumber> Nein
<PhotoOverlay> Nein
<Placemark> Ja
<Point> Ja
<Polygon> Ja
<PolyStyle> Ja
<range> Ja
<refreshInterval> Teilweise Nur <Link>; nicht in <Icon>
<refreshMode> Ja HTTP-Header werden für den Modus „onExpire“ nicht unterstützt. Hinweise zu <Update> und <expires> finden Sie weiter oben.
<refreshVisibility> Nein
<Region> Ja
<ResourceMap> - <Model> wird nicht unterstützt.
<rightFov> - <PhotoOverlay> wird nicht unterstützt.
<roll> - <Camera> und <Model> werden nicht unterstützt.
<rotation> Nein
<rotationXY> Nein
<Scale> - <Model> wird nicht unterstützt.
<scale> Nein
<Schema> Nein
<SchemaData> Nein
<ScreenOverlay> Ja Kann nicht gedreht werden.
<screenXY> Nein
<shape> - <PhotoOverlay> wird nicht unterstützt.
<SimpleData> - <SchemaData> wird nicht unterstützt.
<SimpleField> - <Schema> wird nicht unterstützt.
<size> Ja
<Snippet> Ja
<south> Ja
<state> - <ListStyle> wird nicht unterstützt.
<Style> Ja
<StyleMap> Nein Mouseover-Effekte (Hervorhebungen) werden nicht unterstützt.
<styleUrl> - <StyleMap> wird nicht unterstützt.
<targetHref> Teilweise Unterstützt in <Update>, nicht in <Alias>
<tessellate> Nein
<text> Ja Ersetzung von $[geDirections] wird nicht unterstützt.
<textColor> Nein
<tileSize> - <PhotoOverlay> wird nicht unterstützt.
<tilt> Nein
<TimeSpan> Nein
<TimeStamp> Nein
<topFov> - <PhotoOverlay> wird nicht unterstützt.
<Update> Teilweise Nur Formatänderungen, nicht <Create> oder <Delete>
<Url> Ja Verworfen
<value> Ja
<viewBoundScale> Nein
<viewFormat> Nein
<viewRefreshMode> Teilweise „onStop“ wird unterstützt.
<viewRefreshTime> Ja
<ViewVolume> - <PhotoOverlay> wird nicht unterstützt.
<visibility> Teilweise Ja für <Folder> – die Sichtbarkeit wird für untergeordnete Ortsmarken übernommen.
<w> Ja Verworfen
<west> Ja
<when> - <TimeStamp> wird nicht unterstützt.
<width> Ja
<x> Ja Verworfen
<y> Ja Verworfen

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API