# Map
Component name: <v-map>
# Example
# API
Name | Type | Description | Default |
---|---|---|---|
markers | Array | Array of marker objects, documented below. | [] |
slot: popup | Slot | Use slot to define popup content. A scoped slot (opens new window) property is available for access to the popup object of the clicked marker. | - |
center | Object | Initial map center coordinates. | { lat: 56.3, lng: 11.7 } |
height | Number | Map height in pixels. | 500 |
zoom | Number | Initial zoom level. | 7 |
zoom-mobile | Number | Initial zoom level on mobile. | - |
min-zoom | Number | Minimum zoom level allowed. | - |
max-zoom | Number | Maximum zoom level allowed. | - |
# API: Marker object
Here's a marker object example, followed by a description of its required properties:
[
{
"position": { "lat": 57.439564, "lng": 10.005964 },
"icon": "redHeart",
"popup": {
"office": "3F Skagerak",
"address": {
"street": "Vandværksvej 30",
"city_zip": "9800 Hjørring"
}
}
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
Property | Type | Description |
---|---|---|
position | Object | Marker coordinates. |
icon | String | Marker icon name. Currently supports grayHeart and redHeart . |
popup | Object | Holds any data needed to render the marker popup content. |
General notice
All other properties that are not defined above, will be passed to the component as html attributes. This is especially useful for adding the class
attribute.