Custom Maps mit ACF Pro Google Maps

Mousewheel Zoom, Infobox Control & beliebig viele Location Markers mit Custom Icons

Maps Plugins für WordPress gibt es wie Sand am Meer. Aber warum auf eine weiteres Plugin zurück greifen, wenn das Advanced Custom Fields Plugin (ACF) onhnehin zum Einsatz kommt und diese Funktion auch bietet?
Die hier vorgestellte Lösung setzt das ACF Pro Plugin voraus – eine Investition die jedem WordPress Worker ans Herz gelegt sei – um Repeater Fields für mehrere Marker auf einer Karte nutzen zu können.
Die out-of-the-box Optionen für ACF Google Maps sind allerdings eher überschaubar, so dass hier für einen Travel Blog etwas Arbeit nötig war um erweiterte Funktionen zu integrieren:

  • Das Zoom Level kann für jeden Post einzeln festgelegt werden
  • Mousewheel Zoom für jeden Karte an-/abschaltbar, damit bei sehr breiten Maps versehentliches einzoomen (während eigentlich die Seite gescrollt werden soll) verhindert wird
  • Für jeden Marker kann – neben Titel, Bild und Beschreibung – ein individuelles Icon angelegt werden
  • Marker Infoboxen werden beim Laden der Map wahlweise offen oder geschlossen dargestellt

ACF Pro Google Map extended

In der Dokumentation zum ACF Google Maps Field wird gut erläutert wie das grundlegende Setup zu bewerkstelligen ist. Darauf basierend sehen die Anpassungen so aus:


Basic Styling im Theme Stylesheet:


Erweiterungen der Theme functions.php

Diese Erweiterungen sind nicht notwendig, aber empfohlen.
In der ersten Funktion wird die Höhe der Map-Vorschau im Backend festgelegt, die ansonsten aus den Map Settings kommen würde. Da es beim Bearbeiten umständlich sein kann, durch eine Marker Liste mit 450 Pixeln hohen Maps zu scrollen, wird ein kleinerer Wert gesetzt.
Die zweite Funktion legt eine zusätzliche Bildgröße an, um die Ladezeiten einer Seite nicht durch große Bilder in der Infobox der Map zu verschlechtern.


Ausgabe im Theme


ACF Fields anlegen

Die benötigten Map Fields können hier zum Import herunter geladen werden (entpacken und unter Eigene Felder -> Werkzeuge importieren):

Damit kann jetzt für jeden Post eine Google Map mit einem oder mehreren Markern erstellt werden:

ACF Pro Google Map extended Admin Fields


Custom Marker Icons

Eine umfangreiche Sammlung an Map Icons findet sich z. B. bei der mapicons collection. Die Icons werden über den WordPress Media Uploader eingebunden, dabei empfiehlt sich die Verwendung eines Media Taxonomy Plugins, um jederzeit die Icons filtern zu können.

ACF Pro Google Map extended Custom Marker Icons