Mehrere Standorte in Google Maps anzeigen
Von Jonas In diesem Beitrag findet ihr den Code um mehrere Standorte in Google Maps anzuzeigen.
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.
Inhalte
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. …
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&v=2&sensor=false&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;
}
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>
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.
<!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&v=2&sensor=false&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>
Geschrieben von Jonas
Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.
Die Demo und der API-Link funktionieren nicht mehr!
http://code.google.com/intl/de/apis/maps/signup.html ???
Liebe Grüße
Mario
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.
Hallo,
werden die verschiedenen Standorte dann nur auf meiner Webseite angezeigt oder können Kunden auch allgemein über Maps die Standorte sehen?
Gruß Daniel
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
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.
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?
Danke für den tollen Beitrag! Wir haben das auch auf unserer Website umgesetzt um so mehrere Showrooms zu zeigen.
Der Beitrag ist wirklich sehr interessant. Werde es auch mal versuchen und bin sehr gespannt, ob es auch bei der Umsetzung funktioniert.
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
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!
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
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
Das ist mal ein Supertip.
Hat jemand einen Tip wie man die verschiedenen Adressen durch eine Weglinie verbinden kann ?
Hat jemand einen Tipp, wie man das jetzt funktionsfähig in WordPress einfügt?
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
@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
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
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?
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?
Tausend Dank für dieses geniale Tutorial! Hat mit bei meinem aktuellen Projekt sehr geholfen! Dankeschön! :)
[…] 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 […]
Gibt es auch eine Möglichkeit, statt der nackten Marker auch einen Text anzuzeigen (nicht erst bei Hover oder Click)? Z.B. „Start“, „Ziel“, …
[…] Kulturebanause.de mit einer interessanten Vorführung wie man in Google Maps mehrere Standorte darstellen lässt […]
@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 :]
Damit bekommt man die neuen Navigationelemente: map.setUIToDefault();
Auch praktisch, MouseZoom: map.enableScrollWheelZoom(); map.enableContinuousZoom();
@Stefan: danke für den Tipp
Großartiger Beitrag Jonas!
@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.
[…] 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 […]