Advanced Marker

Renders an Advanced Marker

Advanced Marker can be given HTML content as a child. If no children are provided, the marker will be rendered as a simple marker.

API Reference

Props

Property	Default	Type/Description
`ref`	-	`(marker: google.maps.Marker \| null) => void` Provides a reference for the Marker instance.
`anchorPoint`	-	`google.maps.Point` The offset from the marker's position to the tip of an InfoWindow that has been opened with the marker.
`class`	-	`string` The class name of the Marker Content. Only applicable to HTML content.
`clickable`	true	`boolean` Indicates whether the marker is clickable.
`collisionBehavior`	null	`google.maps.CollisionBehavior` The behavior of the marker when it collides with another marker.
`draggable`	false	`boolean` If true, the marker can be dragged.
`position`	-	`google.maps.LatLngLiteral` The marker's position.
`style`	-	`JSX.CSSProperties` The style of the Marker Content. Only applicable to HTML content.
`title`	-	`string` The marker's title.
`zIndex`	-	`number` The marker's zIndex.

Events

Event Name	Type/Description
`onClick`	`AdvancedMarkerMouseEvent` Fired when the marker is clicked.
`onDrag`	`AdvancedMarkerMouseEvent` Fired repeatedly while the marker is being dragged.
`onDragEnd`	`AdvancedMarkerMouseEvent` Fired when the marker stops being dragged.
`onDragStart`	`AdvancedMarkerMouseEvent` Fired when the marker starts being dragged.
`onMouseLeave`	`AdvancedMarkerMouseEvent` Fired when the mouse leaves the marker.
`onMouseEnter`	`AdvancedMarkerMouseEvent` Fired when the mouse enters the marker.

Event Types

All Marker events extend the type MarkerEvent and have the following properties:

Property	Type/Description
`type`	`string` The type of the event.
`marker`	`google.maps.AdvancedMarkerElement` The marker instance that the event was fired on.
`stoppable`	`boolean` Indicates whether the event is stoppable. If true, the event can be stopped from propagating further.
`stop`	`() => void` A function that stops the event from propagating further.
`domEvent`	`MouseEvent \| TouchEvent \| PointerEvent \| KeyboardEvent \| Event` The original DOM event that triggered the map event.

AdvancedMarkerMouseEvent

Contains a detail property with the latLng of the clicked Marker

{
  type: string
  marker: google.maps.AdvancedMarkerElement
  latLng: google.maps.LatLngLiteral | null
  stoppable: boolean
  stop: () => void
  domEvent?: MouseEvent
}