# marker-query

{% hint style="info" %}
**Version compatibility**

`marker-query` was introduced in version **4.82.0** of the JourneyApps Runtime.
{% endhint %}

## Overview

`marker-query` is almost identical to [marker](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/capture-coordinates/marker). It differs in that the markers can be populated on the map using a [query](#query).

### Basic Example

{% tabs %}
{% tab title="capture-coordinates" %}
Below is an example of using `capture-coordinates` along with a `marker-query`.

<figure><img src="https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2FjufvFgvRK8dsAh3XOQNq%2Fcapture-coordinates-query-markers.png?alt=media&#x26;token=60ba7c9c-8962-4dda-82eb-ae27bc143eef" alt=""><figcaption></figcaption></figure>

{% code title="schema.xml" %}

```xml
<model name="user" label="User">
    <field name="name" label="Name" type="text:name"/>
    <field name="location" label="Location" type="location"/>
    <display>{name} - {location}</display>
</model>
```

{% endcode %}

{% code title="main.view\.xml" %}

```xml
<var name="current_location" type="location" />
<var name="users" type="query:user" />

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

{% endcode %}

{% code title="main.js" %}

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

{% endcode %}
{% endtab %}

{% tab title="display-coordinates" %}
Below is an example of using `display-coordinates` along with multiple query markers.

<figure><img src="https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2FXnieDqBilHStJ3URDTx1%2Fdisplay-coordinates-query-markers.png?alt=media&#x26;token=dd874ae2-33ba-493b-b5b1-7b3005ebe983" alt=""><figcaption></figcaption></figure>

{% code title="schema.xml" %}

```xml
<model name="user" label="User">
  <field name="name" label="Name" type="text:name"/>
  <field name="location" label="Location" type="location"/>
  <display>{name} - {location}</display>
</model>
```

{% endcode %}

{% code title="main.view\.xml" %}

```xml
<var name="map_center" type="location" />
<var name="users" type="query:user" />

<display-coordinates bind="map_center">
    <marker-query query="users" latitude="{location.latitude}" longitude="{location.longitude}" label="{name}" />
</display-coordinates>
```

{% endcode %}

{% code title="main.js" %}

```javascript
function init() {
  view.map_center = journey.hardware.getCurrentLocation();
  view.users = DB.user.where('location != ?', null);
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

## Standard Attributes

### `bind`

See [marker > bind](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/marker#bind).

### `label`

See [marker > label](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/marker#label).

### `latitude` and `longitude`

See [marker > latitude and longitude](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/marker#latitude-and-longitude).

### `query`

**Required**

**Type**: `location`

**Default**: unset

A query or array of objects containing a `location` variable or field. Use `latitude` and `longitude` from the `location` variable or field to specify a marker's location.

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

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

## Advanced Attributes

### color

See [marker > color](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/marker#color)

### icon

See [marker > icon](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/marker#icon)

### icon-color

See [marker > icon-color](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/marker#icon-color)

### on-press

See [marker > on-press](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/marker#on-press)

###