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 is necessary to specify a MapId on declaring the GoogleMap component (see more here).

Options

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

You can also pass a PinElementOptions interface object to custumize pin used by 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"/>
  </GoogleMap>
</template>

Events

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