Custom Markers

Store Locator Map: SE allows you to replace the default Google Maps pins with custom marker icons. Custom markers help your store locator stand out visually and reinforce your brand identity on the map.

Default Marker

By default, the widget uses the standard Google Maps red pin marker. This is functional but generic. Replacing it with a branded icon improves visual consistency with your storefront.

Uploading a Custom Marker

Setting a Global Custom Marker

A global marker is used for all locations unless overridden by a group-specific marker.

1. Open the app and go to Settings > Map > Markers.
2. In the Default Marker section, click Upload Custom Marker.
3. Select an image file from your computer.
4. Adjust the marker size if needed (see Marker Size below).
5. Click Save.

Image Requirements

Requirement	Value
Supported formats	PNG (recommended, supports transparency), SVG, JPEG, WebP
Recommended dimensions	64 x 64 pixels for standard displays; 128 x 128 pixels for Retina/HiDPI
Maximum file size	500 KB
Transparency	Supported for PNG and SVG formats. Transparent backgrounds are recommended for a clean appearance.
Aspect ratio	Square (1:1) is recommended. Non-square images will be scaled proportionally within the configured marker size.

Design Tips

• Use a simple, recognizable shape. Markers are displayed at small sizes on the map, so intricate details may not be visible.
• Ensure sufficient contrast against the map background. Test your marker against multiple map styles (light, dark, satellite).
• Include a pointed bottom or drop shadow to visually anchor the marker to the map location.
• If using your logo, consider placing it inside a pin or badge shape.

Different Markers per Location Group

You can assign distinct marker icons to different location groups or tags, making it easy for customers to visually distinguish between store types on the map.

Assigning a Marker to a Group

1. Go to Settings > Map > Markers.
2. Under Group Markers, click Add Group Marker.
3. Select the group or tag from the dropdown.
4. Upload the custom marker image for that group.
5. Click Save.

Example Configuration

Group	Marker
Default (all locations)	Blue circle with company logo
Flagship	Gold star pin
Outlet	Green tag pin
Partner	Gray pin with partner icon

When a location has multiple tags with different markers, the app uses the marker from the highest-priority group (based on the group's sort order in the settings).

Marker Size

Control the display size of markers on the map.

Setting	Description	Default
Width	The display width of the marker in pixels.	32px
Height	The display height of the marker in pixels.	32px
Anchor point	The point on the marker image that aligns with the geographic coordinate. Typically set to the bottom center for pin-shaped markers.	Bottom center

Configuring Marker Size

1. Go to Settings > Map > Markers.
2. Adjust the Width and Height values.
3. Set the Anchor point using the visual anchor selector. Click the point on the marker preview that should align with the map coordinate.
4. Click Save.

备注

On high-DPI (Retina) displays, markers are rendered at double resolution. Upload images at twice the display size for sharp rendering on all devices (e.g., upload a 64x64 image for a 32x32 display size).

Active / Selected Marker

You can define a separate marker icon or style for the currently selected location (i.e., when a customer clicks a marker or selects a location from the list).

1. Go to Settings > Map > Markers.
2. In the Active Marker section, choose one of the following:

Option	Description
Scale up	The selected marker increases in size (e.g., 1.5x the default). No additional image needed.
Custom icon	Upload a different marker image for the selected state (e.g., a highlighted or outlined version).
Bounce animation	The selected marker briefly bounces to draw attention.

3. Click Save.

Marker Clustering

When you have many locations in a small geographic area, individual markers can overlap and become difficult to distinguish. Marker clustering groups nearby markers into a single cluster icon displaying the count of locations in that area. As the customer zooms in, clusters break apart into individual markers.

Enabling Marker Clustering

1. Go to Settings > Map > Markers.
2. Toggle Enable marker clustering on.
3. Configure clustering options:

Setting	Description	Default
Cluster radius	The pixel radius within which markers are grouped into a cluster. Larger values produce fewer, larger clusters.	60px
Minimum cluster size	The minimum number of markers required to form a cluster.	2
Cluster colors	Color tiers based on the number of locations in a cluster (e.g., blue for 2--10, yellow for 11--50, red for 50+).	Blue / Yellow / Red
Show count	Display the number of locations inside the cluster icon.	Enabled
Custom cluster icon	Upload a custom image to use as the cluster background instead of the default circle.	Default circle

4. Click Save.

How Clustering Behaves

• At low zoom levels (zoomed out), nearby markers are consolidated into clusters.
• Clicking a cluster zooms the map in to reveal the individual markers within it.
• At high zoom levels (zoomed in), all markers are displayed individually.
• The cluster count updates dynamically as the customer pans and zooms.

Resetting to Default Markers

To revert to the standard Google Maps pins:

1. Go to Settings > Map > Markers.
2. Click Reset to Default in the Default Marker section.
3. Click Save.

Next Steps

• Map Styles -- Customize the overall map appearance to complement your markers.
• Info Windows -- Configure the popup that appears when a marker is clicked.