Advanced Markers (beta)

AdvancedMarkerView class

google.maps.marker.AdvancedMarkerView class

Notice: Available only in the v=beta channel.

Creates an AdvancedMarkerView with the options specified. If a map is specified, the AdvancedMarkerView is added to the map upon construction. Note that the position must be set for the AdvancedMarkerView to display.

This class implements AdvancedMarkerViewOptions.

Access by calling const {AdvancedMarkerView} = await google.maps.importLibrary("marker"). See Libraries in the Maps JavaScript API.

Constructor
AdvancedMarkerView	AdvancedMarkerView([options]) Parameters:  options:  AdvancedMarkerViewOptions optional

Properties
collisionBehavior	Type:  CollisionBehavior optional See AdvancedMarkerViewOptions.collisionBehavior.
content	Type:  Element optional See AdvancedMarkerViewOptions.content.
gmpDraggable	Type:  boolean optional See AdvancedMarkerViewOptions.gmpDraggable.
map	Type:  Map optional See AdvancedMarkerViewOptions.map.
position	Type:  LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional See AdvancedMarkerViewOptions.position.
title	Type:  string See AdvancedMarkerViewOptions.title.
zIndex	Type:  number optional See AdvancedMarkerViewOptions.zIndex.
draggable	Deprecated: draggable is deprecated as of April 2023. Use AdvancedMarkerView.gmpDraggable instead. Type:  boolean
Inherited: element

Methods
addListener	addListener(eventName, handler) Parameters:  eventName:  string Observed event. handler:  Function Function to handle events. Return Value:  MapsEventListener Resulting event listener. Adds the given listener function to the given event name in the Maps Eventing system.

Events
click	function(event) Arguments:  event:  MapMouseEvent This event is fired when the AdvancedMarkerView element is clicked.
drag	function(event) Arguments:  event:  MapMouseEvent This event is repeatedly fired while the user drags the AdvancedMarkerView.
dragend	function(event) Arguments:  event:  MapMouseEvent This event is fired when the user stops dragging the AdvancedMarkerView.
dragstart	function(event) Arguments:  event:  MapMouseEvent This event is fired when the user starts dragging the AdvancedMarkerView.

AdvancedMarkerViewOptions interface

google.maps.marker.AdvancedMarkerViewOptions interface

Notice: Available only in the v=beta channel.

Options for constructing an AdvancedMarkerView.

Properties
collisionBehavior optional	Type:  CollisionBehavior optional An enumeration specifying how an AdvancedMarkerView should behave when it collides with another AdvancedMarkerView or with the basemap labels on a vector map. Note: AdvancedMarkerView to AdvancedMarkerView collision works on both raster and vector maps, however, AdvancedMarkerView to base map's label collision only works on vector maps.
content optional	Type:  Element optional Default: PinView.element The DOM Element backing the visual of an AdvancedMarkerView. Note: AdvancedMarkerView does not clone the passed-in DOM element. Once the DOM element is passed to an AdvancedMarkerView, passing the same DOM element to another AdvancedMarkerView will move the DOM element and cause the previous AdvancedMarkerView to look empty.
draggable optional	Deprecated: draggable is deprecated as of April 2023. Use AdvancedMarkerView.gmpDraggable instead. Type:  boolean optional Default: false If true, the AdvancedMarkerView can be dragged. Note: AdvancedMarkerView with altitude is not draggable.
element optional	Type:  HTMLElement|SVGElement optional This field is read-only. The DOM Element backing the view.
gmpDraggable optional	Type:  boolean optional Default: false If true, the AdvancedMarkerView can be dragged. Note: AdvancedMarkerView with altitude is not draggable.
map optional	Type:  Map optional Map on which to display the AdvancedMarkerView. The map is required to display the AdvancedMarkerView and can be provided by setting AdvancedMarkerView.map if not provided at the construction.
position optional	Type:  LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional Sets the AdvancedMarkerView's position. An AdvancedMarkerView may be constructed without a position, but will not be displayed until its position is provided - for example, by a user's actions or choices. An AdvancedMarkerView's position can be provided by setting AdvancedMarkerView.position if not provided at the construction. Note: AdvancedMarkerView with altitude is only supported on vector maps.
title optional	Type:  string optional Rollover text. If provided, an accessibility text (e.g. for use with screen readers) will be added to the AdvancedMarkerView with the provided value.
zIndex optional	Type:  number optional All AdvancedMarkerViews are displayed on the map in order of their zIndex, with higher values displaying in front of AdvancedMarkerViews with lower values. By default, AdvancedMarkerViews are displayed according to their vertical position on screen, with lower AdvancedMarkerViews appearing in front of AdvancedMarkerViews farther up the screen. Note that zIndex is also used to help determine relative priority between CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY Advanced Markers. A higher zIndex value indicates higher priority.

PinView class

google.maps.marker.PinView class

Notice: Available only in the v=beta channel.

A PinView represents a DOM element that consists of a shape and a glyph. The shape has the same balloon style as seen in the default AdvancedMarkerView. The glyph is an optional DOM element displayed in the balloon shape. A PinView may have a different aspect ratio depending on its PinView.scale.

This class implements PinViewOptions.

Access by calling const {PinView} = await google.maps.importLibrary("marker"). See Libraries in the Maps JavaScript API.

Constructor
PinView	PinView([options]) Parameters:  options:  PinViewOptions optional

Properties
background	Type:  string optional See PinViewOptions.background.
borderColor	Type:  string optional See PinViewOptions.borderColor.
element optional	Type:  HTMLElement|SVGElement optional This Field is read-only. The DOM Element backing the view.
glyph	Type:  string|Element|URL optional See PinViewOptions.glyph.
glyphColor	Type:  string optional See PinViewOptions.glyphColor.
scale	Type:  number optional See PinViewOptions.scale.

Methods
addListener	addListener(eventName, handler) Parameters:  eventName:  string handler:  Function Return Value:  MapsEventListener Adds the given listener function to the given event name.

PinViewOptions interface

google.maps.marker.PinViewOptions interface

Notice: Available only in the v=beta channel.

Options for creating a PinView.

Properties
background optional	Type:  string optional The background color of the pin shape. Supports any CSS color value.
borderColor optional	Type:  string optional The border color of the pin shape. Supports any CSS color value.
element optional	Type:  HTMLElement|SVGElement optional This Field is read-only. The DOM Element backing the view.
glyph optional	Type:  string|Element|URL optional The DOM element displayed in the pin.
glyphColor optional	Type:  string optional The color of the glyph. Supports any CSS color value.
scale optional	Type:  number optional Default: 1 The scale of the pin.