Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share yourinput on your UI Kit experience.

Advanced Markers

AdvancedMarkerElementclass

google.maps.marker.AdvancedMarkerElementclass

Shows a position on a map. Note that theposition must be set for theAdvancedMarkerElement 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 extendsHTMLElement.

This class implementsAdvancedMarkerElementOptions.

Access by callingconst {AdvancedMarkerElement} = await google.maps.importLibrary("marker").
SeeLibraries in the Maps JavaScript API.

Constructor
`AdvancedMarkerElement`	`AdvancedMarkerElement([options])` Parameters: `options`: `AdvancedMarkerElementOptionsoptional` Creates an`AdvancedMarkerElement` with the options specified. If a map is specified, the`AdvancedMarkerElement` is added to the map upon construction.

Properties
`anchorLeft`	Type: `stringoptional` Default: "-50%" ACSS 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: `stringoptional` Default: "-100%" ACSS 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: `CollisionBehavioroptional` See`AdvancedMarkerElementOptions.collisionBehavior`.
`gmpClickable`	Type: `booleanoptional` See`AdvancedMarkerElementOptions.gmpClickable`. HTML attribute: `<gmp-advanced-marker gmp-clickable></gmp-advanced-marker>`
`gmpDraggable`	Type: `booleanoptional` See`AdvancedMarkerElementOptions.gmpDraggable`.
`map`	Type: `Mapoptional` See`AdvancedMarkerElementOptions.map`.
`position`	Type: `LatLng\|LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteraloptional` 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: `numberoptional` See`AdvancedMarkerElementOptions.zIndex`.
`element`	Deprecated: Use the AdvancedMarkerElement directly. Type: `HTMLElement` This field is read-only. The DOM Element backing the view.
`content`	Deprecated: Use.children instead. Type: `Nodeoptional` See`AdvancedMarkerElementOptions.content`.

