---
title: "marker"
description: "Version compatibility"
permalink: /docs/build/ui-components/all-ui-components/capture-coordinates/marker/
---
# marker

<Info title={"Version compatibility"}>

`marker` was introduced in version **4.82.0** of the JourneyApps Runtime.

</Info>

## Overview

A `marker` can visually highlight a specific location on a map within either the `capture-coordinates` or `display-coordinates` UI component.

### Example - Binding Multiple Markers

### capture-coordinates

Below is an example of using `capture-coordinates` along with multiple custom markers.

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fgit-blob-9afd4aa86d0d2c6d4cc30a62be24081024537887-2fcapture-coordinates-bind-markers-f3674deb.png)

**main.view\.xml**

```xml
<var name="current_location" type="location" />
<var name="map_center" type="location" />
<var name="high_school" type="location" />
<var name="food" type="location" />

<capture-coordinates label="My Location" bind="current_location" allow-zoom="true" allow-dragging="true" >  
    <marker bind="map_center" icon="fa-user"/>
    <marker bind="high_school" icon="fa-graduation-cap" />
    <marker bind="food" icon="fa-utensils" />
</capture-coordinates>
```

**main.js**

```javascript
function init() {
    view.map_center = new Location({
      latitude: 39.7562259,
      longitude: -105.0094353
    });
    view.high_school = new Location({
      latitude: 39.7553694,
      longitude: -105.0195773
    });
    view.food = new Location({
      latitude: 39.7497094,
      longitude: -105.0053815
    });
}
```

### display-coordinates

Below is an example of using `display-coordinates` along with multiple custom markers.

