Google Maps API V3 – Einfache Integration (Grundlagen Tutorial)

(Dieser Artikel ist Teil einer kleinen Serie von Tutorials zum Thema Google Maps. Vielleicht sind auch die anderen Beiträge dazu für dich interessant.)

Wie kann man auf seiner Homepage eine einfache Karte mit einigen Markern anzeigen lassen? Von Google Maps gibt es mehrere Versionen der API. Derzeit ist Version 3 (V3) die aktuelle.

Unser Endergebnis soll dann wie folgt aussehen:

Als kleines Beispiel habe ich eine Anzeige der Millionenstädte von Deutschland gewählt. Hier erst einmal der gesamte Code:

<html>
<head>
<title>Google Maps V3 - Einfache Integration</title>
 <meta http-equiv="content-type" content="text/html;" />
 <script src="http://maps.google.com/maps/api/js?sensor=false"
 type="text/javascript"></script>
</head>

<body>
<h1>Millionenstädte in Deutschland</h1>
<div id="map" style="width: 750px; height: 400px;"></div>
 <script type="text/javascript">
// Informationen der einzelnen Marker
 var locations =
 [
 ['Hamburg<br>1,800 Mio Einwohner', 53.5510846 , 9.9936818 ],
 ['Berlin<br>3,510 Mio Einwohner', 52.519171 , 13.4060912 ],
 ['Köln<br>1,020 Mio Einwohner', 50.937531 , 6.9602786 ],
 ['München<br>1,380 Mio Einwohner', 48.1366069 , 11.5770851 ],
 ];

// Festlegung des ID-Namens (für div id), der Zoomstufe (1-16), des Mittelpunktes der Karte, und des Kartentyps
 var map = new google.maps.Map(document.getElementById('map'), {
 zoom: 5,
 center: new google.maps.LatLng(51, 10.5),
 mapTypeId: google.maps.MapTypeId.ROADMAP
 });

// Infofenster ("Blase") soll angezeigt werden
 var infowindow = new google.maps.InfoWindow();

// Auslesen der Markerinformationen
 var marker, i;

 // Länge und Breite und Festlegung für welche div-ID dies gilt
 for (i = 0; i < locations.length; i++)
 {
 marker = new google.maps.Marker({
 position: new google.maps.LatLng(locations[i][1], locations[i][2]),
 map: map,
 });

 // Infofenster: Wie wird es angesprochen und was befindet sich in ihm
 google.maps.event.addListener(marker, 'click', (function(marker, i) {
 return function() {
 infowindow.setContent(locations[i][0]);
 infowindow.open(map, marker);
 }
 })(marker, i));
 }
 </script>
</body>
</html>

Nun einige weiterführende Erklärungen.

Als erstes muss die der Seite gesagt werden welche API von Google Maps angesprochen werden soll

<script src="http://maps.google.com/maps/api/js?sensor=false"
 type="text/javascript"></script>

Dann wird die Anzeige festgelegt. In diesem Fall hat sie eine Breite von 750 Pixeln und ist 400 Pixel hoch. Wichtig ist, das das DIV einen Namen, in diesem Fall „map“ bekommt, damit es später zugeordnet werden kann.

<div id="map" style="width: 750px; height: 400px;"></div>

Nur die Karte bringt natürlich noch keinen Mehrwert, deshalb werden Orte in die Variable „locations“ geschrieben:

var locations =
 [
 ['Hamburg<br>1,800 Mio Einwohner', 53.5510846 , 9.9936818 ],
 ['Berlin<br>3,510 Mio Einwohner', 52.519171 , 13.4060912 ],
 ['Köln<br>1,020 Mio Einwohner', 50.937531 , 6.9602786 ],
 ['München<br>1,380 Mio Einwohner', 48.1366069 , 11.5770851 ],
 ];

Nun wird festgelegt, welcher Kartenausschnitt zu sehen sein soll. Dafür gibt man die Zoomstufe (1-Weltkarte, je höher die Zahl, desto detailierter der Ausschnitt). Außerdem wird hier unsere div-id „map“ angesprochen, festgelegt wo der Kartenmittelpunkt liegt und das als Kartendarstellung die Straßenkarte gewählt wird (Alternativ z.B. Satelit).

var map = new google.maps.Map(document.getElementById('map'), {
 zoom: 5,
 center: new google.maps.LatLng(51, 10.5),
 mapTypeId: google.maps.MapTypeId.ROADMAP
 });

Unsere Informationen zur Bevölkerungsanzahl soll auch angezeigt werden. Dazu muss das Infofenster integriert werden.

var infowindow = new google.maps.InfoWindow();

Als letzten Schritt werden noch die Informationen zu den einzelnen Markern ausgelesen und verarbeitet

var marker, i;

for (i = 0; i < locations.length; i++)
 {
 marker = new google.maps.Marker({
 position: new google.maps.LatLng(locations[i][1], locations[i][2]),
 map: map,
 });

google.maps.event.addListener(marker, 'click', (function(marker, i) {
 return function() {
 infowindow.setContent(locations[i][0]);
 infowindow.open(map, marker);
 }
 })(marker, i));
 }

Nun viel Erfolg bei der eigenen Umsetzung!

Advertisements

9 Kommentare

  1. Sven Berberich

    Wie ist es Möglich das 1. Infowindow bei Kartenaufruf anzeigen zu lassen und nicht erst bei „onclick“ Event?

    • Hallo Sven,

      entscheidend ist ja Zeile 44, also:
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
      Da müsste das ‚click‘ durch etwas anderes ersetzt werden.

      Hab leider keinen Befehl gefunden, der auf deine Frage passt:
      https://developers.google.com/maps/documentation/javascript/events?hl=de#UIEvents
      Dort sind leider nur Maus-Ereignisse beschrieben. Falls du eine Lösung gefunden hast, kannst du das ja hier ergänzen. Dann kann ich ein neues Thema aufmachen, um verschiedene Ereignisse zum Öffnen der Marker zu beschreiben.google.maps.event.addListener(marker,

      hab doch was gefunden. Weiß aber nicht, ob es auf der aktuellen API basiert. Einfach mal in den Quelltext schauen:
      http://neogismap.appspot.com/debugAndDemo/clickOnLoad/index.html

  2. Martin

    Ist es möglich die Karte als Vollbild darzustellen?

    Wenn ich die folgende Zeile:
    „“

    wie folgt ändere:
    „“

    Öffnet sich bei mir leider keine Karte mehr….

    • Leider sehe ich den Code nicht, den du zitiertst.
      Spontan würde ich sagen, dass bei dem div, indem die Karte eingebunden wird aus

      width: 750px; height: 400px;

      width: 100%; height: 100%;

      gemacht werden kann. Habe ich jetzt aber nicht getestet.

  3. 1000 Dank

  4. Hallo, kann mann statt den Koordinaten auch Adressen verwenden?

Trackbacks

  1. Google Maps API V3 – Marker Bild ändern « woesbeginnt

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: