Mehrere Standorte in Google Maps anzeigen

google-maps-marker

Google Maps lässt sich bekanntlich kinderleicht in die eigene Website integrieren. Insbesondere auf der Kontaktseite eines Unternehmens oder auch einer Privatperson macht es durchaus Sinn Maps zu verwenden um den Besucher zu zeigen wo sich der Autor bzw. das Unternehmen befindet. Der Vorteil von Google Maps liegt dabei auf der Hand: Zum einen muss nicht mühsam eine Karte gezeichnet werden, zum anderen bietet Google stets aktuelle Informationen, verschiedene Ansichten, Zoomstufen und Kartenausschnitte.
Doch angenommen es sollen mehrere Standorte auf der Karte angezeigt werden; zum Beispiel weil das Unternehmen mehr als eine Filiale hat oder weil der Blogger zeigen möchte wo er im letzten Urlaub war. Wie Ihr mittels der Google Maps API mehr als einen Standort in die Karte eintragt und darüber hinaus auch noch Startposition, Zoomstufe, Kartenlayout und den Inhalt der Infoboxen anpasst erfahrt Ihr in diesem Tutorial.

Modernes Webdesign

Neue Workflows, Techniken und Designideen – inkl. Rapid Prototyping, Responsive Design und Sass.

In unserem Shop kaufen
Signierte DVD, keine Versandkosten

Bei Amazon bestellen
Standard-Version

Demo anschauen

Google Maps API Key

Um Google Maps auf einer Website verwenden zu können braucht Ihr zunächst ein Google Konto. Sobald Ihr erfolgreich in Euer Konto eingeloggt seid muss ein so genannter API-Key generiert werden mit dem sich die Website später bei Google authentifiziert.
Den API-Key könnt Ihr unter folgender Adresse generieren lassen. Gebt dazu einfach die URL in die Eingabemaske ein und bestätigt die Nutzungsbedingungen. ...

Google Maps API Code

Elemente im head einbinden

Nun geht es daran die eigentliche Karte im Code einzubinden. Zunächst widmen wir uns dem head unserer Seite. Bindet zunächst nachfolgendes JavaScript ein und ersetzt im Code die Stelle XXX mit Eurem zuvor generierten API-Key.

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=XXXXXXXXX" type="text/javascript"></script>

Elemente im body einbinden

Um Google Maps verwenden zu können benötigen wir ein OnLoad-Ereignis. Ersetzt Euer bereits bestehendes öffnende body-Element durch folgenden Code:

<body onload="initialize()" onunload="GUnload()">

Nun folgt der eigentliche Code zur Einbindung der Karte. Mittels Kommentaren habe ich die wichtigen Punkte erklärt möchte sie aber dennoch im Detail erläutern. Wir beginnen damit die Karte im Code zu aktivieren und einige globale Eigenschaften festzulegen. Die Karte wird innerhalb eines div-Containers erstellt dessen Bezeichnug wir am Anfang einmalig festlegen. In diesem Beispiel habe ich den div "map-container" genannt. Mittels Inline-CSS-Style legen wir die Abmessungen fest. Innerhalb des noscript-Bereichs wird ein alternativer Content eingebunden für den Fall, dass der Seitenbesucher kein JavaScript aktiviert hat.