Methods
`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\|AddEventListenerOptionsoptional` Seeoptions. 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. SeeaddEventListener
`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: `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\|EventListenerOptionsoptional` Seeoptions. Return Value: `void` Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

Events
`click`	`function(event)` Arguments: `event`: `MapMouseEvent` This event is fired when the`AdvancedMarkerElement` element is clicked. Not available with`addEventListener()` (use`gmp-click` instead).
`drag`	`function(event)` Arguments: `event`: `MapMouseEvent` This event is repeatedly fired while the user drags the`AdvancedMarkerElement`. Not available with`addEventListener()`.
`dragend`	`function(event)` Arguments: `event`: `MapMouseEvent` This event is fired when the user stops dragging the`AdvancedMarkerElement`. Not available with`addEventListener()`.
`dragstart`	`function(event)` Arguments: `event`: `MapMouseEvent` This event is fired when the user starts dragging the`AdvancedMarkerElement`. Not available with`addEventListener()`.
`gmp-click`	`function(event)` Arguments: `event`: `AdvancedMarkerClickEvent` This event is fired when the`AdvancedMarkerElement` element is clicked. Best used with`addEventListener()` (instead of`addListener()`).

AdvancedMarkerElementOptionsinterface

google.maps.marker.AdvancedMarkerElementOptionsinterface

Options for constructing anAdvancedMarkerElement.

Properties
`anchorLeftoptional`	Type: `stringoptional` Default: "-50%" ACSS 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.
`anchorTopoptional`	Type: `stringoptional` Default: "-100%" ACSS 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.
`collisionBehavioroptional`	Type: `CollisionBehavioroptional` 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.
`contentoptional`	Type: `Nodeoptional` Default:`PinElement` 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.
`gmpClickableoptional`	Type: `booleanoptional` 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).
`gmpDraggableoptional`	Type: `booleanoptional` Default:`false` If`true`, the`AdvancedMarkerElement` can be dragged. Note:`AdvancedMarkerElement` with altitude is not draggable.
`mapoptional`	Type: `Mapoptional` 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.
`positionoptional`	Type: `LatLng\|LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteraloptional` 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.
`titleoptional`	Type: `stringoptional` Rollover text. If provided, an accessibility text (e.g. for use with screen readers) will be added to the`AdvancedMarkerElement` with the provided value.
`zIndexoptional`	Type: `numberoptional` 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.

AdvancedMarkerClickEventclass

google.maps.marker.AdvancedMarkerClickEventclass

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

This class extendsEvent.

Access by callingconst {AdvancedMarkerClickEvent} = await google.maps.importLibrary("marker").
SeeLibraries in the Maps JavaScript API.

APinElement represents a DOM element that consists of a shape and a glyph. The shape has the same balloon style as seen in the defaultAdvancedMarkerElement orMarker3DElement. The glyph is an optional DOM element displayed in the balloon shape. APinElement may have a different aspect ratio depending on itsPinElement.scale.

This class extendsHTMLElement.

This class implementsPinElementOptions.

Access by callingconst {PinElement} = await google.maps.importLibrary("marker").
SeeLibraries in the Maps JavaScript API.

Constructor
`PinElement`	`PinElement([options])` Parameters: `options`: `PinElementOptionsoptional`

Properties
`background`	Type: `stringoptional` See`PinElementOptions.background`.
`borderColor`	Type: `stringoptional` See`PinElementOptions.borderColor`.
`glyphColor`	Type: `stringoptional` See`PinElementOptions.glyphColor`.
`glyphSrc`	Type: `URL\|stringoptional` See`PinElementOptions.glyphSrc`.
`glyphText`	Type: `stringoptional` See`PinElementOptions.glyphText`.
`scale`	Type: `numberoptional` See`PinElementOptions.scale`.
`element`	Deprecated: Use the PinElement directly. Type: `HTMLElement` This field is read-only. The DOM Element backing the view.
`glyph`	Deprecated: Use`PinElementOptions.glyphText` or`PinElementOptions.glyphSrc` instead. Type: `string\|Element\|URLoptional` See`PinElementOptions.glyph`.

Methods
`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\|AddEventListenerOptionsoptional` Seeoptions. 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. SeeaddEventListener.
`removeEventListener`	`removeEventListener(type, listener[, options])` Parameters: `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\|EventListenerOptionsoptional` Seeoptions. Return Value: `void` Removes an event listener previously registered with addEventListener from the target. SeeremoveEventListener.

Methods

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|AddEventListenerOptionsoptional Seeoptions. Custom events only supportcapture andpassive.

Return Value: void

Sets up a function that will be called whenever the specified event is delivered to the target. SeeaddEventListener.

removeEventListener

removeEventListener(type, listener[, options])

Parameters:

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

Return Value: void

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

PinElementOptionsinterface

google.maps.marker.PinElementOptionsinterface

Options for creating aPinElement.

Properties
`backgroundoptional`	Type: `stringoptional` The background color of the pin shape. Supports any CSScolor value.
`borderColoroptional`	Type: `stringoptional` The border color of the pin shape. Supports any CSScolor value.
`glyphoptional`	Deprecated: Use`PinElementOptions.glyphText` or`PinElementOptions.glyphSrc` instead. Type: `string\|Element\|URLoptional` The DOM element displayed in the pin.
`glyphColoroptional`	Type: `stringoptional` The color of the glyph. Supports any CSScolor value.
`glyphSrcoptional`	Type: `URL\|stringoptional` The source of the glyph image to be displayed in the pin.
`glyphTextoptional`	Type: `stringoptional` The text displayed in the pin.
`scaleoptional`	Type: `numberoptional` Default:`1` The scale of the pin.

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-12-18 UTC.

Movatterモバイル変換

Advanced Markers

AdvancedMarkerElementclass

Constructor

Properties

Methods

Events

AdvancedMarkerElementOptionsinterface

Properties

AdvancedMarkerClickEventclass

PinElementclass

Constructor

Properties

Methods

PinElementOptionsinterface

Properties

Movatterモバイル変換

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

AdvancedMarkerElementclass

Constructor

Properties

Methods

Events

AdvancedMarkerElementOptionsinterface

Properties

AdvancedMarkerClickEventclass

PinElementclass

Constructor

Properties

Methods

PinElementOptionsinterface

Properties

Advanced Markers