Icon

The Icon object sets up the icon for a marker.

Icon extends Base.

Usage example

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

Creating the Icon object

G.icon(url?: string | IconOptions, options?: IconOptions): Icon

There are a few ways to setup the Icon object.

No parameters.

G.icon(): Icon

const icon = G.icon();

Pass the url and options.

G.icon(url: string, options: IconOPtions): Icon

Parameter	Type	Required	Description
url	string	Yes	The URL for the icon image.
options	IconOptions		The icon options.

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

Pass only the options.

G.icon(options: IconOptions): Icon

Parameter	Type	Required	Description
options	IconOptions		The icon options.

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

Pass an existing Icon object.

G.icon(object: Icon): Icon

In this case the Icon object is simply returned.

Parameter	Type	Required	Description
object	Icon	Yes	An Icon object.

const icon = G.icon(iconObject);

IconValue type

When other objects accept an Icon value the value type that they accept is an IconValue.

The IconValue can be one of the following values:

• An Icon object.
• A string (The URL for the icon graphic).
• An IconOptions object.

Icon options

Type IconOptions.

IconOptions is an object containing the configuration options for the Icon object.

Option	Type	Default	Description
anchor	PointValue		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	PointValue		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	PointValue		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	SizeValue		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	string	''	The URL to the icon image (or sprite sheet) itself. All browsers support GIF, JPEG, SVG, and PNG formats. If an SVG is used, the height and width attributtes in the SVG HTML are required. If they are not set then the SVG will not display correctly.

Methods

• Methods inherited from Base.

setAnchor

setAnchor(anchor: PointValue): Icon

Set the position at which to anchor an image in correspondence to the location of the marker on the map.

Parameter	Type	Required	Description
anchor	PointValue	Yes	The anchor point value.

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

Valid value types include:

icon.setAnchor([10, 32]);
icon.setAnchor({x: 10, y: 32});
icon.setAnchor(pointObject);

setLabelOrigin

setLabelOrigin(origin: PointValue): Icon

Set the origin of the label relative to the top-left corner of the icon image, if a label is supplied by the marker.

Parameter	Type	Required	Description
anchor	PointValue	Yes	The label origin value.

icon.setLabelOrigin([10, 32]);
icon.setLabelOrigin({x: 10, y: 32});
icon.setLabelOrigin(pointObject);

setOptions

setOptions(options: IconOptions): Icon

This is an alternate way to set the icon options.

See the icon options section for the available options.

Parameter	Type	Required	Description
options	IconOptions	Yes	The options to set.

icon.setOptions(\{anchor: [0,-10]\});

setOrigin

setOrigin(origin: PointValue): Icon

Set 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).

Parameter	Type	Required	Description
origin	PointValue	Yes	The origin point value.

icon.setOrigin([10, 32]);
icon.setOrigin({x: 10, y: 32});
icon.setOrigin(pointObject);

setScaledSize

setScaledSize(size: SizeValue): Icon

Set the scaled size of the icon. Use this if for some reason you didn't pass the scaled size in the icon options.

Parameter	Type	Required	Description
size	SizeValue	Yes	The size value.

icon.setScaledSize([10, 32]);
icon.setScaledSize({x: 10, y: 32});
icon.setScaledSize(sizeObject);

setSize

setSize(size: SizeValue): Icon

Set the size of the icon. Use this if for some reason you didn't pass the size in the icon options.

Parameter	Type	Required	Description
size	SizeValue	Yes	The size value.

icon.setSize([10, 32]);
icon.setSize({x: 10, y: 32});
icon.setSize(sizeObject);

setUrl

setUrl(url: string): Icon

Parameter	Type	Required	Description
url	string	Yes	The icon URL.

Set the icon URL.

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

toGoogle()

toGoogle(): google.maps.Icon

Returns the icon options as the google.maps.Icon interface.

const googleIcon = icon.toGoogle();