Marker

The Marker object displays a single marker on the map.

Marker extends Layer.

Example usage

const map = G.map('map', { apiKey: 'my-api-key', center: { latitude: 48.864716, longitude: 2.3522 } });
map.load().then(() => {
    const marker = G.marker({
        latitude: 48.9,
        longitude: 2.4,
        map: map,
        title: 'My Marker',
    });
});

Creating the Marker object

G.marker(options?: MarkerOptions): Marker

There are a few ways that you can setup the Marker object.

No parameters.

G.marker(): Marker

const marker = G.marker();

Pass the marker options.

G.marker(options: MarkerOptions): Marker

Parameter	Type	Required	Description
options	MarkerOptions	Yes	The options.

const marker = G.marker({position: [48.9, 2.4]});

Set the location only.

G.marker(position: LatLngValue): Marker

Parameter	Type	Required	Description
position	LatLngValue	Yes	The latitude/longitude value.

const marker = G.marker([48.9, 2.4]);

Set the location and the options.

G.marker(position: LatLngValue, options: MarkerOptions): Marker

Parameter	Type	Required	Description
position	LatLngValue	Yes	The latitude/longitude value.
options	MarkerOptions	Yes	The options.

const marker = G.marker([48.9, 2.4], {title: 'Marker title'});

Pass an existing Marker object.

G.marker(object: Marker): Marker

In this case the Marker object is simply returned.

Parameter	Type	Required	Description
object	Marker	Yes	A Marker object.

const marker = G.marker(markerObject);

MarkerLabel type

The MarkerLabel type is an object that represents the label value for the marker. You can either pass a string for the label value, or an object.

The MarkerLabel type is the same as the Google Maps MarkerLabel interface.

Option	Type	Default	Description
className	string		The class attribute value for the label.
color	string	black	The label text color
fontFamily	string		The label text font family
fontSize	string	14px	The label text font size
fontWeight	string		The label text font weight
text	string		The label text

Custom data type

You can attach an object of data to the marker object to hold some custom data. An example usage would be to include some content that you want to show in a popup when a marker is clicked.

The CustomData type represents this data. Essentially it's an object that can hold any type of data

type CustomData = {
    [key: string]: any;
}

Marker options

Type MarkerOptions

Option	Type	Default	Description
anchorPoint	PointValue		The offset from the marker's position to the tip of an InfoWindow that has been opened with the marker as anchor.
cursor	string	pointer	The cursor type to show on hover.
data	CustomData		An optional object to hold custom data to attach to the marker object.
draggable	boolean	false	Whether the marker can be dragged on the map.
icon	IconValue		The icon value for the marker.
label	string or MarkerLabel		The label for the marker.
lat	number		The latitude for the marker. This is an alternate option to position and latitude. You should set this if you are setting longitude or lng.
latitude	number		The latitude for the marker. This is an alternate option to position and lat. You should set this if you are setting longitude or lng.
lng	number		The longitude for the marker. This is an alternate option to position and longitude. You should set this if you are setting latitude or lat.
longitude	number		The longitude for the marker. This is an alternate option to position and lng. You should set this if you are setting latitude or lat.
map	Map		The map that the marker should show on.
position	LatLngValue		The Marker position
svgIcon	SvgSymbolValue		The SVG icon value for the marker. If it's a string then it's the path code for the SVG icon.
title	string		The title for the marker. If a custom tooltip is not used, this will show as a default tooltip on the marker.
tooltip	TooltipValue		The tooltip for the marker. This will show when hovering over the marker.

Events

All of the Google Map marker events can used. Below are the marker events specific to this library.

Event	Description
ready	The marker is loaded and ready for use.

Properties

• Properties inherited from Layer.

Property	Type	Description
anchorPoint	PointValue	The offset from the marker's position to the tip of an InfoWindow that has been opened with the marker as anchor.
cursor	string	The cursor type to show on hover.
data	CustomData	An object that holds custom data to attach to the marker object.
draggable	boolean	Whether the marker can be dragged on the map.
icon	Icon	The icon value for the marker.
label	string or MarkerLabel	The label for the marker.
map	Map	The map that the marker should show on.
position	LatLng	The Marker position
title	string	The title for the marker. If a custom tooltip is not used, this will show as a default tooltip on the marker.

Methods

• Methods inherited from Layer.
• Methods inherited from Evented.
• Methods inherited from Base

display

display(map: Map): Marker

Add the marker to the map and display it. This is an alias to show().

Parameter	Type	Required	Description
map	Map	Yes	The map object

marker.display();

getData

getData(key?: string): any

Gets either all the custom data attached to the marker object or the value for a specific data key from the custom data object.

If the key is specified but the value doesn't exist in the custom data object, then null is returned.

Parameter	Type	Required	Description
key	string	No	The object key to get a specific piece of data from the custom data obect. If this is not set then the entire custom data object is returned.

Get the entire data object.

const customData = marker.getData();

Get a specific value from the custom data object.

const customValue = marker.getData('dataKey');

getDraggable

getDraggable(): boolean

Returns whether the marker can be dragged on the map.

if (marker.getDraggable()) {
    // Do something
}

getPosition

getPosition(): LatLng

Get the marker position

const position = marker.getPosition();

hide

hide(): Marker

Remove the marker from the map to hide it.

marker.hide();

onAnimationChanged

onAnimationChanged(callback: EventCallback): void

Callback for when the marker's animation changes.

This is a convenience function for marker.on(G.MarkerEvents.ANIMATION_CHANGED, callback).

Parameter	Type	Required	Description
callback	Function	Yes	The callback function that will be called when the event is dispatched.

marker.onAnimationChanged(() => {
    // Do something
})

onClick

onClick(callback: EventCallback): void

Callback for when the marker icon is clicked.

This is a convenience function for marker.on(G.MarkerEvents.CLICK, callback).

Parameter	Type	Required	Description
callback	Function	Yes	The callback function that will be called when the event is dispatched.

marker.onClick(() => {
    // Do something
})

onClickableChanged

onClickableChanged(callback: EventCallback): void

Callback for when the marker clickable property changes.

This is a convenience function for marker.on(G.MarkerEvents.CLICKABLE_CHANGED, callback).

Parameter	Type	Required	Description
callback	Function	Yes	The callback function that will be called when the event is dispatched.

marker.onClickableChanged(() => {
    // Do something
})

onContextMenu

onContextMenu(callback: EventCallback): void

Callback for when the DOM contextmenu is fired on the marker.

This is a convenience function for marker.on(G.MarkerEvents.CONTEXT_MENU, callback).

Parameter	Type	Required	Description
callback	Function	Yes	The callback function that will be called when the event is dispatched.

marker.onContextMenu(() => {
    // Do something
})

onCursorChanged

onCursorChanged(callback: EventCallback): void

Callback for when the marker cursor property changes.

This is a convenience function for marker.on(G.MarkerEvents.CURSOR_CHANGED, callback).

Parameter	Type	Required	Description
callback	Function	Yes	The callback function that will be called when the event is dispatched.

marker.onCursorChanged(() => {
    // Do something
})

onDblClick

onDblClick(callback: EventCallback): void

Callback for when the arker is double clicked.

This is a convenience function for marker.on(G.MarkerEvents.DBLCLICK, callback).

Parameter	Type	Required	Description
callback	Function	Yes	The callback function that will be called when the event is dispatched.

marker.onDblClick(() => {
    // Do something
})

onDrag

onDrag(callback: EventCallback): void

Callback for when the user drags the marker.

This is a convenience function for marker.on(G.MarkerEvents.DRAG, callback).

Parameter	Type	Required	Description
callback	Function	Yes	The callback function that will be called when the event is dispatched.

marker.onDrag(() => {
    // Do something
})

onDragEnd

onDragEnd(callback: EventCallback): void

Callback for when the user stops dragging the marker.

This is a convenience function for marker.on(G.MarkerEvents.DRAG_END, callback).

Parameter	Type	Required	Description
callback	Function	Yes	The callback function that will be called when the event is dispatched.

marker.onDragEnd(() => {
    // Do something
})

onDraggableChanged

onDraggableChanged(callback: EventCallback): void

Callback for when the marker draggable property changes.

This is a convenience function for marker.on(G.MarkerEvents.DRAGGABLE_CHANGED, callback).

Parameter	Type	Required	Description
callback	Function	Yes	The callback function that will be called when the event is dispatched.

marker.onDraggableChanged(() => {
    // Do something
})

onDragStart

onDragStart(callback: EventCallback): void

Callback for when the user stops dragging the marker.

This is a convenience function for marker.on(G.MarkerEvents.DRAG_START, callback).

Parameter	Type	Required	Description
callback	Function	Yes	The callback function that will be called when the event is dispatched.

marker.onDragStart(() => {
    // Do something
})

onFlatChanged

onFlatChanged(callback: EventCallback): void

Callback for when the marker flat property changes.

This is a convenience function for marker.on(G.MarkerEvents.FLAT_CHANGED, callback).

Parameter	Type	Required	Description
callback	Function	Yes	The callback function that will be called when the event is dispatched.

marker.onFlatChanged(() => {
    // Do something
})

onIconChanged

onIconChanged(callback: EventCallback): void

Callback for when the marker icon property changes.

This is a convenience function for marker.on(G.MarkerEvents.ICON_CHANGED, callback).

Parameter	Type	Required	Description
callback	Function	Yes	The callback function that will be called when the event is dispatched.

marker.onIconChanged(() => {
    // Do something
})

onMouseDown

onMouseDown(callback: EventCallback): void

Callback for when the when the user's mouse is pressed down on the marker.

This is a convenience function for marker.on(G.MarkerEvents.MOUSE_DOWN, callback).

Parameter	Type	Required	Description
callback	Function	Yes	The callback function that will be called when the event is dispatched.

marker.onMouseDown(() => {
    // Do something
})

onMouseMove

onMouseMove(callback: EventCallback): void

Callback for when the when the user's mouse moves over the marker icon.

This is a convenience function for marker.on(G.MarkerEvents.MOUSE_MOVE, callback).

Parameter	Type	Required	Description
callback	Function	Yes	The callback function that will be called when the event is dispatched.

marker.onMouseMove(() => {
    // Do something
})

onMouseOut

onMouseOut(callback: EventCallback): void

Callback for when the when the user's mouse exits the marker icon.

This is a convenience function for marker.on(G.MarkerEvents.MOUSE_OUT, callback).

Parameter	Type	Required	Description
callback	Function	Yes	The callback function that will be called when the event is dispatched.

marker.onMouseOut(() => {
    // Do something
})

onMouseOver

onMouseOver(callback: EventCallback): void

Callback for when the when the user's mouse enters the marker icon.

This is a convenience function for marker.on(G.MarkerEvents.MOUSE_OVER, callback).

Parameter	Type	Required	Description
callback	Function	Yes	The callback function that will be called when the event is dispatched.

marker.onMouseOver(() => {
    // Do something
})

onMouseUp

onMouseUp(callback: EventCallback): void

Callback for the mouseup event on the marker.

This is a convenience function for marker.on(G.MarkerEvents.MOUSE_UP, callback).

Parameter	Type	Required	Description
callback	Function	Yes	The callback function that will be called when the event is dispatched.

marker.onMouseUp(() => {
    // Do something
})

onPositionChanged

onPositionChanged(callback: EventCallback): void

Callback for when the marker's position property changes.

This is a convenience function for marker.on(G.MarkerEvents.POSITION_CHANGED, callback).

Parameter	Type	Required	Description
callback	Function	Yes	The callback function that will be called when the event is dispatched.

marker.onPositionChanged(() => {
    // Do something
})

onReady

onReady(callback: EventCallback): void

Callback for when the marker is loaded and ready for use.

This is a convenience function for marker.on(G.MarkerEvents.READY, callback).

Parameter	Type	Required	Description
callback	Function	Yes	The callback function that will be called when the event is dispatched.

marker.onReady(() => {
    // Do something
})

onShapeChanged

onShapeChanged(callback: EventCallback): void

Callback for when the marker's shape property changes.

This is a convenience function for marker.on(G.MarkerEvents.SHAPE_CHANGED, callback).

Parameter	Type	Required	Description
callback	Function	Yes	The callback function that will be called when the event is dispatched.

marker.onShapeChanged(() => {
    // Do something
})

onTitleChanged

onTitleChanged(callback: EventCallback): void

Callback for when the marker's title property changes.

This is a convenience function for marker.on(G.MarkerEvents.TITLE_CHANGED, callback).

Parameter	Type	Required	Description
callback	Function	Yes	The callback function that will be called when the event is dispatched.

marker.onTitleChanged(() => {
    // Do something
})

onVisibleChanged

onVisibleChanged(callback: EventCallback): void

Callback for when the marker's visible property changes.

This is a convenience function for marker.on(G.MarkerEvents.VISIBLE_CHANGED, callback).

Parameter	Type	Required	Description
callback	Function	Yes	The callback function that will be called when the event is dispatched.

marker.onVisibleChanged(() => {
    // Do something
})

onZIndexChanged

onZIndexChanged(callback: EventCallback): void

