A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developers.google.com/maps/documentation/javascript/reference/advanced-markers below:

Advanced Markers | Maps JavaScript API

Skip to main content Advanced Markers

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

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

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.

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

Notice: Available only in the v=beta channel.

removeEventListener(type, listener[, options])

Parameters: 

Return Value:  void

Removes an event listener previously registered with addEventListener from the target. See

removeEventListener

.

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: 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 class

google.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.

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.

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 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