Umgebungssuche nach Postleitzahl und Ausgabe in Google Map mit Drupal

Umgebungssuche nach Postleitzahl und Ausgabe in Google Map mit Drupal

Es gibt viele Anwendungen, bei denen es Sinn macht, Ortsangaben auch für die Anzeige in einer Karte zu verwenden. So erleichtert man seinen Kunden das Auffinden einer Filiale oder visualisiert Anbieter-Verzeichnisse, Standorte von Mietfahrzeugen etc.


Drupal bietet hierfür einige sehr interessante Module. So kann man mit Hilfe des Moduls "Location" nicht nur eine Suche nach Geo-Koordinaten durchführen, sondern auch nach Postleitzahlen. Durch seine Integration mit "Views" und "CCK" lassen sich sehr flexible Lösungen gestalten. So lassen sich gefundene Standorte direkt in einer Karte von GoogleMaps oder Bing anzeigen.


Und so geht's:


Benötigt werden die Module


Views (das sollte sowieso in keiner Drupal-Installation fehlen)


Location (ab Version 6.x-3.1)


GMap Module


  1. Als erstes installiert und aktiviert man die Module Views, Location und GMap.
  2. Jetzt wird das GMap-Modul konfiguriert (Verwalten >> Einstellungen >> GMap). Wichtig ist vor allem der API-Key von Google. Diesen benötigt man, um auf den Kartendienst von Google zugreifen zu können. Der Key ist an eine bestimmte Domain gebunden und kann auf dieser Google-Seite erstellt werden. Anschließend zentriert man die Karte auf einen Default-Standort (in unserem Beispiel Frankfurt am Main) und legt die Größe der Karte, den Zoomlevel, Farben, Schaltflächen und Kartentyp fest. Einstellungsdialog für Drupal GMap-ModulDie Einstellungsseite sieht dann ungefähr so aus:
  3. Als nächstes wird das Location-Modul konfiguriert (Verwalten >> Einstellungen >> Ort):  wichtig ist vor allem die "Default country selection" in "Main Settings". In unserem Beispiel stellen wir diese auf "Germany". Hat man alle Einstellungen vorgenommen, werden sie durch einen Klick auf "Konfiguration speichern" gesichert, bevor man zum nächsten Tab weitergeht. Noch ein Hinweis: Das Location-Modul hat noch keine vollständige deutsche Übersetzung, daher werden hier noch die englischen Bezeichnungen verwendet. Unter "Map Links" kreuzt man die Kartendienste für die Länder an, die man verwenden möchte. Wir setzen nur einen Haken bei "Google Maps" neben "Germany". Ganz wichtig: Unter "Geocoding Options" muss man zu seinem Land zusätzlich noch den Dienst aktivieren, denn standardmäßig sind hier alle Dienste ausgeschaltet und damit funktioniert das Geocoding nicht! Also runterscrollen bis "Germany" und dort den Radiobutton bei "Google Maps" anklicken. Alle übrigen Einstellungen lassen wir auf den Defaultwerten.
  4. Die Ortsangeben des Location-Moduls können für jeden Inhaltstyp verwendet werden. Der besseren Übersicht halber legen wie für dieses Beispiel aber einen neuen Inhaltstyp "GMap Module" an, den wir im Folgenden verwenden. Achtung: Dieses Beispiel benutzt node locations, nicht CCK location fields. Es ist daher nicht notwendig, ein spezielles CCK -Feld für die Ortsangaben anzulegen!
  5. Damit eine Suche nach Postleitzahlen möglich ist, benötigt Location eine Datei in der die deutschen Postleitzahlen mit ihren Geokoordinaten vorliegen. Das Modul bringt für acht Länder solche Dateien mit - darunter auch für Deutschland. Diese Dateien liegen im Modulordner unter ../sites/all/modules/location/database und müssen händisch in die Drupal-Datenbank importiert werden. Dies geht am besten mit phpMyAdmin. In unserem Beispiel importieren wir also die Datei zipcodes.de.mysql in unsere Drupal-Datenbank. Achtung: Die erste Zeile der Datei muss man vorher löschen, da sie einen Fehler beim Import verursacht!
  6. Jetzt legen wir ein paar Beispielnodes an, damit wir in unserem View und auf der Map auch etwas angezeigt bekommen. Dazu gehen wir auf "Inhaltsverwaltung >> Inhalt erstellen >> GMap Module". Es erscheint die übliche Eingabemaske zum Anlegen einer neuen Node. Wir füllen hier den Titel und die Nodebeschreibung aus und klicken dann auf "Ort". Es öffnet sich jetzt der Dialog für die Ortsangaben. Dort tragen wir einen Namen für den Ort ein (hier: "Test Location & GMap"), die Straße mit Hausnummer ("Bingelsweg 114"), den Ort ("Frankfurt am Main") und die Postleitzahl. Drupal Location-Modul: Neu Node mit Ortsangaben vor dem AbspeichernDie Felder für Längen- und Breitengrad bleiben leer, diese werden von Location automatisch beim Abspeichern der Node gefüllt (die Daten besorgt sich das Modul von Google).


    Wir speichern also die Node ab  und wie man auf dem folgenden Screenshot sieht hat Location Drupal: Neue GMap-Module-Node mit Geokoordinatenjetzt automatisch die Geocoordinaten für die Adresse bei Google abgefragt und eingetragen (rot markierte Felder).


    Wenn man die Node erneut zum Bearbeiten öffnet, sieht man auf der Karte jetzt einen Marker, der die eingegeben Adresse markiert. Auf diese Weise legen wir noch ein paar weitere Nodes an.

  7. Jetzt wird es Zeit, einen View zu erstellen der es erlaubt, Nodes anhand einer Umgebungssuche um eine bestimmte Postleitzahl zu ermitteln und diese auf einer GoogleMap anzuzeigen. Dazu klicken wir auf "Verwalten >> Strukturierung >> Views/Ansichten >> Hinzufügen". Dort tragen wir die üblichen Angaben wie Ansichtsnamen, Beschreibung und Kennzeichnung ein und wählen den Ansichtstyp "Node"(andere Typen gehen auch; welchen man wählt hängt von den jeweiligen Anforderungen ab).
  8. Als erstes wollen wir die Suchergebniss nur in einer Tabelle anzeigen lassen. Daher wählen wir bei "Design" "Tabelle" und fügen unter "Felder" die Felder "Node:Titel", "Ort: Adress", "Ort: Coordinates" und "Ort: Distance/Proximity" hinzu. Bei letzterem klicken wir nach dem Drupal View mit Ortsangaben von Location-ModuleHinzufügen auf das kleine Rädchen rechts neben dem Feld, um noch einige Einstellungen vorzunehmen (siehe rote Markierung im folgenden Screenshot). Bei "Units" stellen wir "Kilometers" ein und wählen als "Origin" "Use Distance / Proximity filter"
  9. Bei "Filter" füge wir jetzt die gewünschten "Nicht-Proximity"-Filter hinzufügen (hier den Node: Type = "GMap Module" und Node: Veröffentlicht = Ja). Da wir ja nach Entfernungen filtern wollen, fügen wir zusätzlich den Filter "Location: Distance / Proximity" hinzu und heben diesen hervor. Dann wählen wir folgende Einstellungen:

    Operator: Proximity (Circular)

    Origin: Postal Code

    Postal code: leer lassen oder Default-PLZ eintragen

    Countr: "Germany" eintragen

    Distance: Default-Wert eintragen (hier 10) und die Maßeinheit wählen (bei uns natürlich "Kilometers")

    Die Einstellungen für

    Operator entsperren:

    Optional:

    Erinnern:

    Filter identifier:

    Bezeichnung: "Ort: Distance / Proximity"

    sind beliebig wählbar - je nach Anforderung.

    Allow choice of user location: nicht ankreuzen, hat bei der PLZ-Suche keine Funktion
  10. Jetzt wollen wir die Ergebnisse noch nach Entfernung aufsteigend sortieren. Dazu fügen wir bei "Sortierkriterium" "Location: Distance / Proximity" hinzu und stellen es wie folgt ein:

    Origin: "Use Distance / Proximity filter" (damit das Sortierkriterium mit dem Filter verbunden wird)

    Sortierreihenfolge: "Aufsteigend"
  11. Nun noch den View speichern und ggf. eine Seite erzeugen und diese ins Menü einhängen, fertig!