Callback for when the marker's zindex property changes.

This is a convenience function for marker.on(G.MarkerEvents.ZINDEX_CHANGED, callback).

Parameter	Type	Required	Description
callback	Function	Yes	The callback function that will be called when the event is dispatched.

marker.onZIndexChanged(() => {
    // Do something
})

setAnchorPoint

setAnchorPoint(value: PointValue): Promise<Marker>

Set the anchor point for the marker.

Parameter	Type	Required	Description
value	PointValue	Yes	The offset from the marker's position to the tip of an InfoWindow that has been opened with the marker as anchor.

marker.setAnchorPoint([3, 10]);

setAnchorPointSync

setAnchorPoint(value: PointValue): Promise<Marker>

Set the anchor point for the marker syncronously.

Only use this if you know that the Google Maps library is already loaded and you have to set up the marker syncronously. If you don't have to set up the marker syncronously, then use setAnchorPoint() instead or pass the anchor option to the constructor or setOptions().

Parameter	Type	Required	Description
value	PointValue	Yes	The offset from the marker's position to the tip of an InfoWindow that has been opened with the marker as anchor.

marker.setAnchorPointSync([3, 10]);

setCursor

setCursor(value: string): Promise<Marker>

Set the mouse cursor type to show when hovering over the marker.

Parameter	Type	Required	Description
value	string	Yes	The mouse cursor type.

marker.setCursor('help');

setCursorSync

setCursorSync(value: string): Marker

Syncronously set the mouse cursor type to show when hovering over the marker.

Only use this if you know that the Google Maps library is already loaded and you have to set up the marker syncronously. If you don't have to set up the marker syncronously, then use setCursor() instead or pass the cursor option to the constructor or setOptions().

Parameter	Type	Required	Description
value	string	Yes	The mouse cursor type.

marker.setCursorSync('help');

setDraggable

setDraggable(value: boolean): Promise<Marker>

Set whether the marker can be dragged on the map.

Parameter	Type	Required	Description
value	boolean	Yes	Whether the marker can be dragged on the map.

marker.setDraggable(true);

setDraggableSync

setDraggableSync(value: boolean): Marker

Syncronously set whether the marker can be dragged on the map.

Only use this if you know that the Google Maps library is already loaded and you have to set up the marker syncronously. If you don't have to set up the marker syncronously, then use setDraggable() instead or pass the draggable option to the constructor or setOptions().

Parameter	Type	Required	Description
value	boolean	Yes	Whether the marker can be dragged on the map.

marker.setDraggableSync(true);

setIcon

setIcon(value: Icon | SvgSymbol | string): Promise<Marker>

Set the icon value for the marker.

Parameter	Type	Required	Description
value	Icon, SvgSymbol, or string	Yes	The icon for the marker.

If value is a string then it should be a URL to the image to use for the icon.

Set the icon using an Icon object:

const icon = G.icon({
    url: 'https://mywebsite.com/images/marker.png',
    size: [20, 32]
});
marker.setIcon(icon);

Set the icon using an SvgSymbol object:

const icon = G.svgSymbol({
    path: 'M0,6a6,6 0 1,0 12,0a6,6 0 1,0 -12,0',
    fillColor: '#5284ed',
    fillOpacity: 1,
    scale: 1,
    strokeColor: '#5284ed',
    strokeOpacity: 0.5,
    strokeWeight: 4,
});
marker.setIcon(icon);

Set the icon value using a URL string:

marker.setIcon('https://mywebsite.com/images/marker.png');

setIconSync

setIconSync(value: Icon | SvgSymbol | string): Marker

Syncronously set the icon value for the marker.

Only use this if you know that the Google Maps library is already loaded and you have to set up the marker syncronously. If you don't have to set up the marker syncronously, then use setIcon() instead or pass the icon option to the constructor or setOptions().

Parameter	Type	Required	Description
value	Icon, SvgSymbol, or string	Yes	The icon for the marker.

If value is a string then it should be a URL to the image to use for the icon.

Set the icon using an Icon object:

const icon = G.icon({
    url: 'https://mywebsite.com/images/marker.png',
    size: [20, 32]
});
marker.setIconSync(icon);

Set the icon using an SvgSymbol object:

const icon = G.svgSymbol({
    path: 'M0,6a6,6 0 1,0 12,0a6,6 0 1,0 -12,0',
    fillColor: '#5284ed',
    fillOpacity: 1,
    scale: 1,
    strokeColor: '#5284ed',
    strokeOpacity: 0.5,
    strokeWeight: 4,
});
marker.setIconSync(icon);

