decocode decocode deco    

Landkarten von Google Maps einbinden #

(Google Maps API 3.0)

Übersicht
Kartenposition, Zoomfaktor, Kartentyp
Ortsmarkierung hinzufügen
Streckenzug hinzufügen
Marker optisch anpassen
Infoboxen anzeigen lassen
Infoboxen schließen
Skript kürzen

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:

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang='de'>
  <head>
    <title>Landkarte von Google Maps</title>
    <meta charset='UTF-8'>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
    <style type='text/css'>
      #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?v=3.exp&amp;language=de'></script>
    <script type='text/javascript'>
    /* <![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 13 wird die API geladen (hier für die deutsche Sprache: language=de). 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 2933) geladen wird. Die ID kann frei gewählt werden, doch muss sie mit dem Wert in dem Funktionsaufruf in Zeile 22 ü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

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
      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

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
      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:

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
      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:

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
      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:

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
      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).

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
      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);
      }
Kommentare zu dieser Seite

Diese Seite wurde noch nicht kommentiert.

Bitte verwende keine HTML-Tags, da der Eintrag sonst als Spam gefiltert wird!

(freiwillige Angabe)

Sicherheitsabfrage: Wie lautet die Zeichenfolge qvnqqmt in Großbuchstaben?