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

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.

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

Properties
`anchorLeft`	Type: `string optional` 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. The default value is "-%50". HTML attribute: `<gmp-advanced-marker anchor-left="string"></gmp-advanced-marker>`
`anchorTop`	Type: `string optional` 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. The default value is "-%100". HTML attribute: `<gmp-advanced-marker anchor-top="string"></gmp-advanced-marker>`
`collisionBehavior`	Type: `CollisionBehavior optional` See `AdvancedMarkerElementOptions.collisionBehavior`.
`gmpClickable`	Type: `boolean optional` See `AdvancedMarkerElementOptions.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`	Type: `LatLng\|LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteral optional` 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`	Deprecated: Use the AdvancedMarkerElement directly. Type: `HTMLElement` This field is read-only. The DOM Element backing the view.
`content`	Deprecated: Use .children instead. Type: `Node optional` 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\|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: `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.

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`	Notice: Available only in the

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

AdvancedMarkerElement class

Constructor

Properties

Methods

Events

Advanced Markers