Set the icon value using a URL string:

marker.setIconSync('https://mywebsite.com/images/marker.png');

setLabel

setLabel(value: string | number | MarkerLabel): Promise<Marker>

Set the label value for the marker.

Parameter	Type	Required	Description
value	string, number, or MarkerLabel	Yes	The label for the marker.

Set the label as a string:

marker.setLabel('Marker label');

Set the label as a number:

marker.setLabel(15);

Set the label as a MarkerLabel object:

marker.setLabel({
    className: 'myLabelClass',
    fontSize: '18px',
    text: 'Label text here'
});

setLabelSync

setLabelSync(value: string | number | MarkerLabel): Marker

Syncronously set the label value for the marker.

Only use this if you know that the Google Maps library is already loaded and you have to set up the marker syncronously. If you don't have to set up the marker syncronously, then use setLabel() instead or pass the label option to the constructor or setOptions().

Parameter	Type	Required	Description
value	string, number, or MarkerLabel	Yes	The label for the marker.

Set the label as a string:

marker.setLabelSync('Marker label');

Set the label as a number:

marker.setLabelSync(15);

Set the label as a MarkerLabel object:

marker.setLabelSync({
    className: 'myLabelClass',
    fontSize: '18px',
    text: 'Label text here'
});

setMap

setMap(map: Map): Promise<Marker>

Add the marker to the map and display it. This is an alias to show().

Parameter	Type	Required	Description
map	Map	Yes	The map object

marker.setMap(map);

setMapSync

setMapSync(map: Map): Marker

Syncronously add the marker to the map and display it. This is an alias to show().

Only use this if you know that the Google Maps library is already loaded and you have to set up the marker syncronously. If you don't have to set up the marker syncronously, then use setMap() instead or pass the map option to the constructor or setOptions().

Parameter	Type	Required	Description
map	Map	Yes	The map object

marker.setMapSync(map);

setOptions

setOptions(options: MarkerOptions): Marker

Set the options for the marker.

Parameter	Type	Required	Description
options	MarkerOptions	Yes	The marker options.

marker.setOptions({position: [38.6270, 90.1994]});

setPosition

setPosition(value: LatLngValue): Promise<Marker>

Set the position of the marker.

Parameter	Type	Required	Description
value	LatLngValue	Yes	The marker position.

marker.setPosition([49.864716, 2.6522]);

setPositionSync

setPositionSync(value: LatLngValue): Marker

Syncronously set the position of the marker.

Only use this if you know that the Google Maps library is already loaded and you have to set up the marker syncronously. If you don't have to set up the marker syncronously, then use setPosition() instead or pass the position option to the constructor or setOptions().

Parameter	Type	Required	Description
value	LatLngValue	Yes	The marker position.

marker.setPositionSync([49.864716, 2.6522]);

setTitle

setTitle(value: string): Promise<Marker>

Set the title for the marker.

Parameter	Type	Required	Description
value	string	Yes	The marker title.

marker.setTitle('Marker title');

setTitleSync

setTitleSync(value: string): Marker

Syncronously set the title of the marker.

Only use this if you know that the Google Maps library is already loaded and you have to set up the marker syncronously. If you don't have to set up the marker syncronously, then use setTitle() instead or pass the title option to the constructor or setOptions().

Parameter	Type	Required	Description
value	string	Yes	The marker title.

marker.setTitleSync('Marker title');

show

show(map: Map): Promise<Marker>

Add the marker to the map and display it. This is an alias to setMap.

Parameter	Type	Required	Description
map	Map	Yes	The map object

marker.show(map);

toGoogle

toGoogle(): Promise<google.maps.Marker>

Returns the Google Maps Marker object. It will be a promise value.

marker.toGoogle().then((googleMarker) => {
    // Do something with the Google marker object
});

toGoogleSync

toGoogleSync(): google.maps.Marker

Syncronously returns the Google Maps Marker object.

This is different from toGoogle() because it will throw an error if the Google Maps library is not available, whereas toGoogle() will wait for the Google Maps library to load. (This is the same with all of the Sync versions of the marker methods.)

Only use this when you have to get the Google Maps object synchronously and you know that the Google Maps library is already loaded. If you don't have to get the Google Maps object synchronously, then use toGoogle() instead.

const googleMarker = marker.toGoogleSync();