---
title: "<ScriptMapLibreMap>"
description: "The map facade reserves layout space during SSR, loads MapLibre when triggered, creates the Map, and provides it to child components."
canonical_url: "https://scripts.nuxt.com/scripts/maplibre/api/script-maplibre-map"
last_updated: "2026-08-11T04:27:01.735Z"
---

The map facade reserves layout space during SSR, loads MapLibre when triggered, creates the `Map`, and provides it to child components.

<script-types filter="ScriptMapLibreMap" script-key="maplibre">



</script-types>

`mapStyle`, `center`, `zoom`, `bearing`, and `pitch` are reactive. Use their `v-model` bindings when you also want to receive camera changes made by the user.

```vue
<ScriptMapLibreMap
  v-model:center="center"
  v-model:zoom="zoom"
  v-model:bearing="bearing"
  map-style="https://demotiles.maplibre.org/style.json"
  width="100%"
  height="28rem"
  @ready="({ map }) => console.log(map.value)"
>
  <template #description>
    A street map with one marker at the selected office.
  </template>
</ScriptMapLibreMap>
```

The `placeholder`, `awaitingLoad`, `loading`, and `error` slots customize each loading state. The default error state is visible and announced with `role="alert"`.