> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/lwc-components/data-driven-components/map.md).

# Map

`avonni-dd-map`

The Avonni Data Driven Map displays records as markers on a Google Map.

## Overview

**Map** is a data-driven Lightning Web Component for Google Maps, with an optional list of clickable locations next to the map.

**Query mode** runs `query` and places each record with `mapping`, by address or coordinates. **Static mode** renders a fixed `items` array and ignores both.

{% hint style="info" %}
Clustering, drawing and route planning: use [Leaflet Map](/lwc-components/data-driven-components/leaflet-map.md).
{% endhint %}

### Use Cases

* **Account territory views:** accounts by billing address.
* **Store and office locators:** fixed locations.
* **Service dispatch:** open cases or work orders.
* **Event venues:** sessions or venues, listed beside the map.
* **Asset tracking:** equipment by coordinates.
* **Lead clustering:** prospects by area, to plan field visits.

***

## Use Case Examples

### Example 1: Query mode

**Scenario:** accounts at their billing address, with search, filters and a marker selection handler.

```html
<!-- accountMap.html -->
<template>
    <avonni-dd-map
        header-caption="Query mode demo"
        header-title="Accounts"
        markers-title="Accounts"
        list-view="auto"
        show-footer
        zoom-level="4"
        query={accountQuery}
        mapping={accountMapping}
        filters={accountFilters}
        search-fields={accountSearchFields}
        onmarkerselect={handleMarkerSelect}
        onerror={handleError}
        onfilter={handleFilter}
    ></avonni-dd-map>
</template>
```

```js
// accountMap.js
import { LightningElement } from 'lwc';

export default class AccountMap extends LightningElement {
    accountQuery = {
        objectApiName: 'Account',
        orderBy: 'Name ASC',
        limit: 200
    };

    accountMapping = {
        title: '{{Record.Name}}',
        value: '{{Record.Id}}',
        description: '{{Record.Industry}}',
        location: {
            Street: '{{Record.BillingStreet}}',
            City: '{{Record.BillingCity}}',
            State: '{{Record.BillingState}}',
            PostalCode: '{{Record.BillingPostalCode}}',
            Country: '{{Record.BillingCountry}}',
            Latitude: '{{Record.BillingLatitude}}',
            Longitude: '{{Record.BillingLongitude}}'
        }
    };

    accountSearchFields = ['Name'];
    accountFilters = ['Industry', 'BillingState'];

    handleMarkerSelect(event) {
        const { marker, selectedMarkerValue } = event.detail;
        // marker.title, selectedMarkerValue
    }

    handleError(event) {
        const message = event.detail.message;
    }

    handleFilter(event) {
        const value = event.detail.value;
    }
}
```

**Result:** a marker per account, search and two filters in the header, the Accounts list on the right, a footer. `markerselect` returns the selected marker and its record.

<figure><img src="https://2403786217-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPjQbBtFNxVSSOtnsjuwx%2Fuploads%2F9evnXJcX9nyM4hQJirwp%2Flwc-map-example-1-no-pin.png?alt=media" alt="Map component titled Accounts with the caption Query mode demo, a search box and the Industry and Billing State/Province filter buttons in the header. A Google map of the United States at zoom 4 shows a red marker per account, from Seattle and San Diego to Boston. To the right of the map the list reads Accounts (14), each entry an account name with its latitude and longitude printed to fifteen decimal places, and it scrolls past the bottom of the frame. An Open in Google Maps button sits under the map."><figcaption><p>Example 1: a marker per account, search and filters in the header, and the location list next to the map.</p></figcaption></figure>

### Example 2: Static mode

**Scenario:** two offices, one by address, one by coordinates, no query.

```html
<!-- officeMap.html -->
<template>
    <avonni-dd-map
        header-caption="Static mode demo"
        header-title="Office locations"
        markers-title="Offices"
        list-view="auto"
        show-footer
        zoom-level="12"
        center={center}
        items={items}
        options={options}
        onmarkerselect={handleMarkerSelect}
    ></avonni-dd-map>
</template>
```

```js
// officeMap.js
import { LightningElement } from 'lwc';

export default class OfficeMap extends LightningElement {
    items = [
        {
            title: 'Ferry Building',
            value: 'ferry-building',
            description: 'Historic marketplace on the Embarcadero.',
            location: { Latitude: 37.7955, Longitude: -122.3937 }
        },
        {
            title: 'Salesforce Tower',
            value: 'salesforce-tower',
            description: 'Tallest building in San Francisco.',
            location: {
                Street: '415 Mission Street',
                City: 'San Francisco',
                State: 'CA',
                PostalCode: '94105',
                Country: 'USA'
            }
        }
    ];

    center = { location: { Latitude: 37.7849, Longitude: -122.4094 } };
    options = { zoomControl: true, scrollwheel: true };

    handleMarkerSelect(event) {
        const { marker, markerSObject } = event.detail;
        // markerSObject is null in static mode
    }
}
```

**Result:** both offices on the map and in the list. Static mode has no record: `markerselect` returns `markerSObject` as `null`.

<figure><img src="https://2403786217-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPjQbBtFNxVSSOtnsjuwx%2Fuploads%2FATwKFVMxCZWZ4gdPGvGg%2Flwc-map-example-2-no-pin.png?alt=media" alt="Map component titled Office locations with the caption Static mode demo. A Google map of San Francisco at zoom 12, with zoom buttons on its right edge, shows two red markers near the Embarcadero. To the right of the map the list reads Offices (2): Ferry Building with its coordinates 37.7955, -122.3937, and Salesforce Tower with its address, 415 Mission Street, San Francisco, CA. An Open in Google Maps button sits under the map."><figcaption><p>Example 2: the Ferry Building placed by coordinates and Salesforce Tower by address, both listed next to the map.</p></figcaption></figure>

***

## Specifications

### Attributes

| Name                           | Description                                                                                                                                                                                                                                                | Type                         | Default  | Required |
| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------- | -------- |
| `center`                       | Object defining the center of the map.                                                                                                                                                                                                                     | DdMapElementCenter           | —        |          |
| `filters`                      | Array of field API names that belong to the queried object. These fields will be displayed as user filters.                                                                                                                                                | string\[]                    | —        |          |
| `filters-attributes`           | Object defining the filters-specific attributes.                                                                                                                                                                                                           | DdElementFiltersAttributes   | —        |          |
| `header-actions`               | Array of actions to display at the top right of the header. On click on a header action, the `headeractionclick` event is fired.                                                                                                                           | DdElementAction\[]           | —        |          |
| `header-avatar`                | Avatar displayed at the top left of the header.                                                                                                                                                                                                            | DdElementAvatar              | —        |          |
| `header-caption`               | Header caption, displayed above the title.                                                                                                                                                                                                                 | String                       | —        |          |
| `header-help-text`             | If present, a help text icon is displayed next to the header title. On focus or hover on the icon, the header help text is displayed in a tooltip.                                                                                                         | String                       | —        |          |
| `header-help-text-attributes`  | Object defining the help text-specific attributes.                                                                                                                                                                                                         | DdElementHelpTextAttributes  | —        |          |
| `header-title`                 | Main title displayed in the header.                                                                                                                                                                                                                        | String                       | —        |          |
| `header-visible-actions-count` | Number of header actions that appear as regular buttons. Remaining actions appear in a dropdown menu.                                                                                                                                                      | integer                      | —        |          |
| `items`                        | Array of static markers displayed on the map. When this property is set, the map ignores the `query` and `mapping` properties and displays the markers directly.                                                                                           | DdMapItem\[]                 | —        |          |
| `list-view`                    | Specify how the list of locations is displayed. Valid values are `visible`, `hidden` and `auto`.                                                                                                                                                           | String                       | `"auto"` |          |
| `mapping`                      | Object defining the way the records returned by the query should be mapped to the map marker properties. To insert the value of a field, use the syntax `{{Record.FieldApiName}}`. For example, to use the value of the Name field, use `{{Record.Name}}`. | DdMapMapping                 | —        |          |
| `markers-title`                | Provides the heading title for the markers. The title is displayed below the map as a header for the list of clickable addresses. Required if specifying multiple markers.                                                                                 | String                       | —        |          |
| `options`                      | Object defining a list of map settings/options.                                                                                                                                                                                                            | DdMapElementOptions          | —        |          |
| `query`                        | Definition of the query to execute to get the records that will be mapped.                                                                                                                                                                                 | DdElementQuery               | —        |          |
| `refresh-emp`                  | Object describing a platform event that should be subscribed to in order to refresh the component when an event is published.                                                                                                                              | DdElementRefreshEmp          | —        |          |
| `search-attributes`            | Object defining the search-specific attributes.                                                                                                                                                                                                            | DdElementSearchAttributes    | —        |          |
| `search-fields`                | Array of field API names that can be used by the search box to filter the records. The fields must belong to the queried object, and they must be filterable.                                                                                              | string\[]                    | —        |          |
| `selected-marker-value`        | Value of the selected marker. Can be set to programmatically select a marker, and is updated automatically when the user selects one on the map.                                                                                                           | String                       | —        |          |
| `show-footer`                  | If true, the footer element is displayed below the map.                                                                                                                                                                                                    | Boolean                      | `false`  |          |
| `side-panel-attributes`        | Object defining the side panel-specific attributes.                                                                                                                                                                                                        | DdElementSidePanelAttributes | —        |          |
| `zoom-level`                   | Zoom level of the map. Number between 0 and 23, 0 being the most zoomed out version of the map, and 23 the most zoomed in.                                                                                                                                 | Number                       | `10`     |          |

### Mapping

In query mode, `mapping` turns each record into a marker; `{{Record.FieldApiName}}` inserts a field value.

```js
const accountMapping = {
    title: '{{Record.Name}}',
    value: '{{Record.Id}}',
    description: '{{Record.Industry}}',
    location: {
        Street: '{{Record.BillingStreet}}',
        City: '{{Record.BillingCity}}',
        State: '{{Record.BillingState}}',
        PostalCode: '{{Record.BillingPostalCode}}',
        Country: '{{Record.BillingCountry}}',
        Latitude: '{{Record.BillingLatitude}}',
        Longitude: '{{Record.BillingLongitude}}'
    }
};
```

| Mapping key   | Description                                                                                   |
| ------------- | --------------------------------------------------------------------------------------------- |
| `title`       | Marker title shown in the location list.                                                      |
| `value`       | Unique value identifying the marker (typically the record Id).                                |
| `description` | Secondary text for the marker.                                                                |
| `type`        | Marker shape: `default`, `Circle`, `Rectangle`, `Polygon`, `Pin`, `CustomIcon`.               |
| `iconName`    | SLDS icon shown in the location list (e.g. `standard:account`).                               |
| `location`    | Address (`Street`, `City`, `State`, `PostalCode`, `Country`) and/or `Latitude` / `Longitude`. |

### Object Attributes

Keys of each object attribute.

{% tabs %}
{% tab title="Query and refresh" %}
`query`

| Key             | Type      | Description                                                                                 |
| --------------- | --------- | ------------------------------------------------------------------------------------------- |
| `objectApiName` | String    | Required. Object to query.                                                                  |
| `filter`        | String    | SOQL WHERE expression, e.g. `AccountId IN (SELECT Id FROM Account WHERE Name LIKE '%Doe')`. |
| `orderBy`       | String    | SOQL ORDER BY expression, e.g. `Name ASC, AnnualRevenue DESC`.                              |
| `limit`         | Integer   | Maximum number of records.                                                                  |
| `addedFields`   | String\[] | Extra fields to query outside the mapping, e.g. for a record returned by an event.          |

`refresh-emp`

| Key             | Type   | Description                                                                                |
| --------------- | ------ | ------------------------------------------------------------------------------------------ |
| `channelName`   | String | Required. Platform event, e.g. `yournamespace__New_Contact__e`.                            |
| `keyFieldName`  | String | Event field to match. Empty: every event refreshes.                                        |
| `keyFieldValue` | String | Value the key field must match. Empty: refresh when the key field value is in the records. |
| {% endtab %}    |        |                                                                                            |

{% tab title="Center and options" %}
`center`

