Advanced Markers

AdvancedMarkerElement class

google.maps.marker.AdvancedMarkerElement class

Shows a position on a map. Note that the position must be set for the AdvancedMarkerElement to display.

Custom element:
<gmp-advanced-marker anchor-left="string" anchor-top="string" gmp-clickable position="lat,lng" title="string"></gmp-advanced-marker>

This class extends HTMLElement.

This class implements AdvancedMarkerElementOptions.

Access by calling const {AdvancedMarkerElement} = await google.maps.importLibrary("marker").
See Libraries in the Maps JavaScript API.
AdvancedMarkerElement
AdvancedMarkerElement([options])
Parameters: 
Creates an AdvancedMarkerElement with the options specified. If a map is specified, the AdvancedMarkerElement is added to the map upon construction.
anchorLeft
Type:  string optional
Default: "-50%"
A CSS length-percentage value which is used to offset the anchor point of the marker from the top left corner of the marker. This is useful when using a visual which has an anchor point that is different than the typical bottom center point of the default marker.
HTML attribute:
  • <gmp-advanced-marker anchor-left="string"></gmp-advanced-marker>
anchorTop
Type:  string optional
Default: "-100%"
A CSS length-percentage value which is used to offset the anchor point of the marker from the top left corner of the marker. This is useful when using a visual which has an anchor point that is different than the typical bottom center point of the default marker.
HTML attribute:
  • <gmp-advanced-marker anchor-top="string"></gmp-advanced-marker>
collisionBehavior
Type:  CollisionBehavior optional
See AdvancedMarkerElementOptions.collisionBehavior.
gmpClickable
Type:  boolean optional
See BetaAdvancedMarkerElementOptions.gmpClickable.
HTML attribute:
  • <gmp-advanced-marker gmp-clickable></gmp-advanced-marker>
gmpDraggable
Type:  boolean optional
See AdvancedMarkerElementOptions.gmpDraggable.
map
Type:  Map optional
See AdvancedMarkerElementOptions.map.
position
See AdvancedMarkerElementOptions.position.
HTML attribute:
  • <gmp-advanced-marker position="lat,lng"></gmp-advanced-marker>
  • <gmp-advanced-marker position="lat,lng,altitude"></gmp-advanced-marker>
title
Type:  string
See AdvancedMarkerElementOptions.title.
HTML attribute:
  • <gmp-advanced-marker title="string"></gmp-advanced-marker>
zIndex
Type:  number optional
See AdvancedMarkerElementOptions.zIndex.
element
Type:  HTMLElement
This field is read-only. The DOM Element backing the view.
content
Type:  Node optional
See AdvancedMarkerElementOptions.content.
addEventListener
addEventListener(type, listener[, options])
Parameters: 
  • type:  string A case-sensitive string representing the event type to listen for.
  • listener:  EventListener|EventListenerObject The object that receives a notification. This must be a function or an object with the handleEvent method
  • options:  boolean|AddEventListenerOptions optional See options. Custom events only support capture and passive.
Return Value:  void
Sets up a function that will be called whenever the specified event is delivered to the target. See addEventListener
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.
removeEventListener
removeEventListener(type, listener[, options])
Parameters: 
Return Value:  void
Removes an event listener previously registered with addEventListener from the target. See removeEventListener.
click
function(event)
Arguments: 
This event is fired when the AdvancedMarkerElement element is clicked.

Not available with addEventListener() (use gmp-click instead).
drag
function(event)
Arguments: 
This event is repeatedly fired while the user drags the AdvancedMarkerElement.

Not available with addEventListener().
dragend
function(event)
Arguments: 
This event is fired when the user stops dragging the AdvancedMarkerElement.

Not available with addEventListener().
dragstart
function(event)
Arguments: 
This event is fired when the user starts dragging the AdvancedMarkerElement.

Not available with addEventListener().
Betagmp-click
function(event)
Arguments: 
This event is fired when the AdvancedMarkerElement element is clicked. Best used with addEventListener() (instead of addListener()).

AdvancedMarkerElementOptions interface

google.maps.marker.AdvancedMarkerElementOptions interface