<!-- Name des DIVs, Abmessungen -->
<div id="map-container" style="width: 500px; height: 300px"></div>
<noscript>
Sie benötigen javaScript um diesen Inhalt betrachten zu können.
</noscript>
<script type="text/javascript">
function initialize() {

if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map-container"));

Anschließend folgt die Festlegung des Startpunktes. Neben den Koordinaten (Längen- und Breitenangaben) des Karten-Mittelpunktes wird der Zoomfakter und das Kartendesign festgelegt.
Um die Koordinaten zu bestimmen könnt Ihr Euch diverser Tools bedienen. Am praktischsten finde ich die folgende Website. Gebt einfach wie gewohnt die Adresse ein und Ihr bekommt die Koordinaten direkt innerhalb der Karte angezeigt.

Der Zoomfakter wird als Zahl angegeben. In diesem Beispiel habe ich eine mittlere Entfernung von "12" gewählt.

Als Darstellungsoptionen für das Kartendesign stehen die für Google Maps typischen Eigenschaften zur Verfügung.

  • G_NORMAL_MAP (Kartenansicht)
  • G_HYBRID_MAP (Satellitenansicht mit eingeblendeten Straßen)
  • G_SATELLITE_MAP (Satellitenansicht)


// Ausgangsdaten konfigurieren: Laengen und Breitenangabe des Karten-Mittelpunktes; Zoomfaktor, Kartentyp (G_NORMAL_MAP, G_HYBRID_MAP, G_SATELLITE_MAP)
map.setCenter(new GLatLng(51.213969,6.774424), 12, G_NORMAL_MAP);

Das folgende Snippet aktiviert den für Google Maps so typischen Marker und legt fest ob dieser per Klick einen Tooltip mit weiteren Informationen anzeigen soll.

function createMarker(point,html) {
var marker = new GMarker(point);

// Tooltip beim Klick auf den Marker anzeigen oder nicht.
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
Google Maps

Nun ist es an der Zeit die unterschiedlichen Standorte anzuzeigen. Den folgenden Code-Abschnitt könnt Ihr beliebig oft einsetzen. Die Koordinaten berechnet Ihr mit dem oben bereits erwähnten Tool. Innerhalb des Tooltips kann HTML-Code geschrieben werden.

// Standort Anfang
var point = new GLatLng(51.21412,6.77418);
var marker = createMarker(point,'Dieser Inhalt wird im Tooltip angezeigt.')
map.addOverlay(marker);
// Standort Ende

Innerhalb einer Google Map können noch weitere Steuerungs- und Darstellungselemente eingeblendet werden.

// Navigationselemente einblenden
map.addControl(new GLargeMapControl());

// Kartentypen einblenden
map.addControl(new GMapTypeControl());

// Übersichtskarte einblenden
map.addControl(new GOverviewMapControl());

// Massstab einblenden
map.addControl(new GScaleControl());

Das Script wird natürlich auch wieder geschlossen.

}
}
</script>
Google Maps Head Up Display HUD API

Vollständiges Code-Beispiel

Falls Euch die obige Erklärung zu detailliert oder auch zu oberflächlich war könnt Ihr Euch hier das gesamte Beispiel noch einmal am Stück anschauen. In diesem Beispiel habe ich mehrere unterschiedliche Standorte angegeben.

Google Maps Hybrid Düsseldorf


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAA5v01sGhQl-TBXa5oRUTuZBRRPDlVThHigVAlpBtmoYerwQltWxTPLGvWHiwSXccBTGODkm08VMXoAQ"
            type="text/javascript"></script>
</head>

<body onload="initialize()" onunload="GUnload()">
<!-- Name des DIVs, Abmessungen -->
<div id="map-container" style="width: 500px; height: 300px"></div>
<noscript>
Sie benötigen javaScript um diesen Inhalt betrachten zu können.
</noscript>
<script type="text/javascript">
function initialize() {

if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map-container"));

// Ausgangsdaten konfigurieren: Laengen und Breitenangabe des Karten-Mittelpunktes; Zoomfaktor, Kartentyp (G_NORMAL_MAP, G_HYBRID_MAP, G_SATELLITE_MAP)
map.setCenter(new GLatLng(51.223335,6.76981), 13, G_HYBRID_MAP);

function createMarker(point,html) {
var marker = new GMarker(point);

// Tooltip beim Klick auf den Marker anzeigen oder nicht.
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}

// Standort Anfang
var point = new GLatLng(51.21412,6.77418);
var marker = createMarker(point,'Hier wohne ich')
map.addOverlay(marker);
// Standort Ende

// Standort Anfang
var point = new GLatLng(51.217894,6.762105);
var marker = createMarker(point,'Fernsehturm')
map.addOverlay(marker);
// Standort Ende

// Standort Anfang
var point = new GLatLng(51.227394,6.770754);
var marker = createMarker(point,'Rheintreppen')
map.addOverlay(marker);
// Standort Ende

// Standort Anfang
var point = new GLatLng(51.215056,6.752064);
var marker = createMarker(point,'Medienhafen')
map.addOverlay(marker);
// Standort Ende

// Standort Anfang
var point = new GLatLng(51.226211,6.774702);
var marker = createMarker(point,'Altstadt')
map.addOverlay(marker);
// Standort Ende

// Navigationselemente einblenden
map.addControl(new GLargeMapControl());

// Kartentypen einblenden
map.addControl(new GMapTypeControl());

// Übersichtskarte einblenden
map.addControl(new GOverviewMapControl());

// Massstab einblenden
map.addControl(new GScaleControl());

}
}
</script>
</body>
</html>

Demo anschauen