Karten mit ProcessWire und gmaps.js

In meinem aktuellen Projekt ergab sich folgende Aufgabenstellung: Zu verschiedenen Veranstaltungen sollen jeweils Anfahrtskarten über Google Maps angelegt werden können – und zwar möglichst simpel und bequem für den Kunden im CMS-Backend.

Die Redakteure beim Kunden sind jedoch keine Geolocation-Experten oder auch nur besonders „webaffin“, es braucht also ein wirklich simples Interface für diese Karten. Mit dem „richtigen“ CMS (ProcessWire) und einem geeigneten Javascript-Plugin für Google Maps (gmaps.js) ist das aber durchaus machbar.

Maps in ProcessWire: Map Marker

Für ProcessWire gibt es einen sehr pfiffigen Feldtyp, den man als Modul installieren kann: Map Marker. Dieser Feldtyp erzeugt im CMS-Backend ein sehr komfortables Eingabefeld für Orte in Google Maps. Das sieht so aus:

In Adressfeld gibt man die gesuchte Adresse ein. Verlässt man das Feld per Tabulator-Taste o.Ä., wird die Anfrage an die Maps-API abgeschickt, die Werte für Länge und Breite in die entsprechenden Felder übertragen und die Kartenvorschau in Echtzeit aktualisiert – im Backend, wohlgemerkt. Darüber hinaus kann man individuell den Zoom einstellen.

Durch speichern der Seite werden diese Werte für das Feld gespeichert und über die geniale ProcessWire-API zur Verarbeitung bereitgestellt. Heißt das Map-Marker-Feld z.B. marker, kann man über echo $page->marker->address die gespeicherte Adresse erreichen.

Maps mit gmaps.js

Karten erzeugt man mit gmaps.js prinzipiell so:

map = new GMaps({
    div: "#map",
    lat: 54.125017,
    lng: 10.613429,
    zoom: 16,
});

Einen Marker fügt man den Karten wie folgt hinzu:

map.addMarker({
    lat: 54.125017,
    lng: 10.613429,
    title: "Zuhause",
    infoWindow: {
        content: "Rehhorst 39, 23701 Eutin",
    },
});

Wie aber bekommt man nun diese Daten, die man ansonsten – für eine Karte – direkt ins Javascript schreiben würde, für jede Karte individuell aus dem Map-Marker-Feld zum JS-Plugin? Man könnte sie per PHP in ein <script>-Element rendern, aber dank HTML5 haben wir dafür heuzutage andere Mittel – data-*-Attribute etwa.

echo "<div id='map' class='map' data-lat='{$page->event_map->lat}' data-lng='{$page->event_map->lng}' data-zoom='{$page->event_map->zoom}'>";
echo "<span>{$page->event_map->address}</span>";
echo "</div>";

Und diese Werte kann man sich dann sehr bequem mit jQuery aus dem DOM abholen:

var $container = $("#map");
var gmapLat = $container.attr("data-lat");
var gmapLng = $container.attr("data-lng");
var gmapZoom = parseInt($container.attr("data-zoom"), 10);
var gmapLoc = $container.find("span").text();

map = new GMaps({
    div: "#map",
    lat: gmapLat,
    lng: gmapLng,
    zoom: gmapZoom,
});

map.addMarker({
    lat: gmapLat,
    lng: gmapLng,
    title: gmapLoc,
    infoWindow: {
        content: gmapLoc,
    },
});

Zusätzlich muss man nun nur noch auf den Seiten, die Karten einbinden sollen, natürlich noch die Google-Maps-API und gmaps.js einbinden. Auch benötigt gmaps.js noch ein paar zusätzliche CSS-Styles, um die Karten (insbesondere responsive) korrekt darzustellen.

Und voilá, Aufgabe gelöst: der Redakteur muss im Backend im Prinzip lediglich die gewünschte Adresse eingeben und bestenfalls noch den Zoom einstellen. Alles andere erledigt eine Kombination aus CMS-Modul, ProcessWire-API und JS-Plugin.