3F Design v1.103.0

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 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
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.

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.

← Modal →