Security notice:We have become aware of a security issue that may be affecting websites using specific third-party libraries (including polyfill.io). This issue can sometimes redirect visitors away from the intended website without website owner knowledge or permission. Many of our JavaScript samples previously included apolyfill.ioscript declaration. We have removed this from our samples. If you have used our JavaScript samples that contain this declaration, we recommend removing the declaration.

Advanced Markers

AdvancedMarkerElement class

google.maps.marker.AdvancedMarkerElement class

Shows a position on a map. Note that thepositionmust be set for theAdvancedMarkerElementto display.

Note:Usage as a Web Component (e.g. using the custom<gmp-advanced-marker>HTML element, is only available in thev=betachannel).

Custom element:
<gmp-advanced-marker position= "lat,lng" title= "string" ></gmp-advanced-marker>

This class extends HTMLElement.

This class implements AdvancedMarkerElementOptions.

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
`collisionBehavior`	Type:`CollisionBehavioroptional` See`AdvancedMarkerElementOptions.collisionBehavior`.
`content`	Type:`Nodeoptional` See`AdvancedMarkerElementOptions.content`.
`element`	Type:`HTMLElement` This field is read-only. The DOM Element backing the view.
`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`.

Methods
`addEventListener`	Notice:Available only in thev=beta channel. `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`	Notice:Available only in thev=beta channel. `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`	Notice:Available only in thev=beta channel. `function(event)` Arguments: `event`:`AdvancedMarkerClickEvent` 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 anAdvancedMarkerElement.

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

AdvancedMarkerClickEvent class

google.maps.marker.AdvancedMarkerClickEvent class

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

This class extends Event.

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

PinElement class

google.maps.marker.PinElement class

APinElementrepresents a DOM element that consists of a shape and a glyph. The shape has the same balloon style as seen in the defaultAdvancedMarkerElement.The glyph is an optional DOM element displayed in the balloon shape. APinElementmay have a different aspect ratio depending on itsPinElement.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 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`.
`element`	Type:`HTMLElement` This field is read-only. The DOM Element backing the view.
`glyph`	Type:`string\|Element\|URLoptional` See`PinElementOptions.glyph`.
`glyphColor`	Type:`stringoptional` See`PinElementOptions.glyphColor`.
`scale`	Type:`numberoptional` See`PinElementOptions.scale`.

Methods
`addEventListener`	Notice:Available only in thev=beta channel. `addEventListener(type, listener[, options])` Parameters: `type`:`string` `listener`:`EventListener\|EventListenerObject` `options`:`boolean\|AddEventListenerOptionsoptional` Return Value:`void` This function is not yet available for usage.
`removeEventListener`	Notice:Available only in thev=beta channel. `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
listener:EventListener|EventListenerObject
options:boolean|AddEventListenerOptionsoptional

Return Value:void

This function is not yet available for usage.

removeEventListener

removeEventListener(type, listener[, options])

Parameters:

type:stringA string which specifies the type of event for which to remove an event listener.
listener:EventListener|EventListenerObjectThe event listener of the event handler to remove from the event target.
options:boolean|EventListenerOptionsoptionalSeeoptions

Return Value:void

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

PinElementOptions interface

google.maps.marker.PinElementOptions interface

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`	Type:`string\|Element\|URLoptional` The DOM element displayed in the pin.
`glyphColoroptional`	Type:`stringoptional` The color of the glyph. Supports any CSScolor value.
`scaleoptional`	Type:`numberoptional` Default:`1` The scale of the pin.

Advanced Markers

AdvancedMarkerElement class

Constructor

Properties

Methods

Events

AdvancedMarkerElementOptions interface

Properties

AdvancedMarkerClickEvent class

PinElement class

Constructor

Properties

Methods

PinElementOptions interface

Properties