Options for constructing an AdvancedMarkerElement.
anchorLeft optional
Type:  string optional
Default: "-50%"
A CSS length-percentage value which is used to offset the anchor point of the marker from the top left corner of the marker. This is useful when using a visual which has an anchor point that is different than the typical bottom center point of the default marker.
anchorTop optional
Type:  string optional
Default: "-100%"
A CSS length-percentage value which is used to offset the anchor point of the marker from the top left corner of the marker. This is useful when using a visual which has an anchor point that is different than the typical bottom center point of the default marker.
collisionBehavior optional
Type:  CollisionBehavior optional
An enumeration specifying how an AdvancedMarkerElement should behave when it collides with another AdvancedMarkerElement or with the basemap labels on a vector map.

Note: AdvancedMarkerElement to AdvancedMarkerElement collision works on both raster and vector maps, however, AdvancedMarkerElement to base map's label collision only works on vector maps.
content optional
Type:  Node optional
Default: PinElement.element
The DOM Element backing the visual of an AdvancedMarkerElement.

Note: AdvancedMarkerElement does not clone the passed-in DOM element. Once the DOM element is passed to an AdvancedMarkerElement, passing the same DOM element to another AdvancedMarkerElement will move the DOM element and cause the previous AdvancedMarkerElement to look empty.
BetagmpClickable optional
Type:  boolean optional
Default: false
If true, the AdvancedMarkerElement will be clickable and trigger the gmp-click event, and will be interactive for accessibility purposes (e.g. allowing keyboard navigation via arrow keys).
gmpDraggable optional
Type:  boolean optional
Default: false
If true, the AdvancedMarkerElement can be dragged.

Note: AdvancedMarkerElement with altitude is not draggable.
map optional
Type:  Map optional
Map on which to display the AdvancedMarkerElement. The map is required to display the AdvancedMarkerElement and can be provided by setting AdvancedMarkerElement.map if not provided at the construction.
position optional
Sets the AdvancedMarkerElement's position. An AdvancedMarkerElement 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 AdvancedMarkerElement's position can be provided by setting AdvancedMarkerElement.position if not provided at the construction.

Note: AdvancedMarkerElement 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 AdvancedMarkerElement with the provided value.
zIndex optional
Type:  number optional
All AdvancedMarkerElements are displayed on the map in order of their zIndex, with higher values displaying in front of AdvancedMarkerElements with lower values. By default, AdvancedMarkerElements are displayed according to their vertical position on screen, with lower AdvancedMarkerElements appearing in front of AdvancedMarkerElements 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.

AdvancedMarkerClickEvent class

google.maps.marker.AdvancedMarkerClickEvent class

This event is created from clicking an Advanced Marker. Access the marker's position with event.target.position.

This class extends Event.

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

PinElement class

google.maps.marker.PinElement class

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

Note: Usage as a Web Component (e.g. usage as an HTMLElement subclass, or via HTML) is not yet supported.

This class extends HTMLElement.

This class implements PinElementOptions.

Access by calling const {PinElement} = await google.maps.importLibrary("marker").
See Libraries in the Maps JavaScript API.
PinElement
PinElement([options])
Parameters: 
background
Type:  string optional
See PinElementOptions.background.
borderColor
Type:  string optional
See PinElementOptions.borderColor.
glyphColor
Type:  string optional
See PinElementOptions.glyphColor.
glyphSrc
Type:  URL|string optional
See PinElementOptions.glyphSrc.
glyphText
Type:  string optional
See PinElementOptions.glyphText.
scale
Type:  number optional
See PinElementOptions.scale.
element
Type:  HTMLElement
This field is read-only. The DOM Element backing the view.
glyph
Type:  string|Element|URL optional
See PinElementOptions.glyph.
BetaaddEventListener
addEventListener(type, listener[, options])
Parameters: 
Return Value:  void
This function is not yet available for usage.
removeEventListener
removeEventListener(type, listener[, options])
Parameters: 
Return Value:  void
Removes an event listener previously registered with addEventListener from the target. See removeEventListener.

PinElementOptions interface

google.maps.marker.PinElementOptions interface

Options for creating a PinElement.
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.
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.
glyphSrc optional
Type:  URL|string optional
The source of the glyph image to be displayed in the pin.
glyphText optional
Type:  string optional
The text displayed in the pin.
scale optional
Type:  number optional
Default: 1
The scale of the pin.