Api
<ScriptGoogleMapsAdvancedMarkerElement>
Modern advanced marker with HTML content support. This is the recommended marker type. Place inside a <ScriptGoogleMaps> component.
positiongoogle.maps.LatLngLiteral | google.maps.LatLngoptionsOmit<google.maps.marker.AdvancedMarkerElementOptions, 'map'>Usage
<template>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsAdvancedMarkerElement
:position="{ lat: -34.407, lng: 150.654 }"
>
<ScriptGoogleMapsPinElement
:options="{ scale: 1.5, background: '#FF0000' }"
/>
</ScriptGoogleMapsAdvancedMarkerElement>
</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">
<ScriptGoogleMapsAdvancedMarkerElement
:position="{ lat: -34.397, lng: 150.644 }"
>
<template #content>
<div style="background: #34a853; color: white; padding: 4px 10px; border-radius: 16px; font-weight: bold;">
$420k
</div>
</template>
</ScriptGoogleMapsAdvancedMarkerElement>
</ScriptGoogleMaps>
</template>
Use
ScriptGoogleMapsPinElement if you only need to customize colors or glyph while keeping the pin shape. The #content slot replaces the marker entirely. If you use both, PinElement takes precedence.With Custom Overlay
<template>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsAdvancedMarkerElement
:position="{ lat: -34.397, lng: 150.644 }"
:options="{ gmpDraggable: true }"
>
<ScriptGoogleMapsOverlayView
anchor="bottom-center"
:offset="{ x: 0, y: -50 }"
>
<div class="custom-tooltip">
Fully custom content, no InfoWindow constraints
</div>
</ScriptGoogleMapsOverlayView>
</ScriptGoogleMapsAdvancedMarkerElement>
</ScriptGoogleMaps>
</template>