Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Mehrere Standorte in Google Maps anzeigen

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.

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.

// 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

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 29 Kommentare

  1. Mario
    schrieb am 05.03.2017 um 16:11 Uhr:

    Die Demo und der API-Link funktionieren nicht mehr!
    http://code.google.com/intl/de/apis/maps/signup.html ???

    Liebe Grüße

    Mario

    Antworten
  2. Anja
    schrieb am 23.12.2016 um 13:18 Uhr:

    Prima Anleitung. Kurz, knapp, hilfreich.

    Was mache ich aber, wenn ich ein paar hundert oder mehr Adressen einbinden möchte? Ich möchte ja nicht jeden Marker im Quellcode einer Seite haben. Also müsste man aus meiner laienhaften Sicht entweder stets nur Teilgebiete anzeigen (wenn Köln, dann Daten für Köln als Map + Daten für Standorte) oder aber irgendwo, irgendwie eine riesige Liste hinterlegen und Googlefunktionen haben die sich heraussuchen was angezeigt wird.

    Also gehe ich mal suchen, ob ich dazu Infos finde.

    Antworten
  3. Garant-Service
    schrieb am 23.12.2016 um 08:48 Uhr:

    Hallo,
    werden die verschiedenen Standorte dann nur auf meiner Webseite angezeigt oder können Kunden auch allgemein über Maps die Standorte sehen?
    Gruß Daniel

    Antworten
  4. Mark Gebur
    schrieb am 13.10.2016 um 10:49 Uhr:

    Hallo Jonas,

    erstmal Danke für Deinen Beitrag. Dieser hat mir schon sehr geholfen. Ich würde das Script gerne mit ein paar Schnipsel ein wenig erweitern, für diejenigen, die nur Adressen zur Verfügung haben und keine lang und long. Hierfür nutzt Ihr folgende Funktion:

    [code]
    function geocode($address){

    // url encode the address
    $address = urlencode($address);

    // google map geocode api url
    $url = „https://maps.googleapis.com/maps/api/geocode/json?address={$address}&key=[deinapikey]“;
    #echo $url.“,
    // get the json response
    $resp_json = file_get_contents($url);

    // decode the json
    $resp = json_decode($resp_json, true);

    // response status will be ‚OK‘, if able to geocode given address
    if($resp[’status‘]==’OK‘){

    // get the important data
    $lati = $resp[‚results‘][0][‚geometry‘][‚location‘][‚lat‘];
    $longi = $resp[‚results‘][0][‚geometry‘][‚location‘][‚lng‘];
    $formatted_address = $resp[‚results‘][0][‚formatted_address‘];

    // verify if data is complete
    if($lati && $longi && $formatted_address){

    // put the data in the array
    $data_arr = array();

    array_push(
    $data_arr,
    $lati,
    $longi,
    $formatted_address
    );

    return $data_arr;

    }else{
    return false;
    }

    }else{
    return false;
    }
    }
    [/code]

    Mit dieser Funktion und dem API Key (https://console.developers.google.com/apis/library) könnt Ihr die Adressen in lang und long wandeln.

    [code]
    $data_arr = geocode(utf8_encode($zuwandelnde_adresse));
    // if able to geocode the address
    if($data_arr){
    $latitude = $data_arr[0];
    $longitude = $data_arr[1];
    $formatted_address = $data_arr[2];

    $sql = „UPDATE adressen SET latitude='“.$latitude.“‚, longitude='“.$longitude.“‚ WHERE AdrNr='“.$id.“‚“;
    $result = mysql_query($sql);
    }
    [/code]

    Wollt Ihr noch eine Umkreissuche nutzen, um Adressen in einem Bestimmten Umkreis anzeigen zu lassen, dann nutzt die PLZ-Umkreissuche von vektorkneter: https://www.vektorkneter.de/postleitzahl-umkreissuche-mit-php-und-opengeodb/

    Habt Ihr eine PLZ, dann ist die mysql Abfrage recht einfach:
    [code]
    $plz_id = ogdbPLZnearby($plz,$umkreis); //PLZ und Umkreis in km
    $ids = join(„‚,'“,$plz_id);
    $sql = „SELECT name,latitude,longitude FROM adressen WHERE plz IN (‚“.$ids.“‚)“;
    $result = mysql_query($sql);
    while ($row = mysql_fetch_array($result, MYSQL_NUM)) {

    echo ‚
    var point = new GLatLng(‚.$row[‚longitude‘].‘,‘.$row[‚latitude‘].‘);
    var marker = createMarker(point,“‚.utf8_encode($row[’name‘]).'“);
    map.addOverlay(marker);
    ‚;
    }
    [/code]

    Ich hoffe der ein oder andere Teil hilft Euch.
    Gruß
    Mark

    Antworten
  5. Sodah
    schrieb am 06.12.2013 um 13:33 Uhr:

    Hi,

    danke für den Beitrag, ich hatte bisher mit Google Maps Engine Lite versucht alles genauso umzusetzen. Man ist da aber leider sehr eingeschränkt.

    Antworten
  6. Hans Jud
    schrieb am 30.11.2013 um 15:48 Uhr:

    Schönes Script – gut kommentiert :-) Danke :-)
    Wie kann ich einen Tooltipp direkt anzeigen lassen – beim Öffnen der Map?
    Kann ich auch gerade den Routenplander einbinden?

    Antworten
  7. Steffen Männle von pur natur
    schrieb am 26.10.2013 um 12:02 Uhr:

    Danke für den tollen Beitrag! Wir haben das auch auf unserer Website umgesetzt um so mehrere Showrooms zu zeigen.

    Antworten
  8. Viktor
    schrieb am 11.05.2012 um 12:21 Uhr:

    Der Beitrag ist wirklich sehr interessant. Werde es auch mal versuchen und bin sehr gespannt, ob es auch bei der Umsetzung funktioniert.

    Antworten
  9. Frank Rapp
    schrieb am 31.03.2012 um 16:02 Uhr:

    Sehr interessanter und umfangreicher Artikel! :-) Man kann jedoch auch ohne Programmierkenntnisse mehrere Orte in Google Maps markieren. Ich habe dazu einen kurzen Artikel geschrieben: http://frankrapp.de/online-marketing/mehrere-orte-in-google-maps-markieren

    Antworten
  10. Roland
    schrieb am 16.01.2012 um 08:58 Uhr:

    Hallo,
    tolles Tutorial!

    Gibt es für die Einbindung mit api V3 eine Aktualisierung bzw. wo liegen die Unterschiede. Bin aus der Google Doku nicht schlau geworden.
    Toll wäre auch eine Ergänzung, wie man die Marker durch das eigene Logo ersetzen kann. Danke!

    Antworten
  11. Andreas
    schrieb am 04.01.2012 um 16:00 Uhr:

    Hallo,

    so, habs rausgefunden, falls die Nachwelt das noch gebrauchen kann, hier mal kurz mein Code-Schnippsel. Bei „GOOGLE_KEY“ muss Euer Key rein und darunter dann die Adresse, für die Ihr die Koordinaten haben wollt:

    $k = 'GOOGLE_KEY';
    $q = 'STRASSE PLZ STADT';

    // Ermitteln der Koordinaten
    $geo = file('http://maps.google.com/maps/geo?q='.rawurlencode($q).'&output=csv&key='.$k);

    if($geo) {
    // String aufsplitten
    $array = explode(',', $geo[0]);
    if($array[0] == 200){

    $coordinates = implode(',', array_slice($array,2));

    }
    }

    Ab hier geht es dann weiter, wie im Script oben, statt der Koordinaten, tragt Ihr dann aber eben die PHP-Variable dort ein:

    // Standort Anfang
    var point = new GLatLng();
    var marker = createMarker(point,'Meiner neuer Layer')
    map.addOverlay(marker);
    // Standort Ende

    Bei mir klappt das so wunderbar ;-)

    Beste Grüße
    Andreas

    Antworten
  12. Andreas
    schrieb am 03.01.2012 um 22:40 Uhr:

    Hallo,

    wie kann ich denn dieses tolle, einfache und übersichtliche Script benutzten, um die die entsprechenden Punkte anhand von Adressen aus einer Datenbank zu erzeugen? Da habe ich nämlich die Längen- und Breitengrade nicht drin, nur die Adressen.

    Das müsste doch mit einer kleinen Änderung sicher ebenfalls möglich sein, oder?

    Besten Dank
    Andreas

    Antworten
  13. Siegfried
    schrieb am 09.09.2011 um 13:14 Uhr:

    Das ist mal ein Supertip.
    Hat jemand einen Tip wie man die verschiedenen Adressen durch eine Weglinie verbinden kann ?

    Antworten
  14. Thorsten
    schrieb am 07.09.2011 um 18:21 Uhr:

    Hat jemand einen Tipp, wie man das jetzt funktionsfähig in WordPress einfügt?

    Antworten
  15. Jörg
    schrieb am 30.06.2011 um 17:25 Uhr:

    Meine Lösung um in das o.a. Skript viele Adressen einzutragen:

    Ich habe mir in Word einen Serienbrief geschrieben, der wie im Skript den Inhalt zwischen

    // Standort Anfang
    …..
    // Standort Ende

    beinhaltet.

    Die individuell auszufüllenden Felder: latitude – longitude und den Inhalt für das Markerfeld habe ich dann mit der entsprechenden Exceltabelle verknüpft.

    Serienbrief ablaufen lassen – als .txt Datei abgespeichert – mit Text-Editor geöffnet – und den Inhalt dann in die html-Datei eingefügt.

    Jörg

    Antworten
  16. Jörg
    schrieb am 30.06.2011 um 17:16 Uhr:

    @Tobias

    Ich habe heute dieses Skript für 40 Adressen zum Laufen bekommen.
    Hatte allerdings zuerst auch Probleme, die auf eine Begrenzung von 10 Markern hinwiesen.
    Aber bei mir war die Lösung recht einfach: In meiner Datenquelle waren die Zeichen „&“ und “ ‚ “ in den Adressen vorhanden. Und die mag das Skript überhaupt nicht. Zeichen gelöscht bzw. ersetzt und nun läuft es.

    Jörg

    Antworten
  17. Tobias
    schrieb am 24.03.2011 um 07:45 Uhr:

    Hallo, hat mir sehr geholfen nur jetzt hab ich das Problem, dass ich mehr als 10 Standorte angeben will. Bei 10 ist aber schluss, aus welchen Grund auch immer, dann werden die Adresse nnicht mehr gefunden?? Kennt Ihr eine Lösung

    danke
    tobias

    Antworten
  18. Sascha
    schrieb am 09.03.2011 um 08:40 Uhr:

    Gratulation zur gelungenen Beschreibung! Bei mir tritt das Problem auf, dass der Tooltip-Hintergrund nicht korrekt dargestellt wird. Hier das Beispiel: http://www.dinner-geschenke.de/dinner-krimi/. Die Ecken rechts werden nicht korrekt geladen. Kennt jemand die Ursache?

    Antworten
  19. aim2k1
    schrieb am 07.02.2011 um 14:14 Uhr:

    Hallo, ich finde das Tutorial auch super, ich habe es auch verwenden, nun ist nach ca. 2 Wochen das komplette Standorte-Feld in meiner Seite einfach verschwunden und funktioniert nicht mehr, weiß Jemand woran das liegen kann?

    Antworten
  20. Thomas
    schrieb am 11.12.2010 um 22:17 Uhr:

    Tausend Dank für dieses geniale Tutorial! Hat mit bei meinem aktuellen Projekt sehr geholfen! Dankeschön! :)

    Antworten
  21. Google Maps API - Strecken berechnen | kulturbanause blog
    schrieb am 01.07.2010 um 10:03 Uhr:

    […] einiger Zeit habe ich in einem kleinen Tutorial erklärt wie man mehrere Standorte in einer Google Karte anzeigen lässt. Auf 1stWebdesigner findet sich nun ein sehr lesenswerter Artikel der beschreibt […]

    Antworten
  22. Bruno Rotondi
    schrieb am 27.06.2010 um 15:45 Uhr:

    Gibt es auch eine Möglichkeit, statt der nackten Marker auch einen Text anzuzeigen (nicht erst bei Hover oder Click)? Z.B. „Start“, „Ziel“, …

    Antworten
  23. Google Earth in Google Maps | Infopool für Webmaster und Blogger
    schrieb am 16.05.2010 um 05:27 Uhr:

    […] Kulturebanause.de mit einer interessanten Vorführung wie man in Google Maps mehrere Standorte darstellen lässt […]

    Antworten
  24. Andre
    schrieb am 12.05.2010 um 16:39 Uhr:

    @Jonas: Das ist mir auch aufgefallen, dass die Snippets-Seite auf einmal futsch war. Auch wenn ich da nie konstruktiv mitgearbeitet habe, habe ich da immer mal nachgeschlagen und das Wissen wie eine Zecke aufgesaugt :]

    Antworten
  25. Stefan
    schrieb am 10.05.2010 um 09:38 Uhr:

    Damit bekommt man die neuen Navigationelemente: map.setUIToDefault();

    Auch praktisch, MouseZoom: map.enableScrollWheelZoom(); map.enableContinuousZoom();

    Antworten
    • Jonas
      schrieb am 10.05.2010 um 10:13 Uhr:

      @Stefan: danke für den Tipp

      Antworten
  26. Andre
    schrieb am 10.05.2010 um 09:01 Uhr:

    Großartiger Beitrag Jonas!

    Antworten
    • Jonas
      schrieb am 10.05.2010 um 09:20 Uhr:

      @André: Ich hatte auf meiner ehemaligen Snippets-Seite den Beitrag in Kurzform schon vor langer Zeit verfasst. Aber dann ist mir auf peinliche und unglückliche Weise die Datenbank abhanden gekommen und alles war weg. Als letztens im Designmeeting das Thema nochmal aufgegriffen wurde habe ich mir gedacht „dass musst du nochmal posten“ … vor allem weil ich diesen Beitrag selbst häufig als Quelle genutzt habe.

      Antworten
  27. Tweets die Mehrere Standorte in Google Maps anzeigen | kulturbanause blog erwähnt -- Topsy.com
    schrieb am 09.05.2010 um 23:44 Uhr:

    […] Dieser Eintrag wurde auf Twitter von Jonas Hellwig erwähnt. Jonas Hellwig sagte: Mehrere Standorte in Google Maps anzeigen http://tinyurl.com/3yq93v7 #API #Google […]

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →