---
title: "<ScriptMapLibreGeolocateControl>"
description: "Adds MapLibre's geolocate button to the nearest parent map. The button asks the browser for the user's location and moves the camera there."
canonical_url: "https://scripts.nuxt.com/scripts/maplibre/api/geolocate-control"
last_updated: "2026-09-21T15:42:50.268Z"
---

Adds MapLibre's geolocate button to the nearest parent map. The button asks the browser for the user's location and moves the camera there.

```vue
<script setup lang="ts">
import type { ScriptMapLibreGeolocateControlEmits } from '@nuxt/scripts'

const message = ref('')

function onError(event: ScriptMapLibreGeolocateControlEmits['error'][0]) {
  message.value = event.code === 1 ? 'Location permission denied.' : event.message
}
</script>

<template>
  <ScriptMapLibreMap map-style="https://tiles.openfreemap.org/styles/liberty" :center="[147.33, -42.88]">
    <ScriptMapLibreGeolocateControl
      position="top-left"
      :options="{ trackUserLocation: true }"
      @error="onError"
      @unavailable="message = 'Location is not available in this browser.'"
    />
  </ScriptMapLibreMap>
  <p role="status">
    {{ message }}
  </p>
</template>
```

`new maplibregl.GeolocateControl()`{lang="ts"} reads `options` and `position` once, when it creates the control. To apply a change, change the component `key`.

The component exposes the MapLibre control as `control`. Call `control.value.trigger()`{lang="ts"} to request the location from code.

## Events

The component emits every `GeolocateControl` event with MapLibre's event object:

- `geolocate` fires when the browser returns a position.
- `error` fires when the browser returns an error.
- `outofmaxbounds` fires when the position is outside the map's `maxBounds`.
- `trackuserlocationstart` and `trackuserlocationend` fire when tracking starts and stops. They need `trackUserLocation`.
- `userlocationfocus` and `userlocationlostfocus` fire when the camera locks to or leaves the user's location.

## Permission denied

Geolocation can fail in two ways. The component reports both.

- If the user denies the permission prompt, `error` fires with `code` 1. MapLibre then disables the button.
- If the permission was already denied when the control loaded, MapLibre disables the button and fires no event. The component emits `unavailable` with `'permission-denied'`.
- If the browser has no Geolocation API, the component emits `unavailable` with `'unsupported'`.

Geolocation needs a secure context. On a plain HTTP origin other than `localhost`, the browser denies it.

::script-types{script-key="maplibre" filter="ScriptMapLibreGeolocateControl"}
::

## Sitemap

See the full [sitemap](/sitemap.md) for all pages.