Bitte warten...

Landkarten von Google Maps einbinden

(Google Maps API 3.0)

Dies ist eine schrittweise Anleitung für das Einbinden der Google Maps API in eine Website.

Im Gegensatz zu der freien API von OpenLayers ist die verwendete Software von Google Maps prorietäre Software (s. Lizenz). Allerdings sind dafür die Satellitenbilder, die bei Google Maps verwendet werden, hochauflösender als bei OpenLayers.

Diese Programmierschnittstelle bietet eine Vielzahl von Einstellungen, von denen hier nur die wichtigsten vorgestellt werden. Weitere Informationen zur API findet man in der ausführlichen Dokumentation.

Grundsätzliches

Um eine Landkarte von Google-Maps auf einer Website zu platzieren, muss der Quelltext dieser Seite bestimmte Elemente beinhalten. Diese sind im folgenden Beispiel dargestellt:

Code kopieren
<!DOCTYPE html>
<html lang='de'>
  <head>
    <title>Landkarte von Google Maps</title>
    <meta charset='UTF-8'>
    <style>
      #map-canvas { margin:auto auto 20px; width:700px; height:500px; border:2px solid #777; }
      .infobox { font-size:16px; padding:1px; }
      .infobox a { font-size:inherit; font-weight:bold; text-decoration:none; }
      .infobox a:hover { text-decoration:underline; }
    </style>
    <script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyA2WoWiMUuuC9hGxknibof0yC0833zEC1M&amp;language=de'></script>
    <script>
    /* <![CDATA[ */
      function initialize() {
        var mapOptions = {
          zoom: 4,
          center: new google.maps.LatLng(50.941309, 6.958122),
          mapTypeId: google.maps.MapTypeId.HYBRID
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    /* ]]> */
    </script>
  </head>
  <body>
    <div id='map-canvas'>
      <noscript>
        <p>Zur Ansicht der Karte muss JavaScript aktiviert sein!</p>
      </noscript>
    </div>
  </body>
</html>

Über das <script>-Element in Zeile 12 wird die API geladen (hier für die deutsche Sprache: language=de). Dazu wird ein API-Schlüssel für die Karte benötigt, den man auf der Google Maps Platform erhalten kann. Die JavaScript-Funktion initialize() enthält die konkreten Daten für die Konfiguration der Karte, die in den <div>-Container mit der ID map-canvas (Zeilen 2832) geladen wird. Die ID kann frei gewählt werden, doch muss sie mit dem Wert in dem Funktionsaufruf in Zeile 21 übereinstimmen.

Im Folgenden wird eine Reihe von Optionen und Funktionen beschrieben, die hier gemacht werden können, um die Karte den eigenen Bedürfnissen anzupassen.

Weitere Informationen: API Tutorial

Kartenposition, Zoomfaktor, Kartentyp

Die Funktion initialize() im Beispiel oben enthält zunächst die drei folgenden Parameter:

• die Koordinaten für den Mittelpunkt der Karte (50.941309 und 6.958122)
• den Zoomfaktor (4)
• den Kartentyp (HYBRID)

Dies sind die minimalen Angaben, die nötig sind, um eine Karte darstellen zu können. Die so angezeigte Karte kann bereits mit der Maus bewegt und durch Doppelklick gezoomt werden (doppelter Linksklick = Einzoomen; doppelter Rechtsklick = Auszoomen).

Koordinaten

Der erste Wert der Koordinaten gibt die geographische Breite und der zweite die geographische Länge in Grad an, wobei ein positiver Wert für Norden bzw. Osten und ein negativer Wert für Süden bzw. Westen steht. Wenn man die Position eines Ortes nicht kennt, kann man z. B. auf Google Maps diesen Ort suchen. Die URL enthält dann die Koordinaten des Ortes. Es empfiehlt sich, dabei möglichst dicht heran zu zoomen, um eine sehr genaue Position zu erhalten.

Beispiel:
https://www.google.de/maps/@52.5207846,13.4093412,18z

Die URL enthält die Werte 52.5207846 und 13.4093412 als Koordinaten für Berlin, Fernsehturm.

Liegen die Koordinaten eines Ortes in der Form Grad/Minuten/Sekunden vor, muss man diese Werte in eine Dezimalzahl umrechnen:

x = grad + min/60 + sek/3600

Zoomfaktor

Die Spanne für das Zoomen bewegt sich zwischen 0 (weiteste Entfernung) bis 21 (sehr kurze Entfernung), abhängig davon, ob Bilder in so hoher Auflösung verfügbar sind.

Kartentyp

Es existieren gegenwärtig vier Kartentypen:

ROADMAP (Straßenkarte)
SATELLITE (Satellitenbild)
HYBRID (Überlagerung von Straßenkarte und Satellitenbild)
TERRAIN (Geländedarstellung)

Ortsmarkierung hinzufügen

Um einen Ort durch einen Marker zu kennzeichnen, wird das Skript nun folgendermaßen erweitert. Zunächst wird eine weitere Funktion google.maps.Marker() definiert, in der die Angaben für die Markerposition position, die angesprochene Karte map (Zeile 7) sowie einen Tooltip-Text title gemacht werden.

Weitere Informationen: API Tutorial

Code kopieren
      function initialize() {
        var mapOptions = {
          zoom: 4,
          center: new google.maps.LatLng(50.941309, 6.958122),
          mapTypeId: google.maps.MapTypeId.HYBRID
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        var markers = [];
        markers[0] = new google.maps.Marker({
          position: new google.maps.LatLng(52.520791, 13.409436),
          map: map,
          title: 'Die Hauptstadt von Deutschland'
        });
        markers[1] = new google.maps.Marker({
          position: new google.maps.LatLng(51.505574, -0.075386),
          map: map,
          title: 'Die Hauptstadt von Großbritannien'
        });
        markers[2] = new google.maps.Marker({
          position: new google.maps.LatLng(48.858278, 2.294501),
          map: map,
          title: 'Die Hauptstadt von Frankreich'
        });
      }

Streckenzug hinzufügen

Nun kann man diese Orte über einen Streckenzug verbinden. Streckenzüge sind eigentlich von Orten unabhängige Objekte, können theoretisch also auch für sich gezeichnet werden, ohne konkrete Orte mit einander zu verbinden. Es müssen dazu die Koordinaten von mindestens zwei Orten angegeben werden. Soll ein größerer Streckenzug geschlossen werden, muss der erste Ort als Endpunkt angefügt werden.

Zunächst wird die Variable polylineCoordinates mit den Koordinaten der Eckpunkte des Streckenzuges gefüllt (Zeile 23). Dann wird in Zeile 29 eine neue Instanz der Funktion google.maps.Polyline() erzeugt, in der der Streckenzug konfiguriert wird. Die verwendeten Parameter sind folgende:

path – Name der Variable mit den Koordinaten
geodesic – Erdkrümmung berücksichtigen (true, false)
strokeColorFarbe der Verbindungslinie
strokeOpacity – Deckkraft der Linienfarbe (0.01.0)
strokeWeight – Stärke der Linie in Pixeln

Schließlich wird der Streckenzug in Zeile 36 der Karte map hinzugefügt.

Weitere Informationen: API Dokumentation

Code kopieren
      function initialize() {
        var mapOptions = {
          zoom: 4,
          center: new google.maps.LatLng(50.941309, 6.958122),
          mapTypeId: google.maps.MapTypeId.HYBRID
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        var markers = [];
        markers[0] = new google.maps.Marker({
          position: new google.maps.LatLng(52.520791, 13.409436),
          map: map,
          title: 'Die Hauptstadt von Deutschland'
        });
        markers[1] = new google.maps.Marker({
          position: new google.maps.LatLng(51.505574, -0.075386),
          map: map,
          title: 'Die Hauptstadt von Großbritannien'
        });
        markers[2] = new google.maps.Marker({
          position: new google.maps.LatLng(48.858278, 2.294501),
          map: map,
          title: 'Die Hauptstadt von Frankreich'
        });
        var polylineCoordinates = ]
          new google.maps.LatLng(52.520791, 13.409436),
          new google.maps.LatLng(51.505574, -0.075386),
          new google.maps.LatLng(48.858278, 2.294501),
          new google.maps.LatLng(52.520791, 13.409436)
        ];
        var polyline = new google.maps.Polyline({
          path: polylineCoordinates,
          geodesic: true,
          strokeColor: '#aaaaff',
          strokeOpacity: 1.0,
          strokeWeight: 3
        });
        polyline.setMap(map);
      }

Marker optisch anpassen

Möchte man die grafische Darstellung der Marker verändern, wird das im Skript folgendermaßen realisiert:

Code kopieren
      function initialize() {
        var mapOptions = {
          zoom: 4,
          center: new google.maps.LatLng(50.941309, 6.958122),
          mapTypeId: google.maps.MapTypeId.HYBRID
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        var markers = [];
        var iconfile = new google.maps.MarkerImage(
          'http://labs.google.com/ridefinder/images/mm_20_green.png',
          new google.maps.Size(12, 20),
          new google.maps.Point(0, 0),
          new google.maps.Point(6, 20)
        );
        markers[0] = new google.maps.Marker({
          position: new google.maps.LatLng(52.520791, 13.409436),
          map: map,
          title: 'Die Hauptstadt von Deutschland',
          icon: iconfile
        });
        markers[1] = new google.maps.Marker({
          position: new google.maps.LatLng(51.505574, -0.075386),
          map: map,
          title: 'Die Hauptstadt von Großbritannien',
          icon: iconfile
        });
        markers[2] = new google.maps.Marker({
          position: new google.maps.LatLng(48.858278, 2.294501),
          map: map,
          title: 'Die Hauptstadt von Frankreich',
          icon: iconfile
        });
        var polylineCoordinates = [
          new google.maps.LatLng(52.520791, 13.409436),
          new google.maps.LatLng(51.505574, -0.075386),
          new google.maps.LatLng(48.858278, 2.294501),
          new google.maps.LatLng(52.520791, 13.409436)
        ];
        var polyline = new google.maps.Polyline({
          path: polylineCoordinates,
          geodesic: true,
          strokeColor: '#aaaaff',
          strokeOpacity: 1.0,
          strokeWeight: 3
        });
        polyline.setMap(map);
      }

Zunächst wird in Zeile 9 eine Variable iconfile definiert. Die Eigenschaften dieser Variable werden in den folgenden Zeilen 1013 festgelegt. Schließlich wird die so definierte Markergrafik in den einzelnen Instanzen von google.maps.Marker() über den Wert der Variable icon referenziert.

Die Eigenschaften des Markers sind ihrer Reihenfolge entsprechend:

• Pfad zur Markergrafik
• Größe der Grafik
• Startposition in der Grafik
• Ankerposition in der Grafik, die mit der Kartenposition übereinstimmt

Weitere Informationen zu Markern: Dokumentation

Grafiken für Marker sind z. B.:

Google Maps Marker http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png
Google Maps Marker http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png
Google Maps Marker http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png
Google Maps Marker http://www.google.com/intl/en_us/mapfiles/ms/micons/purple-dot.png
Google Maps Marker http://www.google.com/intl/en_us/mapfiles/ms/micons/yellow-dot.png
Google Maps Marker http://www.google.com/intl/en_us/mapfiles/ms/micons/orange-dot.png
Google Maps Marker http://labs.google.com/ridefinder/images/mm_20_red.png
Google Maps Marker http://labs.google.com/ridefinder/images/mm_20_blue.png
Google Maps Marker http://labs.google.com/ridefinder/images/mm_20_green.png
Google Maps Marker http://labs.google.com/ridefinder/images/mm_20_white.png
Google Maps Marker http://labs.google.com/ridefinder/images/mm_20_purple.png
Google Maps Marker http://labs.google.com/ridefinder/images/mm_20_yellow.png
Google Maps Marker http://labs.google.com/ridefinder/images/mm_20_orange.png
Google Maps Marker http://labs.google.com/ridefinder/images/mm_20_black.png
Google Maps Marker http://labs.google.com/ridefinder/images/mm_20_gray.png
Google Maps Marker http://labs.google.com/ridefinder/images/mm_20_brown.png

Infoboxen anzeigen lassen

Möchte man für jeden Ort eine Infobox anzeigen lassen, wenn man mit der Maus auf diesen Ort klickt, realisiert man das folgendermaßen:

Code kopieren
      function initialize() {
        var mapOptions = {
          zoom: 4,
          center: new google.maps.LatLng(50.941309, 6.958122),
          mapTypeId: google.maps.MapTypeId.HYBRID
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        var markers = [];
        var infowindows = [];
        var iconfile = new google.maps.MarkerImage(
          'http://labs.google.com/ridefinder/images/mm_20_green.png',
          new google.maps.Size(12, 20),
          new google.maps.Point(0, 0),
          new google.maps.Point(6, 20)
        );
        markers[0] = new google.maps.Marker({
          position: new google.maps.LatLng(52.520791, 13.409436),
          map: map,
          title: 'Die Hauptstadt von Deutschland',
          icon: iconfile
        });
        infowindows[0] = new google.maps.InfoWindow({
          content: '<div class=\'infobox\'>Weitere Infos: <a href=\'https://de.wikipedia.org/wiki/Berlin\' target=\'_blank\'>Berlin</a></div>'
        });
        google.maps.event.addListener(markers[0], 'click', function() {
          infowindows[0].open(map, markers[0]);
        });
        markers[1] = new google.maps.Marker({
          position: new google.maps.LatLng(51.505574, -0.075386),
          map: map,
          title: 'Die Hauptstadt von Großbritannien',
          icon: iconfile
        });
        infowindows[1] = new google.maps.InfoWindow({
          content: '<div class=\'infobox\'>Weitere Infos: <a href=\'https://de.wikipedia.org/wiki/London\' target=\'_blank\'>London</a></div>'
        });
        google.maps.event.addListener(markers[1], 'click', function() {
          infowindows[1].open(map, markers[1]);
        });
        markers[2] = new google.maps.Marker({
          position: new google.maps.LatLng(48.858278, 2.294501),
          map: map,
          title: 'Die Hauptstadt von Frankreich',
          icon: iconfile
        });
        infowindows[2] = new google.maps.InfoWindow({
          content: '<div class=\'infobox\'>Weitere Infos: <a href=\'https://de.wikipedia.org/wiki/Paris\' target=\'_blank\'>Paris</a></div>'
        });
        google.maps.event.addListener(markers[2], 'click', function() {
          infowindows[2].open(map, markers[2]);
        });
        var polylineCoordinates = [
          new google.maps.LatLng(52.520791, 13.409436),
          new google.maps.LatLng(51.505574, -0.075386),
          new google.maps.LatLng(48.858278, 2.294501),
          new google.maps.LatLng(52.520791, 13.409436)
        ];
        var polyline = new google.maps.Polyline({
          path: polylineCoordinates,
          geodesic: true,
          strokeColor: '#aaaaff',
          strokeOpacity: 1.0,
          strokeWeight: 3
        });
        polyline.setMap(map);
      }

Zunächst wird für jede Infobox eine neue Instanz der Funktion google.maps.InfoWindow() erzeugt und in ihr der gewünschte Inhalt content angegeben (Zeile 22 bis 24).

Außerdem muss den betreffenden Markern ein click-Eventlistener hinzugefügt werden, der mit der Infobox verknüpft wird (Zeile 25 bis 27).

Weitere Informationen zu Infoboxen: Dokumentation

Infoboxen schließen

Befinden sich auf einer Karte mehrere Marker mit Infoboxen, so bleiben diese geöffnet, wenn eine andere Infobox geöffnet wird. Um die anderen Infoboxen in einem solchen Fall zu schließen, geht man folgendermaßen vor:

Code kopieren
      function closeInfoWindows(infowindows) {
        for (var i = 0; i < infowindows.length; i++) {
          infowindows[i].close();
        }
      }
      function initialize() {
        var mapOptions = {
          zoom: 4,
          center: new google.maps.LatLng(50.941309, 6.958122),
          mapTypeId: google.maps.MapTypeId.HYBRID
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        var iconfile = new google.maps.MarkerImage(
          'http://labs.google.com/ridefinder/images/mm_20_green.png',
          new google.maps.Size(12, 20),
          new google.maps.Point(0, 0),
          new google.maps.Point(6, 20)
        );
        var markers = [];
        var infowindows = [];
        markers[0] = new google.maps.Marker({
          position: new google.maps.LatLng(52.520791, 13.409436),
          map: map,
          title: 'Die Hauptstadt von Deutschland',
          icon: iconfile
        });
        infowindows[0] = new google.maps.InfoWindow({
          content: '<div class=\'infobox\'>Weitere Infos: <a href=\'https://de.wikipedia.org/wiki/Berlin\' target=\'_blank\'>Berlin</a></div>'
        });
        google.maps.event.addListener(markers[0], 'click', function() {
          closeInfoWindows(infowindows);
          infowindows[0].open(map, markers[0]);
        });
        markers[1] = new google.maps.Marker({
          position: new google.maps.LatLng(51.505574, -0.075386),
          map: map,
          title: 'Die Hauptstadt von Großbritannien',
          icon: iconfile
        });
        infowindows[1] = new google.maps.InfoWindow({
          content: '<div class=\'infobox\'>Weitere Infos: <a href=\'https://de.wikipedia.org/wiki/London\' target=\'_blank\'>London</a></div>'
        });
        google.maps.event.addListener(markers[1], 'click', function() {
          closeInfoWindows(infowindows);
          infowindows[1].open(map, markers[1]);
        });
        markers[2] = new google.maps.Marker({
          position: new google.maps.LatLng(48.858278, 2.294501),
          map: map,
          title: 'Die Hauptstadt von Frankreich',
          icon: iconfile
        });
        infowindows[2] = new google.maps.InfoWindow({
          content: '<div class=\'infobox\'>Weitere Infos: <a href=\'https://de.wikipedia.org/wiki/Paris\' target=\'_blank\'>Paris</a></div>'
        });
        google.maps.event.addListener(markers[2], 'click', function() {
          closeInfoWindows(infowindows);
          infowindows[2].open(map, markers[2]);
        });
        var polylineCoordinates = [
          new google.maps.LatLng(52.520791, 13.409436),
          new google.maps.LatLng(51.505574, -0.075386),
          new google.maps.LatLng(48.858278, 2.294501),
          new google.maps.LatLng(52.520791, 13.409436)
        ];
        var polyline = new google.maps.Polyline({
          path: polylineCoordinates,
          geodesic: true,
          strokeColor: '#aaaaff',
          strokeOpacity: 1.0,
          strokeWeight: 3
        });
        polyline.setMap(map);
      }

Skript kürzen

Wenn man die verschiedenen Orte in ein Array packt und dieses in einer Schleife durchlaufen lässt, kann das Skript wesentlich vereinfacht werden. google.maps.event.addListener kann nicht direkt in der Schleife verwendet werden, daher wird zunächst die Funktion addListener() definiert (ab Zeile 22; s. stackoverflow.com).

Code kopieren
      function initialize() {
        var mapOptions = {
          zoom: 4,
          center: new google.maps.LatLng(50.941309, 6.958122),
          mapTypeId: google.maps.MapTypeId.HYBRID
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        var iconfile = new google.maps.MarkerImage(
          'http://labs.google.com/ridefinder/images/mm_20_green.png',
          new google.maps.Size(12, 20),
          new google.maps.Point(0, 0),
          new google.maps.Point(6, 20)
        );
        var places = [
          ["Berlin", 52.520791, 13.409436, "Deutschland"],
          ["London", 51.505574, -0.075386, "Großbritannien"],
          ["Paris", 48.858278, 2.294501, "Frankreich"]
        ];
        var markers = [];
        var infowindows = [];
        var polylineCoordinates = [];
        var addListener = function(i) {
          google.maps.event.addListener(markers[i], 'click', function() {
            closeInfoWindows(infowindows);
            infowindows[i].open(map, markers[i]);
          });
        }
        for (var i = 0; i < places.length; i++) {
          var pos = new google.maps.LatLng(places[i][1], places[i][2]);
          if (i == 0) polylineCoordinates[places.length] = pos;
          polylineCoordinates[i] = pos;
          markers[i] = new google.maps.Marker({
            position: pos,
            map: map,
            title: 'Die Hauptstadt von ' + places[i][3],
            icon: iconfile
          });
          infowindows[i] = new google.maps.InfoWindow({
            content: '<div class=\'infobox\'>Weitere Infos: <a href=\'https://de.wikipedia.org/wiki/' + places[i][0] + '\' target=\'_blank\'>' + places[i][0] + '</a></div>'
          });
          addListener(i);
        }
        var polyline = new google.maps.Polyline({
          path: polylineCoordinates,
          geodesic: true,
          strokeColor: '#aaaaff',
          strokeOpacity: 1.0,
          strokeWeight: 3
        });
        polyline.setMap(map);
      }