Custom Map Markers

Map markers are the pins that show your locations on the map. You can customize these to match your brand, use your own icons, and even show different markers for different location types.

Open Map Style & Markers

On This Page

• Default Map Marker
• Marker Clustering
• Custom Markers by Tag
• Best Practices

Default Map Marker

The default marker is what shows for all your locations unless you set up conditional markers based on tags. You have two options for your default marker: use the standard pin icon with a custom color, or upload your own custom icon.

Standard Icon with Custom Color

1. Go to Widget Settings → Map Style & Markers
2. Under Default Map Marker Icon, select Use Standard Icon and Choose Color
3. Pick a color from the palette or enter a hex code

The standard icon is a classic map pin shape that works well at any zoom level. If you don't choose a custom color, markers will use your widget's accent color (set in Design & Branding).

Custom Icon

If you want to use your own marker image:

1. Go to Widget Settings → Map Style & Markers
2. Under Default Map Marker Icon, select Upload Custom Icon
3. Upload a PNG image

Marker Size

You can adjust the size of your markers by setting the Map Marker Icon Size in pixels. The default is 50px. Larger markers are more visible but may overlap when locations are close together. Smaller markers are cleaner but can be harder to tap on mobile.

Marker Clustering

When you have many locations close together, the map can become cluttered with overlapping markers. Clustering groups nearby markers into a single circle that shows a count.

Enabling Clustering

1. Go to Widget Settings → Map Style & Markers
2. Check Enable Map Marker Clustering
3. Choose a cluster color, or leave it to use your accent color

When clustering is enabled, zoomed-out views show clusters. As users zoom in, clusters break apart to reveal individual location markers. Clicking a cluster zooms the map to show its locations.

Custom Markers by Tag

This is where things get powerful. You can set up rules that show different markers based on which tags a location has. This lets customers visually distinguish location types at a glance.

For example:

• Flagship stores show a gold star marker
• Express locations show a smaller icon
• Premium dealers show a different color than standard dealers
• Locations with a specific product use that product's icon

How Marker Rules Work

Each rule has two parts:

1. Marker Style: Either a color (which creates a colored pin icon) or a custom uploaded image
2. Tag Condition: Which tags a location must have for this rule to apply

When the widget renders the map, it checks each location against your rules. If a location matches a rule's tag condition, it uses that rule's marker. If no rules match, the location uses your default marker.

Setting Up a Marker Rule

1. Go to Widget Settings → Map Style & Markers
2. Scroll to Marker Rules by Tag
3. Click Add Marker Rule
4. Set the marker style:
   • Choose a color using the color picker, OR
   • Upload a custom PNG image
5. Select which tags are required for this marker to appear
6. Click Save Settings

You can add multiple rules. Each rule can require multiple tags.

Tag Conditions Explained

When you select tags for a rule, the location must have all of the selected tags for the rule to apply. This is AND logic.

For example, if you create a rule that requires both "Premium" and "Certified" tags:

• A location with just "Premium" → does NOT match, uses default marker
• A location with just "Certified" → does NOT match, uses default marker
• A location with both "Premium" and "Certified" → matches, uses this rule's marker

Rule Priority

Rules are evaluated in the order they appear in the list. The first matching rule wins. This lets you create specific rules that take priority over more general ones.

For example, you might have:

1. Premium Partners (requires: premium-partner) → Gold star icon
2. Certified Dealers (requires: certified) → Green pin
3. Authorized Dealers (requires: authorized) → Blue pin

A location that has both premium-partner and certified tags will get the gold star (rule 1), not the green pin (rule 2), because rule 1 appears first and matches.

You can drag rules to reorder them and change priority.

Example: Dealer Network

A manufacturer with tiered dealers might set up:

Customers can instantly see which dealers are Premium vs Certified vs Authorized right on the map.

Example: Product Availability

A retail brand might show which products each store carries:

Best Practices

Custom Icon Design

When creating custom marker icons:

• Use PNG format with transparent backgrounds
• Design at 2x resolution for sharp display on retina screens (e.g., create a 100px image if you want a 50px marker)
• Point downward if your icon indicates a specific location, since the marker anchors from the bottom center
• Keep it simple since markers are small. Detailed images may not be legible at typical sizes
• Test visibility against different map styles (default, light, dark, satellite)

Color Choices

When choosing marker colors:

• Contrast with the map: Avoid greens and blues that blend into parks, water, or roads
• Match your brand: Use your brand colors when possible for recognition
• Differentiate clearly: If using multiple marker colors, choose colors that are easy to tell apart

Clustering Considerations

• Enable clustering if you have many locations that may appear close together at common zoom levels
• Match cluster color to your overall design. The default uses your accent color which usually works well
• Consider location density: If your locations are spread out geographically, you may not need clustering

Related Features

• Filters & Tags: Set up the tags that power conditional marker rules
• Priority Sorting: Boost locations with specific tags to the top of results
• Map Style & Markers Settings: Configure map themes to complement your markers