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.

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

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.

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

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 #

Warning Notice in the Browser Console by Google Maps Library #

As of February 21st, 2024, google.maps.Marker is deprecated. Please use google.maps.marker.AdvancedMarkerElement instead. At this time, google.maps.Marker is not scheduled to be discontinued, but google.maps.marker.AdvancedMarkerElement is recommended over google.maps.Marker. While google.maps.Marker will continue to receive bug fixes for any major regressions, existing bugs in google.maps.Marker will not be addressed. At least 12 months notice will be given before support is discontinued.

Notice by Google Maps

By supporting both marker types, the Agile Store Locator plugin ensures compatibility with existing implementations while allowing developers to take advantage of the latest Google Maps features.