You're all set!

To start developing, please head over to our developer documentation.

Activate the Google Maps JavaScript API

To get you started we'll guide you through the Google Developers Console to do a few things first:

  1. Create or choose a project
  2. Activate the Google Maps JavaScript API and related services
  3. Create appropriate keys
Continue

Marker

Marker class

google.maps.Marker class

This class extends MVCObject.

Constructor
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.
Methods
getAnimation
getAnimation()
Parameters:  None
Return Value:  Animation
getClickable
getClickable()
Parameters:  None
Return Value:  boolean
getCursor
getCursor()
Parameters:  None
Return Value:  string
getDraggable
getDraggable()
Parameters:  None
Return Value:  boolean
getIcon
getIcon()
Parameters:  None
Return Value:  string|Icon|Symbol
getLabel
getLabel()
Parameters:  None
Return Value:  MarkerLabel
getMap
getMap()
Parameters:  None
Return Value:  Map|StreetViewPanorama
getOpacity
getOpacity()
Parameters:  None
Return Value:  number
getPosition
getPosition()
Parameters:  None
Return Value:  LatLng
getShape
getShape()
Parameters:  None
Return Value:  MarkerShape
getTitle
getTitle()
Parameters:  None
Return Value:  string
getVisible
getVisible()
Parameters:  None
Return Value:  boolean
getZIndex
getZIndex()
Parameters:  None
Return Value:  number
setAnimation
setAnimation(animation)
Parameters: 
Return Value:  None
Start an animation. Any ongoing animation will be cancelled. Currently supported animations are: BOUNCE, DROP. Passing in null will cause any animation to stop.
setClickable
setClickable(flag)
Parameters: 
  • flagboolean
Return Value:  None
setCursor
setCursor(cursor)
Parameters: 
  • cursorstring
Return Value:  None
setDraggable
setDraggable(flag)
Parameters: 
  • flagboolean
Return Value:  None
setIcon
setIcon(icon)
Parameters: 
Return Value:  None
setLabel
setLabel(label)
Parameters: 
Return Value:  None
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: 
  • opacitynumber
Return Value:  None
setOptions
setOptions(options)
Parameters: 
Return Value:  None
setPosition
setPosition(latlng)
Parameters: 
Return Value:  None
setShape
setShape(shape)
Parameters: 
Return Value:  None
setTitle
setTitle(title)
Parameters: 
  • titlestring
Return Value:  None
setVisible
setVisible(visible)
Parameters: 
  • visibleboolean
Return Value:  None
setZIndex
setZIndex(zIndex)
Parameters: 
  • zIndexnumber
Return Value:  None
Constants
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.
Events
animation_changed
function()
Arguments:  None
This event is fired when the marker's 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's clickable property changes.
cursor_changed
function()
Arguments:  None
This event is fired when the marker's 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's 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's 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.
rightclick
function(event)
Arguments: 
This event is fired for a rightclick on the marker.
shape_changed
function()
Arguments:  None
This event is fired when the marker's 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's visible property changes.
zindex_changed
function()
Arguments:  None
This event is fired when the marker's zIndex property changes.

MarkerOptions interface

google.maps.MarkerOptions interface

MarkerOptions object used to define the properties that can be set on a Marker.

Properties
anchorPoint
Type:  Point
The offset from the marker's position to the tip of an InfoWindow that has been opened with the marker as anchor.
animation
Type:  Animation
Which animation to play when marker is added to a map.
clickable
Type:  boolean
If true, the marker receives mouse and touch events. Default value is true.
crossOnDrag
Type:  boolean
If false, disables cross that appears beneath the marker when dragging. This option is true by default.
cursor
Type:  string
Mouse cursor to show on hover
draggable
Type:  boolean
If true, the marker can be dragged. Default value is false.
icon
Type:  string|Icon|Symbol
Icon for the foreground. If a string is provided, it is treated as though it were an Icon with the string as url.
label
Type:  string|MarkerLabel
Adds a label to the marker. The label can either be a string, or a MarkerLabel object.
map
Map on which to display Marker.
opacity
Type:  number
The marker's opacity between 0.0 and 1.0.
optimized
Type:  boolean
Optimization renders many markers as a single static element. Optimized rendering is enabled by default. Disable optimized rendering for animated GIFs or PNGs, or when each marker must be rendered as a separate DOM element (advanced usage only).
position
Marker position. Required.
shape
Type:  MarkerShape
Image map region definition used for drag/click.
title
Type:  string
Rollover text
visible
Type:  boolean
If true, the marker is visible
zIndex
Type:  number
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.

Icon interface

google.maps.Icon interface

A structure representing a Marker icon image.

Properties
anchor
Type:  Point
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
Type:  Point
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
Type:  Point
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
Type:  Size
The size of the entire image after scaling, if any. Use this property to stretch/shrink an image or a sprite.
size
Type:  Size
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.
url
Type:  string
The URL of the image or sprite sheet.

MarkerLabel interface

google.maps.MarkerLabel interface

These options specify the appearance of a marker label. A marker label is a single character of text 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.

Properties
color
Type:  string
The color of the label text. Default color is black.
fontFamily
Type:  string
The font family of the label text (equivalent to the CSS font-family property).
fontSize
Type:  string
The font size of the label text (equivalent to the CSS font-size property). Default size is 14px.
fontWeight
Type:  string
The font weight of the label text (equivalent to the CSS font-weight property).
text
Type:  string
The text to be displayed in the label.

MarkerShape interface

google.maps.MarkerShape interface

This object defines the clickable region of a marker image for browsers other than Internet Explorer. The shape consists of two properties — type and coord — which define the non-transparent region of an image. A MarkerShape object is not required on Internet Explorer since the browser does not fire events on the transparent region of an image by default.

Properties
coords
Type:  Array<number>
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.
type
Type:  string
Describes the shape's type and can be circle, poly or rect.

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.

Properties
anchor
Type:  Point
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. By default, a symbol is anchored at (0, 0). The position is expressed in the same coordinate system as the symbol's path.
fillColor
Type:  string
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
Type:  number
The symbol's fill opacity. Defaults to 0.
labelOrigin
Type:  Point
The origin of the label relative to the origin of the path, if label is supplied by the marker. By default, the origin is located at (0, 0). The origin is expressed in the same coordinate system as the symbol's path. This property is unused for symbols on polylines.
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.
rotation
Type:  number
The angle by which to rotate the symbol, expressed clockwise in degrees. Defaults to 0. A symbol in an IconSequence where fixedRotation is false is rotated relative to the angle of the edge on which it lies.
scale
Type:  number
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
Type:  string
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
Type:  number
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
Type:  number
The symbol's stroke weight. Defaults to the scale of the symbol.

SymbolPath constants

google.maps.SymbolPath constants

Built-in symbol paths.

Constants
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 setAnimation method on Marker or the animation option to play an animation.

Constants
BOUNCE Marker bounces until animation is stopped.
DROP Marker falls from the top of the map ending with a small bounce.

Send feedback about...

Google Maps JavaScript API
Google Maps JavaScript API
Need help? Visit our support page.