| Key                    | Type    | Description                                                                                            |
| ---------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
| `location`             | Object  | Address keys and/or `Latitude` and `Longitude`, as in the mapping.                                     |
| `displayAsMarker`      | Boolean | Show the center as a marker. Defaults to `false`.                                                      |
| `markerType`           | String  | `default`, `Circle`, `Rectangle`, `Polygon`, `Pin` or `CustomIcon`. Defaults to `default`.             |
| `markerTypeAttributes` | Object  | Shape styling: `radius`, fill and stroke for `Circle`, `Rectangle` and `Polygon`, `mapIcon` for `Pin`. |

`options`

| Key                      | Type    | Description                           |
| ------------------------ | ------- | ------------------------------------- |
| `draggable`              | Boolean | Users can drag the map.               |
| `disableDefaultUI`       | Boolean | Remove the Map and Satellite buttons. |
| `disableDoubleClickZoom` | Boolean | Double-click does not zoom.           |
| `scrollwheel`            | Boolean | Mouse wheel zooms.                    |
| `zoomControl`            | Boolean | Show the zoom controls.               |
| {% endtab %}             |         |                                       |

{% tab title="Header" %}
`header-actions` (each action)

| Key               | Type    | Description                                |
| ----------------- | ------- | ------------------------------------------ |
| `name`            | String  | Required. Returned by `headeractionclick`. |
| `label`           | String  | Required. Button label.                    |
| `iconName`        | String  | Icon, e.g. `standard:account`.             |
| `alternativeText` | String  | Icon alternative text.                     |
| `title`           | String  | Hover title.                               |
| `disabled`        | Boolean | Shown disabled. Defaults to `false`.       |

`header-avatar`

| Key                | Type   | Description                                                             |
| ------------------ | ------ | ----------------------------------------------------------------------- |
| `src`              | String | Image URL.                                                              |
| `fallbackIconName` | String | Required. Icon if the image fails, also the initials' background color. |
| `initials`         | String | Shown if the image fails.                                               |
| `alternativeText`  | String | Alternative text.                                                       |
| `size`             | String | `xx-small` to `xxx-large`. Defaults to `medium`.                        |
| `variant`          | String | `circle` or `square`. Defaults to `square`.                             |

`header-help-text-attributes`

| Key               | Type   | Description                                                  |
| ----------------- | ------ | ------------------------------------------------------------ |
| `iconName`        | String | Defaults to `utility:info`.                                  |
| `iconVariant`     | String | `bare`, `inverse`, `warning` or `error`. Defaults to `bare`. |
| `alternativeText` | String | Icon alternative text.                                       |
| {% endtab %}      |        |                                                              |

{% tab title="Search and filters" %}
`filters-attributes`

| Key                       | Type    | Description                                                   |
| ------------------------- | ------- | ------------------------------------------------------------- |
| `type`                    | String  | `horizontal`, `popover` or `panel`. Defaults to `horizontal`. |
| `hidePicklistEmptyValues` | Boolean | Hide unused picklist values. Defaults to `false`.             |
| `picklistFilterSortOrder` | String  | `asc` or `desc`. Defaults to `asc`.                           |

`search-attributes`

| Key           | Type   | Description                                                                |
| ------------- | ------ | -------------------------------------------------------------------------- |
| `placeholder` | String | Defaults to `Search`.                                                      |
| `position`    | String | `left`, `center`, `fill`, `right` (header) or `panel`. Defaults to `left`. |

`side-panel-attributes`

| Key                | Type    | Description                                        |
| ------------------ | ------- | -------------------------------------------------- |
| `position`         | String  | `left` or `right`. Defaults to `left`.             |
| `isClosed`         | Boolean | Closed on load. Defaults to `false`.               |
| `hideToggleButton` | Boolean | Hide the show or hide button. Defaults to `false`. |
| {% endtab %}       |         |                                                    |
| {% endtabs %}      |         |                                                    |

### Methods

| Name      | Description                                                   | Argument Name       | Argument Type | Argument Description                                              |
| --------- | ------------------------------------------------------------- | ------------------- | ------------- | ----------------------------------------------------------------- |
| `refresh` | Refresh the query and the records displayed in the component. | `stayOnCurrentPage` | Boolean       | If true, the component will refresh but stay on the current page. |

