YellowLeds Weblog v2

Artikel über Webdesign, Webstandards und Serendipity von Matthias Mees

Seite 61 von 109, insgesamt 109 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.