Stay organized with collections Save and categorize content based on your preferences.
AdvancedMarkerElement classgoogle.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 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])
options
: AdvancedMarkerElementOptions optional
Creates an AdvancedMarkerElement
with the options specified. If a map is specified, the AdvancedMarkerElement
is added to the map upon construction.
addEventListener
addEventListener(type, listener[, options])
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 methodoptions
: 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
addEventListeneraddListener
addListener(eventName, handler)
eventName
: string
Observed event.handler
: Function
Function to handle events.MapsEventListener
Resulting event listener.
Adds the given listener function to the given event name in the Maps Eventing system.
removeEventListener
Notice: Available only in the v=beta channel.
removeEventListener(type, listener[, options])
type
: string
A string which specifies the type of event for which to remove an event listener.listener
: EventListener|EventListenerObject
The event listener of the event handler to remove from the event target.options
: boolean|EventListenerOptions optional
See options.Return Value: void
Removes an event listener previously registered with addEventListener from the target. See
removeEventListener.
AdvancedMarkerElementOptions interfacegoogle.maps.marker.AdvancedMarkerElementOptions
interface
Options for constructing an AdvancedMarkerElement
.
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.
gmpClickable optional
Notice: Available only in the v=beta channel.
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
Type: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral 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
AdvancedMarkerElement
s are displayed on the map in order of their zIndex, with higher values displaying in front of
AdvancedMarkerElement
s with lower values. By default,
AdvancedMarkerElement
s are displayed according to their vertical position on screen, with lower
AdvancedMarkerElement
s appearing in front of
AdvancedMarkerElement
s 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 classgoogle.maps.marker.AdvancedMarkerClickEvent
class
Notice: Available only in the v=beta channel.
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.
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.
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.
scale optional
Type: number optional
Default: 1
The scale of the pin.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-07-09 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-07-09 UTC."],[],[]]
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4