### Custom Events

#### `error`

The event fired when an error occurs in the component.

The `error` event returns the following parameters.

| Parameter | Type   | Description           |
| --------- | ------ | --------------------- |
| `message` | string | Message of the error. |

The event properties are as follows.

| Property   | Value | Description                                                                                               |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles    | false | This event does not bubble.                                                                               |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed   | false | This event does not propagate outside of the component in which it was dispatched.                        |

#### `filter`

The event fired when the user filters the records.

The `filter` event returns the following parameters.

| Parameter | Type   | Description                                                                                                                                                                                                   |
| --------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `value`   | object | Object containing the filters applied by the user. Its keys correspond to the field API names of the selected filters. The values are arrays of strings, corresponding to the values selected for the filter. |

The event properties are as follows.

| Property   | Value | Description                                                                                               |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles    | false | This event does not bubble.                                                                               |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed   | false | This event does not propagate outside of the component in which it was dispatched.                        |

#### `headeractionclick`

The event fired when a header action is clicked.

The `headeractionclick` event returns the following parameters.

| Parameter | Type   | Description                 |
| --------- | ------ | --------------------------- |
| `name`    | string | Name of the action clicked. |

The event properties are as follows.

| Property   | Value | Description                                                                                               |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles    | false | This event does not bubble.                                                                               |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed   | false | This event does not propagate outside of the component in which it was dispatched.                        |

#### `markerselect`

The event fired when a marker is selected.

The `markerselect` event returns the following parameters.

| Parameter             | Type   | Description                                                                                              |
| --------------------- | ------ | -------------------------------------------------------------------------------------------------------- |
| `marker`              | object | Selected marker, with its mapped display properties (`title`, `description`, `value`, `location`...).    |
| `markerSObject`       | object | Record corresponding to the selected marker. In static mode, no record is associated and this is `null`. |
| `selectedMarkerValue` | string | Value of the selected marker.                                                                            |

The event properties are as follows.

| Property   | Value | Description                                                                                               |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles    | false | This event does not bubble.                                                                               |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed   | false | This event does not propagate outside of the component in which it was dispatched.                        |

#### `nbitemschange`

The event fired when the number of items displayed in the component changes.

The `nbitemschange` event returns the following parameters.

| Parameter | Type    | Description                                 |
| --------- | ------- | ------------------------------------------- |
| `value`   | integer | Number of items displayed in the component. |

The event properties are as follows.

| Property   | Value | Description                                                                                               |
| ---------- | ----- | --------------------------------------------------------------------------------------------------------- |
| bubbles    | false | This event does not bubble.                                                                               |
| cancelable | false | This event has no default behavior that can be canceled. You can't call `preventDefault()` on this event. |
| composed   | false | This event does not propagate outside of the component in which it was dispatched.                        |

### Styling Hooks

