Seite 1 von 1, insgesamt 1 Einträge

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:

Screenshot des Map-Marker-Feldes im ProcessWire-Backend mit Livevorschau der erzeugten Karter

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.