Advanced Markers (beta)

Stay organized with collections Save and categorize content based on your preferences.

AdvancedMarkerView class

google.maps.marker.AdvancedMarkerView class

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.

Load using the &libraries=marker URL parameter. See Libraries in the Maps JavaScript API.

When using v=beta, can be accessed by calling const {AdvancedMarkerView} = await google.map.importLibrary("marker"). See Libraries in the Maps JavaScript API.

AdvancedMarkerView
AdvancedMarkerView([options])
Parameters: 
collisionBehavior
Type:  CollisionBehavior optional
content
Type:  Element optional
draggable
Type:  boolean optional
element optional
Type:  Element optional
This Field is read-only. The DOM Element backing the view.
map
Type:  Map optional
position
title
Type:  string optional
zIndex
Type:  number optional
addListener
addListener(eventName, handler)
Parameters: 
  • eventNamestring
  • handlerFunction
Return Value:  MapsEventListener
Adds the given listener function to the given event name.
click
function(event)
Arguments: 
This event is fired when the AdvancedMarkerView element is clicked.
drag
function(event)
Arguments: 
This event is repeatedly fired while the user drags the AdvancedMarkerView.
dragend
function(event)
Arguments: 
This event is fired when the user stops dragging the AdvancedMarkerView.
dragstart
function(event)
Arguments: 
This event is fired when the user starts dragging the AdvancedMarkerView.

AdvancedMarkerViewOptions interface

google.maps.marker.AdvancedMarkerViewOptions interface

Options for constructing an AdvancedMarkerView.

Load using the &libraries=marker URL parameter. See Libraries in the Maps JavaScript API.

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
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
Type:  boolean optional
Default: false
If true, the AdvancedMarkerView can be dragged.

Note: AdvancedMarkerView with altitude is not draggable.

element optional
Type:  Element optional
This Field is read-only. The DOM Element backing the view.
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
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

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.

Load using the &libraries=marker URL parameter. See Libraries in the Maps JavaScript API.

When using v=beta, can be accessed by calling const {PinView} = await google.map.importLibrary("marker"). See Libraries in the Maps JavaScript API.

PinView
PinView([options])
Parameters: 
background
Type:  string optional
borderColor
Type:  string optional
element optional
Type:  Element optional
This Field is read-only. The DOM Element backing the view.
glyph
Type:  string|Element|URL optional
glyphColor
Type:  string optional
scale
Type:  number optional
addListener
addListener(eventName, handler)
Parameters: 
  • eventNamestring
  • handlerFunction
Return Value:  MapsEventListener
Adds the given listener function to the given event name.

PinViewOptions interface

google.maps.marker.PinViewOptions interface

Options for creating a PinView.

Load using the &libraries=marker URL parameter. See Libraries in the Maps JavaScript API.

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:  Element 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.