Google Advanced Markers

Agile Store Locator has newly launched support to Google Advanced Markers that has been released by the Google Maps in Oct 2022, these markers are still in beta version and a new library named as “marker” has been provided by the Google to initialize it.

blank

To enable these Advanced Marker in the ASL Settings, go to the Maps tab and enable it.

blank

Warning: Please note that once Advanced Markers are enabled, the following features will not work:

  • the Manager Markers & the Category Markers will not work as Advanced Markers will be used
  • Clusters are not supported with the Google Advanced Markers.

How to Customize the Advanced Markers? #

Advanced Google Markers are fully customizable and you can change the content of the marker, you can customize the content of the marker through the Store Locator Customizer.

blank

Select the Marker that you are using, and click on the Load Template button.

blank

Please note that since these markers are content-based the design will remain the same for all the markers, however, you can have different content based on the store for each of them.

How to change the Marker Color? #

The advanced markers are customizable not just by the content, you can easily manage their appearance color scheme as well, We have provided variables using which you can add your own hex color codes, and the CSS lines can be added to your theme stylesheet or via additional CSS through the theme Customizer.

.asl-cont {
    --asl-mkr-background: #FF0000;
    --asl-mkr-color: #FFF;
}

The above lines will change the color of the marker to the specified hex codes, below are some more examples of related UI colors.

Add Color to Hover State

.asl-cont {
    --asl-mkr-highlight-background: #FFFF00;
    --asl-mkr-highlight-color: #CCC;
}

Infobox Background Color

.asl-cont {
    --asl-mrk-infobox-bg: #FF0000;
    --asl-mrk-infobox-clr: #FFF;
}

Title and Text of Infobox Color

.asl-cont {
    --asl-mkr-infobox-title-clr: #000;
    --asl-mkr-infobox-text-clr: #000;
}

Customization Video Tutorial #

Google Advanced Markers Tutorial