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.
Note: Usage as a Web Component (e.g. using the custom <gmp-advanced-marker>
HTML element, is only available in the v=beta
channel).
Custom element:
<gmp-advanced-marker 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.
Constructor | |
---|---|
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. |
Properties | |
---|---|
collisionBehavior |
Type:
CollisionBehavior optional |
content |
Type:
Node optional |
element |
Type:
HTMLElement This field is read-only. The DOM Element backing the view. |
gmpClickable |
Type:
boolean optional |
gmpDraggable |
Type:
boolean optional |
map |
Type:
Map optional |
position |
Type:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional HTML attribute:
|
title |
Type:
string HTML attribute:
|
zIndex |
Type:
number optional |
Methods | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) Parameters:
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:
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 |
Events | |
---|---|
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() . |
gmp-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
.
Properties | |
---|---|
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: |
content optional |
Type:
Node optional Default:
PinElement.element The DOM Element backing the visual of an AdvancedMarkerElement . Note: |
gmpClickable 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: |
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: |
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 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.
Constructor | |
---|---|
PinElement |
PinElement([options]) Parameters:
|
Properties | |
---|---|
background |
Type:
string optional |
borderColor |
Type:
string optional |
element |
Type:
HTMLElement This field is read-only. The DOM Element backing the view. |
glyph |
|
glyphColor |
Type:
string optional |
scale |
Type:
number optional |
Methods | |
---|---|
addEventListener |
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
.
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. |
glyph 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. |