Google Maps Custom MarkerCluster Icon

Marker Clustering im Elementor mit UAE-Plugin und Custom Icon mit Filter Hook

Google Maps Custom Marker-Cluster Icon

In Google Maps kann man Marker clustern. Google verwendet dafür ein Standard-Icon, welches in der Google Map mit der entsprechenden Anzahl der Marker ergänzt wird:
Google Maps Default Cluster Marker Icon

Ultimate Addons für Elementor

Um in der Google Map ein Custom Icon für den Cluster-Marker einbauen zu können, verwende ich das Plugin “Ultimate Addons for Elementor” von ASTRA, welches in der günstigsten Version bereits 50+ Elementor Widgets (inkl. Google Maps), 90+ Free Starter Templates und
200+ Section Blocks enthält:

Ultimate Addons for Elementor

Wichtig: Diese Anleitung funktioniert nur mit dem Pagebuilder Elementor (die kostenlose Version ist ausreichend) und dem Plugin “Ultimate Addons for Elementor” von Astra. Mit einem Filter-Hook des Plugins “Ultimate Addons for Elementor” werden die Daten für die Google Map entsprechend angepasst.

Cluster Marker Icon ändern

Im Plugin “Ultimate Addons for Elementor” ist in dem Modul /modules/google-map/widgets/google-map.php ein Filter-Hook, der es erlaubt, die Cluster-Attribute zu ändern, zu ergänzen oder zu löschen. Mit diesem Filter-Hook wird die Information für das Cluster-Icon an die Google Map weitergegeben:
function bt_cluster_options( $options ) {
  $options['imagePath'] = "/wp-content/uploads/image-name-ohne-1-und-png";
  return $options;
}
add_filter( 'uael_cluster_options', 'bt_cluster_options' );
Der vom Plugin "Ultimate Addons for Elementor" übergebene Parameter ($options) ist ein Array mit den Cluster-Attributen, die an die Google Map weitergegeben werden.
In der Funktion "bt_cluster_options" wird die Information für das Cluster-Marker-Icon ('imagePath') übergeben. Wichtig: Das Plugin "Ultimate Addons for Elementor" erwartet den Pfad zum Icon und hängt 1.png an den übergebenen Pfad.

Dateiname in der Mediathek:
/wp-content/uploads/image-name-ohne-1-und-png1.png

Dateiname im Filter-Hook ($options['imagePath']):
/wp-content/uploads/image-name-ohne-1-und-png
Google Maps MarkerCluster Icon - Highlights in Paderborn

Auch bei dem eigenen, individuellen MarkerCluster-Bild wird die Anzahl der dahinterliegenden Adressen (in diesem Beispiel 3) über dem Icon in der Google Map angezeigt.

Individuelle Marker in Google Map

Mit einem Klick auf das Cluster Marker Icon wird automatisch in die Karte gezoomt und einzelne Marker für die hinterlegten Adressen werden angezeigt.

Individuelle Icons für jede Adresse in der Google Map kann direkt im Plugin “Ultimate Addons for Elementor” als PNG, JPG und auch SVG hochgeladen werden:

Individuelle Marker in Google Map

Download Plugin, um Cluster-Marker Icon in Google Maps zu ändern:

Wichtig: Das Plugin funktioniert mit der kostenlosen Version vom Pagebuilder Elementor und dem Plugin “Ultimate Addons for Elementor” von ASTRA.
Getestet mit
  • WordPress Version 6.0.1
  • Elementor 3.6.8
  • Ultimate Addons for Elementor Version 1.36.8
  • PHP 8.0

Hilfreiche Links:

Fragen, Wünsche und Anregungen

Ich freue mich auf Fragen, Wünsche und Anregungen an info@bt-webdesign.de.
Kontakt
05254 / 67673
info@bt-webdesign.de
Kontaktformular