Overlay

The Overlay object is used to help with drawing overlays on the map.

Overlay extends Layer.

Examples of overlays include Popups and Tooltips.

The Overlay object creates a div element that is then populated with content and displayed on the map.

Creating the overlay

You can use the G.overlay() function to get your own overlay object.

G.overlay(): Overlay

const overlay = G.overlay();

Events

Below are the available overlay events

Event	Description
open	Called when the overlay is opened.

open

Called when the overlay is opened.

overlay.on('open', () => {
    // Do something here
});

// You can also use the event constant
overlay.on(G.OverlayEvents.OPEN, () => {
    // Do something here
});

// Or, use the onOpen method
overlay.onOpen(() => {
    // Do something here
});

Properties

Property	Type	Description
className	string	The class name for the overlay element.
offset	[Point]	The x/y offset for the overlay
position	LatLng	The latitude/longitude position of the overlay.
styles	object	An object of CSS styles that will be applied to the overlay element. This is for setting or retrieving all styles. If you need to set an individual style then use the style() method.

const className = overlay.className;
const offset = overlay.offset.
const position = overlay.offset;

overlay.className = 'my-class';
// Or
overlay.className = 'myclass anotherClass';

overlay.offset = G.offset([0, 10]);
// Or
overlay.offset = [0, 10];

overlay.position = G.latlng({ lat: 42.7, lng: -72.9 });
// Or
overlay.position = { lat: 42.7, lng: -72.9 };

tooltip.styles = {backgroundColor: '#ff0000', color: '#fff'}

Methods

• Methods inherited from Layer.

constructor

constructor(objectType: string, testObject: string, testLibrary?: string)

The class object constructor.

Parameter	Type	Required	Description
objectType	string	Yes	The object type. i.e. "map", "marker", "tooltip". Used with the object type tests in Base.
testObject	string	Yes	The camel case object name that is used when testing for the existance of the Google Map library. This should be the name of the object that calls this method.
testLibrary	string		An optional Google maps library class to check for. This needs to be part of the google.maps object. If not set then it's set to testObject.

display

display(map: Map): Promise<Overlay>

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

Parameter	Type	Required	Description
map	Map	Yes	The map object

overlay.display(map);

getContainerLatLngFromPixel

Computes the geographical coordinates from pixel coordinates in the map's container.

This is a shortcut to getting the projection from the overlay and then calling fromContainerPixelToLatLng on the projection with the pixel value.

Parameter	Type	Required	Description
x	number | PointValue	Yes	The x pixel value, or a PointValue.
y	number		The y pixel value if x is a number.

const latLng = mapOverlay.getContainerLatLngFromPixel(xValue, yValue);
const latLng = mapOverlay.getContainerLatLngFromPixel({x: xValue, y: yValue});
const latLng = mapOverlay.getContainerLatLngFromPixel(G.point({x: xValue, y: yValue}));

getDivLatLngFromPixel

Computes the geographical coordinates from pixel coordinates in the div that holds the draggable map.

This is a shortcut to getting the projection from the overlay and then calling fromDivPixelToLatLng on the projection with the pixel value.

Parameter	Type	Required	Description
x	number | PointValue	Yes	The x pixel value, or a PointValue.
y	number		The y pixel value if x is a number.

const latLng = mapOverlay.getDivLatLngFromPixel(xValue, yValue);
const latLng = mapOverlay.getDivLatLngFromPixel({x: xValue, y: yValue});
const latLng = mapOverlay.getDivLatLngFromPixel(G.point({x: xValue, y: yValue}));

getOffset

getOffset(): Point

Get the offset value for the overlay. It returns a Point object.

const offset = overlay.getOffset();

getOverlayElement

getOverlayElement(): HTMLElement

Gets the overlay HTML element that was created in the constructor. The element is a div. This is the container for the content in the overlay.

const overlayElement = overlay.getOverlayElement();

getPosition

getPosition(): LatLng

Get the latitude/longitude position of the overlay.

const position = overlay.getPosition();

getProjection

getProjection(): google.maps.MapCanvasProjection

Gets the MapCanvasProjection object associated with this OverlayView.

The projection is not available until the overlay has been added to the map with setMap or show.

const projection = overlay.getProjection();

hasPosition

hasPosition(): boolean

Returns whether the overlay has a latitude/longitude position set.

if (tooltip.hasPosition()) {
    // Do something
}

hide

hide(): Overlay

Hide the overlay.

overlay.hide();

move

move(position: LatLngValue, map?: Map): Promise<Overlay>

Move the overlay to a new position. If the overlay has not been displayed yet then this will display it.

Parameter	Type	Required	Description
position	LatLngValue	Yes	The latitude/longitude position value.
map	Map		The map object. If not set then an attempt is made to get the map object already assigned to the overlay.

overlay.move({ lat: 40.7, lng: -73.9 });

overlay.move({ lat: 40.7, lng: -73.9 }, map);

onOpen

onOpen(callback: EventCallback): void

Callback for when the overlay is opened.

This is a convenience function for overlay.on(G.OverlayEvents.OPEN, callback).

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

overlay.onOpen(() => {
    // Do something
})

removeClassName

removeClassName(className: string): Overlay

Removes a class name from the overlay element.

Parameter	Type	Required	Description
className	string	Yes	The class name(s) to remove from the overlay element.

overlay.removeClassName('my-class');

If you need to remove multiple class names then separate them with a space.

overlay.removeClassName('my-class another-class');

setClassName

setClassName(className: string): Overlay

Set the class name(s) for the overlay element.

Parameter	Type	Required	Description
className	string	Yes	The class name(s) to set on the overlay element.

overlay.setClassName('my-class');

If you need to add multiple class names then separate them with a space.

overlay.setClassName('my-class another-class');

setMap

setMap(map: Map): Promise<Overlay>

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

Parameter	Type	Required	Description
map	Map	Yes	The map object

overlay.setMap(map);

setOffset

setOffset(offset: PointValue): Overlay

Set the x,y offset for the overlay. This lets you have the offset show a certain number of pixels from it's latitude/longitude position.

Parameter	Type	Required	Description
offset	PointValue	Yes	The x/y offset value.

overlay.setOffset([2, -3]);

setPosition

setPosition(position: LatLngValue): Overlay

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

overlay.setPosition({ lat: 40.7, lng: -73.9 });

show

show(map: Map): Promise<Overlay>

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

Parameter	Type	Required	Description
map	Map	Yes	The map object

overlay.show(map);

style

style(key: string, value: string): Overlay

Add a single style to the overlay wrapper div.

Parameter	Type	Required	Description
name	string	Yes	The style name. For example, color or backgroundColor.

overlay.style('padding', '3px 6px');

toggle

toggle(map: Map): void

Toggle the display of the overlay on the map.

Parameter	Type	Required	Description
map	Map	Yes	The map object

tooltip.toggle(map);