| CSS Variable                                               | Type      | Default   |
| ---------------------------------------------------------- | --------- | --------- |
| `--avonni-dd-map-header-actions-color-background`          | color     | —         |
| `--avonni-dd-map-header-actions-color-background-active`   | color     | —         |
| `--avonni-dd-map-header-actions-color-background-hover`    | color     | —         |
| `--avonni-dd-map-header-actions-color-border`              | color     | —         |
| `--avonni-dd-map-header-actions-color-border-active`       | color     | —         |
| `--avonni-dd-map-header-actions-color-border-hover`        | color     | —         |
| `--avonni-dd-map-header-actions-text-color`                | color     | —         |
| `--avonni-dd-map-header-actions-text-color-active`         | color     | —         |
| `--avonni-dd-map-header-actions-text-color-hover`          | color     | —         |
| `--avonni-dd-map-header-caption-font-family`               | string    | —         |
| `--avonni-dd-map-header-caption-font-size`                 | dimension | —         |
| `--avonni-dd-map-header-caption-font-style`                | string    | `normal`  |
| `--avonni-dd-map-header-caption-font-weight`               | number    | `400`     |
| `--avonni-dd-map-header-caption-letter-spacing`            | string    | —         |
| `--avonni-dd-map-header-caption-line-height`               | string    | —         |
| `--avonni-dd-map-header-caption-text-color`                | color     | `#000000` |
| `--avonni-dd-map-header-color-background`                  | color     | —         |
| `--avonni-dd-map-header-color-border`                      | color     | —         |
| `--avonni-dd-map-header-color-border-bottom`               | color     | `#c9c9c9` |
| `--avonni-dd-map-header-icon-color-background`             | color     | —         |
| `--avonni-dd-map-header-icon-color-foreground`             | color     | —         |
| `--avonni-dd-map-header-icon-color-foreground-default`     | color     | —         |
| `--avonni-dd-map-header-icon-radius-border`                | string    | —         |
| `--avonni-dd-map-header-margin-block-end`                  | dimension | —         |
| `--avonni-dd-map-header-radius-border`                     | string    | —         |
| `--avonni-dd-map-header-sizing-border`                     | string    | —         |
| `--avonni-dd-map-header-sizing-border-bottom`              | dimension | `1px`     |
| `--avonni-dd-map-header-spacing-block-end`                 | dimension | `0.75rem` |
| `--avonni-dd-map-header-spacing-block-start`               | dimension | `0.75rem` |
| `--avonni-dd-map-header-spacing-inline-end`                | dimension | `1rem`    |
| `--avonni-dd-map-header-spacing-inline-start`              | dimension | `1rem`    |
| `--avonni-dd-map-header-styling-border`                    | string    | —         |
| `--avonni-dd-map-header-styling-border-bottom`             | string    | `solid`   |
| `--avonni-dd-map-header-title-font-family`                 | string    | —         |
| `--avonni-dd-map-header-title-font-size`                   | dimension | `1rem`    |
| `--avonni-dd-map-header-title-font-style`                  | string    | `normal`  |
| `--avonni-dd-map-header-title-font-weight`                 | number    | `400`     |
| `--avonni-dd-map-header-title-letter-spacing`              | string    | —         |
| `--avonni-dd-map-header-title-line-height`                 | number    | `1.25`    |
| `--avonni-dd-map-header-title-text-color`                  | color     | `#080707` |
| `--avonni-dd-map-show-more-button-color-background`        | color     | —         |
| `--avonni-dd-map-show-more-button-color-background-active` | color     | —         |
| `--avonni-dd-map-show-more-button-color-background-hover`  | color     | —         |
| `--avonni-dd-map-show-more-button-color-border`            | color     | —         |
| `--avonni-dd-map-show-more-button-color-border-active`     | color     | —         |
| `--avonni-dd-map-show-more-button-color-border-hover`      | color     | —         |
| `--avonni-dd-map-show-more-button-radius-border`           | string    | —         |
| `--avonni-dd-map-show-more-button-sizing-border`           | string    | —         |
| `--avonni-dd-map-show-more-button-spacing-block-end`       | dimension | —         |
| `--avonni-dd-map-show-more-button-spacing-block-start`     | dimension | —         |
| `--avonni-dd-map-show-more-button-spacing-inline-end`      | dimension | —         |
| `--avonni-dd-map-show-more-button-spacing-inline-start`    | dimension | —         |
| `--avonni-dd-map-show-more-button-text-color`              | color     | —         |
| `--avonni-dd-map-show-more-button-text-color-active`       | color     | —         |
| `--avonni-dd-map-show-more-button-text-color-hover`        | color     | —         |

## Key Considerations

* **Locations:** coordinates or a full address. Coordinates are the most reliable: when records store them, map `Latitude` and `Longitude` to skip address geocoding.
* **Markers title:** required with several markers; heads the list.
* **Zoom range:** 0 to 23; out-of-range values fall back to 10.

***

## Troubleshooting Common Issues

* **Markers not appearing:** `location` holds neither coordinates nor a complete, geocodable address.
* **No records (query mode):** check `query.objectApiName` and that the `location` keys point to populated fields; the `error` event reports query failures.
* **Wrong marker selected programmatically:** `selected-marker-value` must match a marker's `value` exactly (typically the record Id).
* **If issues persist:** contact <support@avonni.app>.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.avonnicomponents.com/lwc-components/data-driven-components/map.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.