Drupal: Suchergebnisse Umgebungssuche nach PLZ


Jetzt kann man eine Postleitzahl eingeben, das Land dazu wählen (hier haben wir allerdings nur "Germany" zur Verfügung) und den Suchradius eingeben. Der View gibt nun alle Nodes aus, die innerhalb dieses Radius' liegen, aufsteigend sortiert nach ihrer Entfernung (siehe Screenshot).


So, und wenn man die Ergebnisse auf einer Karte angezeigt haben möchte? Auch das ist einfach zu realisieren.


  1. Dazu ändern wir als erstes in dem obigen Beispiel bei den Basiseinstellungen das Design auf "GMap" und das Zeilendesign auf "Felder". Die Einstellungen für "GMap" (wieder auf das kleine Rädchen rechts neben der Zeile "Design: GMap" klicken) ändern wir wie folgt: "Data Source: Location.module", "Marker handling: Drupal: Einstellungen für GMap-Design in ViewUse single marker type", "Marker /fallback marker to use: Drupal"; Häkchen bei "Display a tooltip when hovering over markes" und "Tooltip field: Node: Titel" setzen.
  2. Als Felder wählen wir "Node: Titel", "Ort: Adress", Ort: Distance/Proximity". Die Einstellungen für das letzt genannte Feld sind genau wie in dem obigen Beispiel.
  3. Die Filter und Sortierkriterium werden ebenfalls wie oben beschrieben eingestellt.
  4. Jetzt noch eine Seiten-Anzeige hinzufügen. Dort einen Pfad angeben und einen Menüpunkt, mit dem der View eingebunden werden soll.
  5. Ruft man diesen jetzt auf, so sieht man zunächst nur die Eingabe maske für Postleitzahl und Distance. Sobald man dort Werte eingegeben und auf "Anwenden" geklickt hat, erscheint die Karte mit allen Markern, die innerhalb des Suchradius liegen.
    Drupal: Suchergebnisse Location-View mit Ausgabe in GoogleMap