v3-gmaps Docs

Marker (gmaps-marker)

The Marker is the most used component of the library (and Google Maps).

Simple Use (demo) 

<template>
  <div style="height: 500px">
    <gmaps-map>
      <gmaps-marker :position="{ lat: 0, lng: 0 }" />
    </gmaps-map>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { gmapsMap, gmapsMarker } from 'v3-gmaps';

export default defineComponent({
  components: { gmapsMap, gmapsMarker },
});
</script>

Props

PropsTypeDefaultDescription
options*GmapsMarkerOptions-Object used to define the properties of a gmaps-marker.
animation'BOUNCE' | 'DROP'-Which animation to play when marker is added to a map.
clickablebooleantrueWhether the marker receives mouse and touch events.
cursorstring-Mouse cursor type to show on hover.
draggablebooleanfalseWhether the marker can be dragged.
iconstring | GmapsIcon-Icon for the foreground.
labelGmapsMarkerLabel-Adds a label to the marker.
opacitynumber-A number between 0.0 (transparent) and 1.0 (opaque).
positionGmapsPosition-Sets the marker position.
shapeGmapsMarkerShape-Image map region definition used for drag/click.
titlestring-Rollover text.
visibleboolean-Whether the marker is visible.
zIndexnumber-Vertical layer to use for this marker.

* To see all of the possible options, have a look at the Google Maps MarkerOptions interface.

Events

EventTypeDescription
animation_changed-This event is fired when the Marker animation property changes.
clickGmapsPositionThis event is fired when the Marker icon is clicked.
clickable_changedbooleanThis event is fired when the Marker clickable property changes.
contextmenuGmapsPositionThis event is fired when the DOM contextmenu event is fired on the Marker.
cursor_changedstringThis event is fired when the Marker cursor property changes.
dblclickGmapsPositionThis event is fired when the Marker icon is double clicked.
dragGmapsPositionThis event is repeatedly fired while the user drags the Marker.
dragendGmapsPositionThis event is fired when the user stops dragging the Marker.
draggable_changedbooleanThis event is fired when the Marker draggable property changes.
dragstartGmapsPositionThis event is fired when the user starts dragging the Marker.
flat_changed-This event is fired when the Marker flat property changes.
icon_changed-This event is fired when the Marker icon property changes.
mountedgoogle.maps.MarkerOn mounted the component will emit the Google Maps object it represents.
mousedownGmapsPositionThis event is fired for a mousedown on the Marker.
mouseoutGmapsPositionThis event is fired when the mouse leaves the area of the Marker icon.
mouseoverGmapsPositionThis event is fired when the mouse enters the area of the Marker icon.
mouseupGmapsPositionThis event is fired for a mouseup on the Marker.
position_changedGmapsPositionThis event is fired when the Marker position property changes.
rightclickGmapsPositionThis event is fired for a rightclick on the Marker.
shape_changed-This event is fired when the Marker shape property changes.
title_changedstringThis event is fired when the Marker title property changes.
unmountedgoogle.maps.MarkerOn unmounted the component will emit the Google Maps object it represents.
visible_changedbooleanThis event is fired when the Marker visible property changes.
zindex_changednumberThis event is fired when the Marker zIndex property changes.

Notes