Get Started Contact sales

    Marker (legacy)

    Marker class

    google.maps . Marker class

    This class extends MVCObject .

    Access by calling const {Marker} = await google.maps.importLibrary("marker") .See Libraries in the Maps JavaScript API .

    Marker
    Marker([opts])
    Parameters:
    Creates a marker with the options specified. If a map is specified, the marker is added to the map upon construction. Note that the position must be set for the marker to display.
    MAX_ZINDEX The maximum default z-index that the API will assign to a marker. You may set a higher z-index to bring a marker to the front.
    getAnimation
    getAnimation()
    Parameters:  None
    Return Value: Animation |null|undefined
    Get the currently running animation.
    getClickable
    getClickable()
    Parameters:  None
    Return Value: boolean True if the Marker is clickable.
    Get the clickable status of the Marker .
    getCursor
    getCursor()
    Parameters:  None
    Return Value: string|null|undefined
    Get the mouse cursor type shown on hover.
    getDraggable
    getDraggable()
    Parameters:  None
    Return Value: boolean True if the Marker is draggable.
    Get the draggable status of the Marker .
    getIcon
    getIcon()
    Parameters:  None
    Return Value: string| Icon | Symbol |null|undefined
    Get the icon of the Marker . See MarkerOptions.icon .
    getLabel
    getLabel()
    Parameters:  None
    Return Value: MarkerLabel |string|null|undefined
    Get the label of the Marker . See MarkerOptions.label .
    getMap
    getMap()
    Parameters:  None
    Return Value: Map | StreetViewPanorama
    Get the map or panaroama the Marker is rendered on.
    getOpacity
    getOpacity()
    Parameters:  None
    Return Value: number|null|undefined A number between 0.0 and 1.0.
    Get the opacity of the Marker .
    getPosition
    getPosition()
    Parameters:  None
    Return Value: LatLng |null|undefined
    Get the position of the Marker .
    getShape
    getShape()
    Parameters:  None
    Return Value: MarkerShape |null|undefined
    Get the shape of the Marker used for interaction. See MarkerOptions.shape and MarkerShape .
    getTitle
    getTitle()
    Parameters:  None
    Return Value: string|null|undefined
    Get the title of the Marker tooltip. See MarkerOptions.title .
    getVisible
    getVisible()
    Parameters:  None
    Return Value: boolean True if the Marker is visible.
    Get the visibility of the Marker .
    getZIndex
    getZIndex()
    Parameters:  None
    Return Value: number|null|undefined zIndex of the Marker.
    Get the zIndex of the Marker . See MarkerOptions.zIndex .
    setAnimation
    setAnimation([animation])
    Parameters:
    • animation :  Animation optional The animation to play.
    Return Value:  None
    Start an animation. Any ongoing animation will be cancelled. Currently supported animations are: Animation.BOUNCE , Animation.DROP . Passing in null will cause any animation to stop.
    setClickable
    setClickable(flag)
    Parameters:
    • flag :  boolean If true , the Marker can be clicked.
    Return Value:  None
    Set if the Marker is clickable.
    setCursor
    setCursor([cursor])
    Parameters:
    • cursor :  string optional Mouse cursor type.
    Return Value:  None
    Set the mouse cursor type shown on hover.
    setDraggable
    setDraggable(flag)
    Parameters:
    • flag :  boolean optional If true , the Marker can be dragged.
    Return Value:  None
    Set if the Marker is draggable.
    setIcon
    setIcon([icon])
    Parameters:
    Return Value:  None
    Set the icon for the Marker . See MarkerOptions.icon .
    setLabel
    setLabel([label])
    Parameters:
    Return Value:  None
    Set the label for the Marker . See MarkerOptions.label .
    setMap
    setMap(map)
    Parameters:
    Return Value:  None
    Renders the Marker on the specified map or panorama. If map is set to null , the marker will be removed.
    setOpacity
    setOpacity([opacity])
    Parameters:
    • opacity :  number optional A number between 0.0, transparent, and 1.0, opaque.
    Return Value:  None
    Set the opacity of the Marker .
    setOptions
    setOptions(options)
    Parameters:
    Return Value:  None
    Set the options for the Marker .
    setPosition
    setPosition([latlng])
    Parameters:
    Return Value:  None
    Set the postition for the Marker .
    setShape
    setShape([shape])
    Parameters:
    Return Value:  None
    Set the shape of the Marker used for interaction. See MarkerOptions.shape and MarkerShape .
    setTitle
    setTitle([title])
    Parameters:
    • title :  string optional
    Return Value:  None
    Set the title of the Marker tooltip. See MarkerOptions.title .
    setVisible
    setVisible(visible)
    Parameters:
    • visible :  boolean If true , the Marker is visible
    Return Value:  None
    Set if the Marker is visible.
    setZIndex
    setZIndex([zIndex])
    Parameters:
    • zIndex :  number optional
    Return Value:  None
    Set the zIndex of the Marker . See MarkerOptions.zIndex .
    Inherited: addListener , bindTo , get , notify , set , setValues , unbind , unbindAll
    animation_changed
    function()
    Arguments:  None
    This event is fired when the Marker animation property changes.
    click
    function(event)
    Arguments:
    This event is fired when the Marker icon was clicked.
    clickable_changed
    function()
    Arguments:  None
    This event is fired when the Marker clickable property changes.
    contextmenu
    function(event)
    Arguments:
    This event is fired when the DOM contextmenu event is fired on the Marker
    cursor_changed
    function()
    Arguments:  None
    This event is fired when the Marker cursor property changes.
    dblclick
    function(event)
    Arguments:
    This event is fired when the Marker icon was double clicked.
    drag
    function(event)
    Arguments:
    This event is repeatedly fired while the user drags the Marker .
    dragend
    function(event)
    Arguments:
    This event is fired when the user stops dragging the Marker .
    draggable_changed
    function()
    Arguments:  None
    This event is fired when the Marker draggable property changes.
    dragstart
    function(event)
    Arguments:
    This event is fired when the user starts dragging the Marker .
    flat_changed
    function()
    Arguments:  None
    This event is fired when the Marker flat property changes.
    icon_changed
    function()
    Arguments:  None
    This event is fired when the Marker icon property changes.
    mousedown
    function(event)
    Arguments:
    This event is fired for a mousedown on the Marker .
    mouseout
    function(event)
    Arguments:
    This event is fired when the mouse leaves the area of the Marker icon.
    mouseover
    function(event)
    Arguments:
    This event is fired when the mouse enters the area of the Marker icon.
    mouseup
    function(event)
    Arguments:
    This event is fired for a mouseup on the Marker .
    position_changed
    function()
    Arguments:  None
    This event is fired when the Marker position property changes.
    shape_changed
    function()
    Arguments:  None
    This event is fired when the Marker shape property changes.
    title_changed
    function()
    Arguments:  None
    This event is fired when the Marker title property changes.
    visible_changed
    function()
    Arguments:  None
    This event is fired when the Marker visible property changes.
    zindex_changed
    function()
    Arguments:  None
    This event is fired when the Marker zIndex property changes.
    rightclick
    function(event)
    Arguments:
    This event is fired for a rightclick on the Marker .

    MarkerOptions interface

    google.maps . MarkerOptions interface

    MarkerOptions object used to define the properties that can be set on a Marker.
    anchorPoint optional
    Type: Point optional
    The offset from the marker's position to the tip of an InfoWindow that has been opened with the marker as anchor.
    animation optional
    Type: Animation optional
    Default: null
    Which animation to play when marker is added to a map.
    clickable optional
    Type: boolean optional
    Default: true
    If true , the marker receives mouse and touch events.
    Beta collisionBehavior optional
    Type: string| CollisionBehavior optional
    Default: null
    Set a collision behavior for markers on vector maps.
    crossOnDrag optional
    Type: boolean optional
    Default: true
    If false , disables cross that appears beneath the marker when dragging.
    cursor optional
    Type: string optional
    Default: pointer
    Mouse cursor type to show on hover.
    draggable optional
    Type: boolean optional
    Default: false
    If true , the marker can be dragged. Note: Setting this to true will make the marker clickable even if clickable is set to false .
    icon optional
    Type: string| Icon | Symbol optional
    Icon for the foreground. If a string is provided, it is treated as though it were an Icon with the string as url .
    label optional
    Type: string| MarkerLabel optional
    Default: null
    Adds a label to the marker. A marker label is a letter or number that appears inside a marker. The label can either be a string, or a MarkerLabel object. If provided and MarkerOptions.title is not provided, an accessibility text (e.g. for use with screen readers) will be added to the marker with the provided label's text. Please note that the label is currently only used for accessibility text for non-optimized markers.
    map optional
    Type: Map | StreetViewPanorama optional
    Map on which to display Marker. The map is required to display the marker and can be provided with Marker.setMap if not provided at marker construction.
    opacity optional
    Type: number optional
    Default:1.0
    A number between 0.0, transparent, and 1.0, opaque.
    optimized optional
    Type: boolean optional
    Optimization enhances performance by rendering many markers as a single static element. This is useful in cases where a large number of markers is required. Read more about marker optimization . Note: This optimization has no effect for markers on vector maps.
    position optional
    Type: LatLng | LatLngLiteral optional
    Sets the marker position. A marker may be constructed but not displayed until its position is provided - for example, by a user's actions or choices. A marker position can be provided with Marker.setPosition if not provided at marker construction.
    shape optional
    Type: MarkerShape optional
    Image map region definition used for drag/click.
    title optional
    Type: string optional
    Default: undefined
    Rollover text. If provided, an accessibility text (e.g. for use with screen readers) will be added to the marker with the provided value. Please note that the title is currently only used for accessibility text for non-optimized markers.
    visible optional
    Type: boolean optional
    Default: true
    If true , the marker is visible.
    zIndex optional
    Type: number optional
    All markers are displayed on the map in order of their zIndex, with higher values displaying in front of markers with lower values. By default, markers are displayed according to their vertical position on screen, with lower markers appearing in front of markers further up the screen.

    CollisionBehavior constants

    google.maps . CollisionBehavior constants

    Access by calling const {CollisionBehavior} = await google.maps.importLibrary("marker") .See Libraries in the Maps JavaScript API .
    OPTIONAL_AND_HIDES_LOWER_PRIORITY Display the marker only if it does not overlap with other markers. If two markers of this type would overlap, the one with the higher zIndex is shown. If they have the same zIndex, the one with the lower vertical screen position is shown.
    REQUIRED Always display the marker regardless of collision. This is the default behavior.
    REQUIRED_AND_HIDES_OPTIONAL Always display the marker regardless of collision, and hide any OPTIONAL_AND_HIDES_LOWER_PRIORITY markers or labels that would overlap with the marker.

    Icon interface

    google.maps . Icon interface

    A structure representing a Marker icon image.
    url
    Type: string
    The URL of the image or sprite sheet.
    anchor optional
    Type: Point optional
    The position at which to anchor an image in correspondence to the location of the marker on the map. By default, the anchor is located along the center point of the bottom of the image.
    labelOrigin optional
    Type: Point optional
    The origin of the label relative to the top-left corner of the icon image, if a label is supplied by the marker. By default, the origin is located in the center point of the image.
    origin optional
    Type: Point optional
    The position of the image within a sprite, if any. By default, the origin is located at the top left corner of the image (0, 0) .
    scaledSize optional
    Type: Size optional
    The size of the entire image after scaling, if any. Use this property to stretch/shrink an image or a sprite.
    size optional
    Type: Size optional
    The display size of the sprite or image. When using sprites, you must specify the sprite size. If the size is not provided, it will be set when the image loads.

    MarkerLabel interface

    google.maps . MarkerLabel interface

    These options specify the appearance of a marker label. A marker label is a string (often a single character) which will appear inside the marker. If you are using it with a custom marker, you can reposition it with the labelOrigin property in the Icon class.
    text
    Type: string
    The text to be displayed in the label.
    className optional
    Type: string optional
    Default: '' (empty string)
    The className property of the label's element (equivalent to the element's class attribute). Multiple space-separated CSS classes can be added. The font color, size, weight, and family can only be set via the other properties of MarkerLabel . CSS classes should not be used to change the position nor orientation of the label (e.g. using translations and rotations) if also using marker collision management .
    color optional
    Type: string optional
    Default: 'black'
    The color of the label text.
    fontFamily optional
    Type: string optional
    The font family of the label text (equivalent to the CSS font-family property).
    fontSize optional
    Type: string optional
    Default: '14px'
    The font size of the label text (equivalent to the CSS font-size property).
    fontWeight optional
    Type: string optional
    The font weight of the label text (equivalent to the CSS font-weight property).

    MarkerShape interface

    google.maps . MarkerShape interface

    This object defines the clickable region of a marker image. The shape consists of two properties — type and coord — which define the non-transparent region of an image.
    type
    Type: string
    Describes the shape's type and can be circle , poly or rect .
    coords optional
    Type: Array <number> optional
    The format of this attribute depends on the value of the type and follows the w3 AREA coords specification found at http://www.w3.org/TR/REC-html40/struct/objects.html#adef-coords .
    The coords attribute is an array of integers that specify the pixel position of the shape relative to the top-left corner of the target image. The coordinates depend on the value of type as follows:
      - circle : coords is [x1,y1,r] where x1,y2 are the coordinates of the center of the circle, and r is the radius of the circle.
      - poly : coords is [x1,y1,x2,y2...xn,yn] where each x,y pair contains the coordinates of one vertex of the polygon.
      - rect : coords is [x1,y1,x2,y2] where x1,y1 are the coordinates of the upper-left corner of the rectangle and x2,y2 are the coordinates of the lower-right coordinates of the rectangle.

    Symbol interface

    google.maps . Symbol interface

    Describes a symbol, which consists of a vector path with styling. A symbol can be used as the icon of a marker, or placed on a polyline.
    path
    Type: SymbolPath |string
    The symbol's path, which is a built-in symbol path, or a custom path expressed using SVG path notation . Required.
    anchor optional
    Type: Point optional
    Default: google.maps.Point(0,0)
    The position of the symbol relative to the marker or polyline. The coordinates of the symbol's path are translated left and up by the anchor's x and y coordinates respectively. The position is expressed in the same coordinate system as the symbol's path.
    fillColor optional
    Type: string optional
    The symbol's fill color. All CSS3 colors are supported except for extended named colors. For symbol markers, this defaults to 'black'. For symbols on polylines, this defaults to the stroke color of the corresponding polyline.
    fillOpacity optional
    Type: number optional
    Default: 0
    The symbol's fill opacity.
    labelOrigin optional
    Type: Point optional
    Default: google.maps.Point(0,0)
    The origin of the label relative to the origin of the path, if label is supplied by the marker. The origin is expressed in the same coordinate system as the symbol's path. This property is unused for symbols on polylines.
    rotation optional
    Type: number optional
    Default: 0
    The angle by which to rotate the symbol, expressed clockwise in degrees. A symbol in an IconSequence where fixedRotation is false is rotated relative to the angle of the edge on which it lies.
    scale optional
    Type: number optional
    The amount by which the symbol is scaled in size. For symbol markers, this defaults to 1; after scaling, the symbol may be of any size. For symbols on a polyline, this defaults to the stroke weight of the polyline; after scaling, the symbol must lie inside a square 22 pixels in size centered at the symbol's anchor.
    strokeColor optional
    Type: string optional
    The symbol's stroke color. All CSS3 colors are supported except for extended named colors. For symbol markers, this defaults to 'black'. For symbols on a polyline, this defaults to the stroke color of the polyline.
    strokeOpacity optional
    Type: number optional
    The symbol's stroke opacity. For symbol markers, this defaults to 1. For symbols on a polyline, this defaults to the stroke opacity of the polyline.
    strokeWeight optional
    Type: number optional
    Default:The Symbol.scale of the symbol.
    The symbol's stroke weight.

    SymbolPath constants

    google.maps . SymbolPath constants

    Built-in symbol paths.

    Access by calling const {SymbolPath} = await google.maps.importLibrary("core") .See Libraries in the Maps JavaScript API .
    BACKWARD_CLOSED_ARROW A backward-pointing closed arrow.
    BACKWARD_OPEN_ARROW A backward-pointing open arrow.
    CIRCLE A circle.
    FORWARD_CLOSED_ARROW A forward-pointing closed arrow.
    FORWARD_OPEN_ARROW A forward-pointing open arrow.

    Animation constants

    google.maps . Animation constants

    Animations that can be played on a marker. Use the Marker.setAnimation method on Marker or the MarkerOptions.animation option to play an animation.

    Access by calling const {Animation} = await google.maps.importLibrary("marker") .See Libraries in the Maps JavaScript API .
    BOUNCE Marker bounces until animation is stopped by calling Marker.setAnimation with null .
    DROP Marker drops from the top of the map to its final location. Animation will cease once the marker comes to rest and Marker.getAnimation will return null . This type of animation is usually specified during creation of the marker.
    Create a Mobile Website
    View Site in Mobile | Classic
    Share by: