Api

<ScriptGoogleMapsMarker>

Map marker with HTML content support. Place inside a <ScriptGoogleMaps> component.

positiongoogle.maps.LatLngLiteral | google.maps.LatLng

The 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" :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">
          Fully custom content, no InfoWindow constraints
        </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 uses the gmp-click DOM event (not the deprecated addListener('click')), matching Google's recommended approach for AdvancedMarkerElement.

Edit this page

Markdown For LLMs

Renders a Google Maps Static API image. Use standalone for static map previews, or drop into the #placeholder slot of <ScriptGoogleMaps> for a loading placeholder.

Information window that automatically opens on parent marker click. Place as a child of <ScriptGoogleMapsMarker>.