Get Started Contact sales

    Advanced Markers

    AdvancedMarkerElement class

    google.maps.marker . AdvancedMarkerElement class
    extends HTMLElement
    implements AdvancedMarkerElementOptions

    Shows a position on a map. Note that the position must be set for the AdvancedMarkerElement to display.

    <gmp-advanced-marker
  anchor-left=" string 
"
  anchor-top=" string 
"
  gmp-clickable
  position=" lat,lng 
"
  title=" string 
">
</gmp-advanced-marker>
     
     const 
  
 { 
 AdvancedMarkerElement 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "marker" 
 );
    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.
    anchorLeft
    attr: anchor-left
    Type: string optional
    Default:"-50%"
    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.
    HTML attribute: anchor-left="string"
    anchorTop
    attr: anchor-top
    Type: string optional
    Default:"-100%"
    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.
    HTML attribute: anchor-top="string"
    gmpClickable
    attr: gmp-clickable
    Type: boolean optional
    See AdvancedMarkerElementOptions.gmpClickable .
    HTML attribute: gmp-clickable
    position
    attr: position
    See AdvancedMarkerElementOptions.position .
    HTML attribute:
    • position="lat,lng"
    • position="lat,lng,altitude"
    title
    attr: title
    Type: string
    See AdvancedMarkerElementOptions.title .
    HTML attribute: title="string"
    zIndex
    Type: number optional
    See AdvancedMarkerElementOptions.zIndex .
    element
    readonly
    Type: HTMLElement
    This field is read-only. The DOM Element backing the view.
    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.
    Inherited: addEventListener , removeEventListener
    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 .
    anchorLeft
    optional
    Type: string optional
    Default:"-50%"
    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.
    anchorTop
    optional
    Type: string optional
    Default:"-100%"
    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.
    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
    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
    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
    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. Mixing markers with an explicit zIndex and markers without one can lead to unexpected visual results. To ensure predictable behavior, it is recommended to either set the zIndex for all markers or leave it unset. 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
    extends Event

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

     const 
  
 { 
 AdvancedMarkerClickEvent 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "marker" 
 );

    PinElement class

    google.maps.marker . PinElement class
    extends HTMLElement
    implements PinElementOptions

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

     const 
  
 { 
 PinElement 
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "marker" 
 );
    PinElement
    PinElement([options])
    Parameters:
    background
    Type: string optional
    The background color of the pin shape. See PinElementOptions.background .
    borderColor
    Type: string optional
    The border color of the pin shape. See PinElementOptions.borderColor .
    glyphColor
    Type: string optional
    The color of the pin glyph. See PinElementOptions.glyphColor .
    glyphSrc
    Type: URL |string optional
    The source of the glyph image to be displayed in the pin. See PinElementOptions.glyphSrc .
    glyphText
    Type: string optional
    The text displayed in the pin. See PinElementOptions.glyphText .
    scale
    Type: number optional
    See PinElementOptions.scale .
    element
    readonly
    Type: HTMLElement
    This field is read-only. The DOM Element backing the view.
    glyph
    Type: string| Element | URL optional
    See PinElementOptions.glyph .
    Inherited: addEventListener , removeEventListener

    PinElementOptions interface

    google.maps.marker . PinElementOptions interface

    Options for creating a PinElement .
    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 .
    glyphSrc
    optional
    Type: URL |string optional
    The source of the glyph image to be displayed in the pin.
    glyphText
    optional
    Type: string optional
    The text displayed in the pin.
    scale
    optional
    Type: number optional
    Default: 1
    The scale of the pin.
    Create a Mobile Website
    View Site in Mobile | Classic
    Share by: