Advanced Marker

Use the AdvancedMarker component to draw markers, drop pins or any custom icons on a map. AdvancedMarker is the new version offered by google when deprecated the Marker component (read more here).

In order to use the AdvancedMarker component it is necessary to specify a MapId on declaring the GoogleMap component (see more here).

Library Requirement

If you're using the AdvancedMarker component with an external loader (using the apiPromise prop), you must include the marker library in your loader configuration:

const loader = new Loader({
  apiKey: YOUR_GOOGLE_MAPS_API_KEY,
  version: 'weekly',
  libraries: ['marker'], // Required for AdvancedMarker component
});

Options

You can pass a AdvancedMarkerElementOptions object to the options prop to configure your marker.

You can also pass a PinElementOptions interface object to customize pin used by the marker.

Additionally, AdvancedMarker supports custom slot content via the content slot, allowing you to use custom HTML or Vue components inside the marker.

<script setup>
import { GoogleMap, AdvancedMarker } from 'vue3-google-map'

const center = { lat: 40.689247, lng: -74.044502 }
const markerOptions = { position: center, label: 'L', title: 'LADY LIBERTY' }
const pinOptions = { background: '#FBBC04' }
</script>

<template>
  <GoogleMap
    api-key="YOUR_GOOGLE_MAPS_API_KEY"
    mapId="DEMO_MAP_ID"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="15"
  >
    <AdvancedMarker :options="markerOptions" :pin-options="pinOptions"/>
    <AdvancedMarker :options="markerOptions">
       <template #content>
         <div style="background: white; color: black; padding: 5px; border-radius: 5px">
          Custom Content
        </div>
       </template>
    </AdvancedMarker>
  </GoogleMap>
</template>

Events

You can listen for the following events on the AdvancedMarker component.