Map
<salla-map> web component displays geographical maps from various sources. It supports multiple layers, tiled and full-image sources, adding markers, and interaction through events.Example
Usage
HTML
SASS
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| API Key | api-key | Valid Google Maps API Key. | string | undefined |
| Latitude | lat | Sets the map's latitude. | number | undefined |
| Longitude | lng | Sets the map's longitude. | number | undefined |
| Modal Title | modal-title | Modal Title | string | undefined |
| Name | name | File input name for the native formData | string | 'location' |
| Read Only | readonly | Whether or not the actions are disabled or enabled. | boolean | false |
| Required | required | Set if the location input is required or not | boolean | false |
| Searchable | seachable | Whether or not to show the search bar. | boolean | false |
| Theme | theme | Sets map style. | string | 'light' |
| Zoom | zoom | Sets the inital map zoom. | number | 10 |
Events
| Event | Description | Type |
|---|---|---|
currentLocationChanged | This event will be fired when the current location is selected. | CustomEvent<any> |
invalidInput | This event will be fired when the input is invalid. | CustomEvent<any> |
mapClicked | This event will be fired when the map is clicked. | CustomEvent<any> |
selected | This event will be fired when the location is selected. | CustomEvent<any> |
Methods
methods allow for calling functions built by Salla to carry out certain actvities, such as open which opens the map component.| Method | Description | Return Type |
|---|---|---|
open() | Open the map component | Promise<HTMLElement> |
Modified at 2026-07-09 11:27:26