<ScriptGoogleMapsMarker>
Map marker with HTML content support. Place inside a <ScriptGoogleMaps> component.
This component uses Google's AdvancedMarkerElement, which requires a map ID. Nuxt Scripts falls back to Google's DEMO_MAP_ID, but Google reserves that ID for testing; pass your own mapId in production.
positiongoogle.maps.LatLngLiteral | google.maps.LatLngThe position of the marker on the map.
optionsOmit<google.maps.marker.AdvancedMarkerElementOptions, 'map'>Configuration options for the marker.
Usage
<template>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsMarker
:position="{ lat: -34.407, lng: 150.654 }"
/>
</ScriptGoogleMaps>
</template>
Custom Marker Content
The #content slot replaces the default pin with any HTML or Vue content. The slot content becomes the marker's visual on the map.
<template>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsMarker
:position="{ lat: -34.397, lng: 150.644 }"
>
<template #content>
<div class="bg-green-600 text-white px-2.5 py-1 rounded-full font-bold">
$420k
</div>
</template>
</ScriptGoogleMapsMarker>
</ScriptGoogleMaps>
</template>
Draggable Marker
Enable dragging with gmpDraggable in the options prop. Listen to drag events to track position changes.
<script setup lang="ts">
function onDragEnd(e: google.maps.MapMouseEvent) {
console.log('New position:', e.latLng?.toJSON())
}
</script>
<template>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsMarker
:position="{ lat: -34.397, lng: 150.644 }"
:options="{ gmpDraggable: true }"
@dragend="onDragEnd"
/>
</ScriptGoogleMaps>
</template>
Click Events
The marker is clickable by default. Use @click to handle interactions.
<script setup lang="ts">
const selected = ref<string | null>(null)
const locations = [
{ id: 'sydney', name: 'Sydney', position: { lat: -33.8688, lng: 151.2093 } },
{ id: 'melbourne', name: 'Melbourne', position: { lat: -37.8136, lng: 144.9631 } },
]
</script>
<template>
<ScriptGoogleMaps
api-key="your-api-key"
:map-options="{
center: { lat: -35.5, lng: 148 },
zoom: 5,
}"
>
<ScriptGoogleMapsMarker
v-for="loc in locations"
:key="loc.id"
:position="loc.position"
@click="selected = loc.id"
>
<ScriptGoogleMapsInfoWindow v-if="selected === loc.id">
<div>{{ loc.name }}</div>
</ScriptGoogleMapsInfoWindow>
</ScriptGoogleMapsMarker>
</ScriptGoogleMaps>
</template>
With Custom Overlay
<template>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsMarker
:position="{ lat: -34.397, lng: 150.644 }"
:options="{ gmpDraggable: true }"
>
<ScriptGoogleMapsOverlayView
anchor="bottom-center"
:offset="{ x: 0, y: -50 }"
>
<div class="custom-tooltip">
Custom Vue content
</div>
</ScriptGoogleMapsOverlayView>
</ScriptGoogleMapsMarker>
</ScriptGoogleMaps>
</template>
Clusterer Integration
When placed inside a <ScriptGoogleMapsMarkerClusterer>, the clusterer automatically registers markers. No extra configuration needed.
<template>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsMarkerClusterer>
<ScriptGoogleMapsMarker
v-for="loc in locations"
:key="loc.id"
:position="loc.position"
/>
</ScriptGoogleMapsMarkerClusterer>
</ScriptGoogleMaps>
</template>
Both position and options are reactive. The component forces gmpClickable: true and forwards the gmp-click DOM event. At runtime the click payload is Google's AdvancedMarkerClickEvent, although the current Vue emit type incorrectly declares MapMouseEvent.