kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops und Seminare von kulturbanause

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Tickets sichern!

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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

26 Kommentare

  1. Andre

    Verfasst am 10. Mai 2010 um 9:01 Uhr.

    Großartiger Beitrag Jonas!

    • Jonas

      Verfasst am 10. Mai 2010 um 9: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.

  2. Stefan

    Verfasst am 10. Mai 2010 um 9:38 Uhr.

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

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

    • Jonas

      Verfasst am 10. Mai 2010 um 10:13 Uhr.

      @Stefan: danke für den Tipp

  3. Andre

    Verfasst am 12. Mai 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 :]

  4. Bruno Rotondi

    Verfasst am 27. Juni 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“, …

  5. Thomas

    Verfasst am 11. Dezember 2010 um 22:17 Uhr.

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

  6. aim2k1

    Verfasst am 7. Februar 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?

  7. Sascha

    Verfasst am 9. März 2011 um 8: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?

  8. Tobias

    Verfasst am 24. März 2011 um 7: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

  9. Jörg

    Verfasst am 30. Juni 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

  10. Jörg

    Verfasst am 30. Juni 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

  11. Thorsten

    Verfasst am 7. September 2011 um 18:21 Uhr.

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

  12. Siegfried

    Verfasst am 9. September 2011 um 13:14 Uhr.

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

  13. Andreas

    Verfasst am 3. Januar 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

  14. Andreas

    Verfasst am 4. Januar 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

  15. Roland

    Verfasst am 16. Januar 2012 um 8: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!

  16. Frank Rapp

    Verfasst am 31. März 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

  17. Viktor

    Verfasst am 11. Mai 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.

  18. Steffen Männle von pur natur

    Verfasst am 26. Oktober 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.

  19. Hans Jud

    Verfasst am 30. November 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?

  20. Sodah

    Verfasst am 6. Dezember 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.

  21. Mark Gebur

    Verfasst am 13. Oktober 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

  22. Garant-Service

    Verfasst am 23. Dezember 2016 um 8: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

  23. Anja

    Verfasst am 23. Dezember 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.

  24. Mario

    Verfasst am 5. März 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

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.