![](https://docs.journeyapps.com/component/display-coordinates/docs-public/assets/display-coordinates-bind-markers.png)

**main.view\.xml**

```xml
<var name="map_center" type="location" />
<var name="high_school" type="location" />
<var name="food" type="location" />
<var name="my_location" type="location" />

<display-coordinates label="My Location" bind="map_center" allow-zoom="true" allow-dragging="true" >
    <marker bind="map_center" icon="fa-building"/>
    <marker bind="high_school" icon="fa-graduation-cap" />
    <marker bind="food" icon="fa-utensils" />
    <marker bind="my_location" icon="fa-user" />
</display-coordinates>
```

**main.js**

```javascript
function init() {
    view.map_center = new Location({
      latitude: 39.7562259,
      longitude: -105.0094353
    });
    view.high_school = new Location({
      latitude: 39.7553694,
      longitude: -105.0195773
    });
    view.food = new Location({
      latitude: 39.7497094,
      longitude: -105.0053815
    });
    view.my_location = journey.hardware.getCurrentLocation();
}
```

## Standard Attributes

### `label`

<SyntaxCard type={"string (static text, format string, or JS/TS function result)"} defaultValue={"unset"} />

Text to display above the marker in a floating bubble. Text is displayed once a user interacts with the marker.

### capture-coordinates

View XML using `marker`:

**main.view\.xml**

```xml
<var name="current_location" type="location" />
<var name="marker" type="location" />

<capture-coordinates bind="current_location">
    <marker latitude="{marker.latitude}" longitude="{marker.longitude}" label="This is an example label" />
</capture-coordinates>
```

View JS using `marker`:

**main.js**

```javascript
function init() {
    // Example marker
    view.marker = new Location({
      latitude: 39.7553694,
      longitude: -105.0195773
    });
}
```

View XML using `marker-query`:

**main.view\.xml**

```xml
<var name="current_location" type="location" />
<var name="markers" type="array:custom_marker" />

<capture-coordinates bind="current_location">
    <marker-query query="markers" latitude="{location.latitude}" longitude="{location.longitude}" label="This is an example label" />
</capture-coordinates>
```

View JS using `marker-query`:

**main.js**

```javascript
function init() {
    view.markers = DB.custom_marker.where('location != ?', null).toArray();
}
```

### `latitude` and `longitude`

<SyntaxCard type={"location"} defaultValue={"unset"} />

Specifies at which latitude and longitude the marker will be positioned on the map. Use `latitude` and `longitude` from the `location` variable/field to specify the marker location.

<Info>

`latitude` and `longitude` can be replaced with [`bind`](#bind).

</Info>

### capture-coordinates

View XML using `marker`:

**main.view\.xml**

```xml
<var name="current_location" type="location" />
<var name="marker" type="location" />

<capture-coordinates bind="current_location">
    <marker latitude="{marker.latitude}" longitude="{marker.longitude}" />
</capture-coordinates>
```

View JS using `marker`:

**main.js**

```javascript
function init() {
    // Example marker
    view.marker = new Location({
        latitude: 39.7553694,
        longitude: -105.0195773
    });
}
```

View XML using `marker-query`:

**main.view\.xml**

```xml
<var name="current_location" type="location" />
<var name="markers" type="array:custom_marker" />

<capture-coordinates bind="current_location">
    <marker-query query="markers" latitude="{location.latitude}" longitude="{location.longitude}" />
</capture-coordinates>
```

View JS using `marker-query`:

**main.js**

```javascript
function init() {
    view.markers = DB.custom_marker.where('location != ?', null).toArray();
}
```

### display-coordinates

View XML using `marker`:

**main.view\.xml**

```xml
<var name="current_location" type="location" />
<var name="marker" type="location" />

<display-coordinates bind="current_location">
    <marker latitude="{marker.latitude}" longitude="{marker.longitude}" />
</display-coordinates>
```

View JS using `marker`:

**main.js**

```javascript
function init() {
    // Example marker
    view.marker = new Location({
        latitude: 39.7553694,
        longitude: -105.0195773
    });
}
```

View XML using `marker-query`:

**main.view\.xml**

```xml
<var name="current_location" type="location" />
<var name="markers" type="array:custom_marker" />

<display-coordinates bind="current_location">
    <marker-query query="markers" latitude="{location.latitude}" longitude="{location.longitude}" />
</display-coordinates>
```

View JS using `marker-query`:

**main.js**

```javascript
function init() {
    view.markers = DB.custom_marker.where('location != ?', null).toArray();
}
```

## Advanced Attributes

### `color`

<SyntaxCard type={"string (named color or #HEX value)"} defaultValue={"unset"} />

Specify the color of the marker background.

### capture-coordinates

View XML using `marker`:

**main.view\.xml**

```xml
<var name="current_location" type="location" />
<var name="marker" type="location" />

<capture-coordinates bind="current_location">
    <marker latitude="{marker.latitude}" longitude="{marker.longitude}" color="#000" />
</capture-coordinates>
```

View JS using `marker`:

**main.js**

```javascript
function init() {
    // Example marker
    view.marker = new Location({
      latitude: 39.7553694,
      longitude: -105.0195773
    });
}
```

View XML using `marker-query`:

**main.view\.xml**

```xml
<var name="current_location" type="location" />
<var name="markers" type="array:custom_marker" />

<capture-coordinates bind="current_location">
    <marker-query query="markers" latitude="{location.latitude}" longitude="{location.longitude}" color="#000" />
</capture-coordinates>
```

View JS using `marker-query`:

**main.js**

```javascript
function init() {
    view.markers = DB.custom_marker.where('location != ?', null).toArray();
}
```

### display-coordinates

View XML using `marker`:

**main.view\.xml**

```xml
<var name="current_location" type="location" />
<var name="marker" type="location" />

<display-coordinates bind="current_location">
    <marker latitude="{marker.latitude}" longitude="{marker.longitude}" color="#000" />
</display-coordinates>
```

View JS using `marker`:

**main.js**

```javascript
function init() {
    // Example marker
    view.marker = new Location({
        latitude: 39.7553694,
        longitude: -105.0195773
    });
}
```

View XML using `marker-query`:

**main.view\.xml**

```xml
<var name="current_location" type="location" />
<var name="markers" type="array:custom_marker" />

<display-coordinates bind="current_location">
    <marker-query query="markers" latitude="{location.latitude}" longitude="{location.longitude}" color="#000" />
</display-coordinates>
```

View JS using `marker-query`:

**main.js**

```javascript
function init() {
    view.markers = DB.custom_marker.where('location != ?', null).toArray();
}
```

### `icon`

<SyntaxCard type={"string"} defaultValue={"fa-circle"} />

Specify the icon shown in the marker. Find a list of available icons [here](/docs/build/ui-components/all-ui-components/icons/).

### capture-coordinates

View XML using `marker`:

**main.view\.xml**

```xml
<var name="current_location" type="location" />
<var name="marker" type="location" />

<capture-coordinates bind="current_location">
    <marker latitude="{marker.latitude}" longitude="{marker.longitude}" icon="fa-star" />
</capture-coordinates>
```

View JS using `marker`:

**main.js**

```javascript
function init() {
    // Example marker
    view.marker = new Location({
      latitude: 39.7553694,
      longitude: -105.0195773
    });
}
```

View XML using `marker-query`:

**main.view\.xml**

```xml
<var name="current_location" type="location" />
<var name="markers" type="array:custom_marker" />

<capture-coordinates bind="current_location">
    <marker-query query="markers" latitude="{location.latitude}" longitude="{location.longitude}" icon="fa-star" />
</capture-coordinates>
```

View JS using `marker-query`:

**main.js**

```javascript
function init() {
    view.markers = DB.custom_marker.where('location != ?', null).toArray();
}
```

### display-coordinates

View XML using `marker`:

**main.view\.xml**

```xml
<var name="current_location" type="location" />
<var name="marker" type="location" />

<display-coordinates bind="current_location">
    <marker latitude="{marker.latitude}" longitude="{marker.longitude}" icon="fa-star" />
</display-coordinates>
```

View JS using `marker`:

**main.js**

```javascript
function init() {
    // Example marker
    view.marker = new Location({
        latitude: 39.7553694,
        longitude: -105.0195773
    });
}
```

View XML using `marker-query`:

**main.view\.xml**

```xml
<var name="current_location" type="location" />
<var name="markers" type="array:custom_marker" />

<display-coordinates bind="current_location">
    <marker-query query="markers" latitude="{location.latitude}" longitude="{location.longitude}" icon="fa-star" />
</display-coordinates>
```

View JS using `marker-query`:

**main.js**

```javascript
function init() {
    view.markers = DB.custom_marker.where('location != ?', null).toArray();
}
```

### `icon-color`

<SyntaxCard type={"string (named color or #HEX value)"} defaultValue={"unset"} />

Specify the color of the `icon`.

### capture-coordinates

View XML using `marker`:

**main.view\.xml**

```xml
<var name="current_location" type="location" />
<var name="marker" type="location" />

<capture-coordinates bind="current_location">
    <marker latitude="{marker.latitude}" longitude="{marker.longitude}" icon="fa-star" icon-color="#000" />
</capture-coordinates>
```

View JS using `marker`:

**main.js**

```javascript
function init() {
    // Example marker
    view.marker = new Location({
      latitude: 39.7553694,
      longitude: -105.0195773
    });
}
```

View XML using `marker-query`:

**main.view\.xml**

```xml
<var name="current_location" type="location" />
<var name="markers" type="array:custom_marker" />

<capture-coordinates bind="current_location">
    <marker-query query="markers" latitude="{location.latitude}" longitude="{location.longitude}" icon="fa-star" icon-color="#000" />
</capture-coordinates>
```

View JS using `marker-query`:

**main.js**

```javascript
function init() {
    view.markers = DB.custom_marker.where('location != ?', null).toArray();
}
```

### display-coordinates

View XML using `marker`:

**main.view\.xml**

```xml
<var name="current_location" type="location" />
<var name="marker" type="location" />

<display-coordinates bind="current_location">
    <marker latitude="{marker.latitude}" longitude="{marker.longitude}" icon="fa-star" icon-color="#000" />
</display-coordinates>
```

View JS using `marker`:

**main.js**

```javascript
function init() {
    // Example marker
    view.marker = new Location({
        latitude: 39.7553694,
        longitude: -105.0195773
    });
}
```

View XML using `marker-query`:

**main.view\.xml**

```xml
<var name="current_location" type="location" />
<var name="markers" type="array:custom_marker" />

<display-coordinates bind="current_location">
    <marker-query query="markers" latitude="{location.latitude}" longitude="{location.longitude}" icon="fa-star" icon-color="#000" />
</display-coordinates>
```

View JS using `marker-query`:

**main.js**

```javascript
function init() {
    view.markers = DB.custom_marker.where('location != ?', null).toArray();
}
```

### `on-press`

<AttributeReference label="on-press" href="/docs/build/ui-components/common-attributes/on-press/" badge="advanced" tone="muted" />

### `show-if`

<AttributeReference label="show-if" href="/docs/build/ui-components/common-attributes/show-if/" badge="advanced" tone="muted" />

### `hide-if`

<AttributeReference label="hide-if" href="/docs/build/ui-components/common-attributes/hide-if/" badge="advanced" tone="muted" />

## Common Attributes

### `bind`

<AttributeReference label="bind" href="/docs/build/ui-components/common-attributes/bind/" />

<Info>

`bind` can be replaced with [`latitude` and `longitude`](#latitude-and-longitude).

</Info>

### `label`

View XML using `marker`:

**main.view\.xml**

```xml
<var name="current_location" type="location" />
<var name="marker" type="location" />

<display-coordinates bind="current_location">
    <marker latitude="{marker.latitude}" longitude="{marker.longitude}" label="This is an example label" />
</display-coordinates>
```

View JS using `marker`:

**main.js**

```javascript
function init() {
    // Example marker
    view.marker = new Location({
      latitude: 39.7553694,
      longitude: -105.0195773
    });
}
```

View XML using `marker-query`:

**main.view\.xml**

```xml
<var name="current_location" type="location" />
<var name="markers" type="array:custom_marker" />

<display-coordinates bind="current_location">
    <marker-query query="markers" latitude="{location.latitude}" longitude="{location.longitude}" label="This is an example label" />
</display-coordinates>
```

View JS using `marker-query`:

**main.js**

```javascript
function init() {
    view.markers = DB.custom_marker.where('location != ?', null).toArray();
}
```

Also see:

<AttributeReference label="label" href="/docs/build/ui-components/common-attributes/label/" />