---
title: "Map Marker"
slug: "map-marker-filter"
updated: 2026-02-25T17:36:32Z
published: 2026-02-25T17:36:32Z
canonical: "learn.servitly.com/map-marker-filter"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Map Marker

The filter displays a map with a marker at the given GPS coordinates.

You can use this filter to display the position of a product or a location.

![Map Marker](https://components-manager.servitly.com/components/MapMarker_1/IMAGES/_screenshot?owner=AG_Servitly)

# Filter Variants

The set of predefined filter variants that can be used to format values.

| *Map Marker (122px height)* | Displays a small map with a marker placed at the given position. This rendering can be embedded between other properties. **Name**: *mapMarkerSmall* **Input Types**: *ANY* **Output Type**: *HTML* ![](https://components-manager.servitly.com/components/MapMarker_1/IMAGES/variants/mapMarkerSmall/_image?owner=AG_Servitly) |
| --- | --- |
| *Map Marker (225px height)* | Displays a map with a marker placed at the given position. If you want a box filled entirely by the map, without margins, add the 'map-box' CSS class to the parent details widget. **Name**: *mapMarker* **Input Types**: *ANY* **Output Type**: *HTML* ![](https://components-manager.servitly.com/components/MapMarker_1/IMAGES/variants/mapMarker/_image?owner=AG_Servitly) |

# Custom Variants

New variants can be defined through the following configuration options.

| **Option** | **Description** | **Sample Value** |
| --- | --- | --- |
| *height* | The minimum map height in pixels. | 512 |
| *iconUrl* | The URL of the custom marker icon to be displayed | https://resources.servitly.com/components/MapMarker/marker.png |
| *iconSize* | The marker icon size in pixels. | 16 |
| *zoom* | The initial zoom level. | 3 |

Example of defining a custom map marker filter variants into the [Custom Filters](/docs/custom-filters) component.

```javascript

        exports.bigMap = MapMarker({"height":500, "zoom":8});
    
```