InfoWindow

The InfoWindow object displays an InfoWindow on the map.

InfoWindow extends Layer.

Example usage

The easiest way to display an InfoWindow is to use the attachInfoWindow() method.

const map = G.map('map1', { 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',
    });

    marker.attachInfoWindow('Testing');
});

Alternately, you can display the InfoWindow when the marker is clicked.

const map = G.map('map1', { apiKey: 'my-api-key', center: { latitude: 48.864716, longitude: 2.3522 } });
map.load();
const marker = G.marker({
    latitude: 48.9,
    longitude: 2.4,
    map: map,
    title: 'My Marker',
});
const infoWindow = G.infoWindow({
    content: 'This is a test',
});
marker.on('click', () => {
    infoWindow.show(marker);
});

Creating the InfoWindow object

G.infoWindow(options?: InfoWindowOptions): InfoWindow

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

No parameters.

G.infoWindow(): InfoWindow

const infoWindow = G.infoWindow();

Pass the options.

G.infoWindow(options: InfoWindowOptions): InfoWindow

Parameter	Type	Required	Description
options	InfoWindowOptions	Yes	The options.

const infoWindow = G.infoWindow({content: 'Hello!'});

Pass an existing InfoWindow object.

G.infoWindow(object: LatLngBounds): InfoWindow

In this case the InfoWindow object is simply returned.

Parameter	Type	Required	Description
object	InfoWindow	Yes	A InfoWindow object.

const infoWindow = G.infoWindow(infoWindowObject);

Pass the InfoWindow content.

G.infoWindow(content: string|HTMLElement): InfoWindow

Parameter	Type	Required	Description
content	string or HTMLElement	Yes	The InfoWindow content.

const infoWindow = G.infoWindow('My InfoWindow content');

const content = document.createElement('div');
content.classList.add('myInfoWindowClass');
content.innerHTML = 'This is my InfoWindow';
const infoWindow = G.infoWindow(content);

InfoWindow type

The attachInfoWindow() function and other methods that accept an InfoWindow value accept InfoWindowValue as the value type.

The InfoWindowValue can be one of the following values:

• InfoWindow object
• InfoWindowOptions object
• A string containing the content for the InfoWindow
• An HTMLElement that will be the content for the InfoWindow.

InfoWindow options

Type InfoWindowOptions

Option	Type	Default	Description
ariaLabel	string		The aria label for the InfoWindow.
autoClose	boolean	true	Whether to automatically close other open InfoWindows when opening another one.
content	string or HTMLElement or Text		The content for the InfoWindow.
disableAutoPan	boolean		Whether to disable panning the map to make the InfoWindow fully visible when it shows.
event	string	'click'	The event to trigger the display of the InfoWindow. Allowed values are click, clickon, and hover. This is an alternate way of setting the trigger event than passing the event to attachTo or attachInfoWindow.
maxWidth	number		The maximum width of the InfoWindow, regardless of content's width
minWidth	number		The minimum width of the InfoWindow, regardless of content's width
pixelOffset	Size	[0, -4]	The offset, in pixels, of the tip of the info window from the point on the map at whose geographical coordinates the info window is anchored. If an InfoWindow is opened from an anchor, the pixelOffset will be calculated from the anchor's anchorPoint property.
position	LatLng		The InfoWindow position
zIndex	number		The zIndex of the InfoWindow

Properties

• Properties inherited from Layer.

Option	Type	Description
ariaLabel	string	The aria label for the InfoWindow.
content	string or HTMLElement or Text	The content for the InfoWindow.
disableAutoPan	boolean	Whether to disable panning the map to make the InfoWindow fully visible when it shows.
event	string	The event to trigger the display of the InfoWindow. Allowed values are click, clickon, and hover. This is an alternate way of setting the trigger event than passing the event to attachTo or attachInfoWindow.
maxWidth	number	The maximum width of the InfoWindow, regardless of content's width
minWidth	number	The minimum width of the InfoWindow, regardless of content's width
pixelOffset	Size	The offset, in pixels, of the tip of the info window from the point on the map at whose geographical coordinates the info window is anchored. If an InfoWindow is opened from an anchor, the pixelOffset will be calculated from the anchor's anchorPoint property.
position	LatLng	The InfoWindow position
zIndex	number	The zIndex of the InfoWindow

Methods

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

attachTo

attachTo(element: Map | Layer, event?: string): Promise<InfoWindow>

Attach the InfoWindow to a map or an element that extends the Layer object and show it when hovering the mouse over the element.

Elements that extend Layer include Marker, InfoWindow, and Popup.

Parameter	Type	Default	Required	Description
element	Map or Layer		Yes	The element to attach the InfoWindow to.
event	string	'hover'		The event to trigger the InfoWindow.

Allowed event values include:

• click - Toggle the display of the InfoWindow when clicking on the element.
• clickon - Show the InfoWindow when clicking on the element. It will always be shown and can't be hidden once the element is clicked. This may be useful if you want to show a InfoWindow each time you click on the map.
• hover - Show the InfoWindow when hovering over the element. Hide the InfoWindow when the element is no longer hovered.

const infoWindow = G.infoWindow({
    className: 'my-infoWindow',
    content: 'This is a info window on a marker',
});
infoWindow.attachTo(marker);

const infoWindow = G.infoWindow({
    className: 'my-infoWindow',
    content: 'This is a info window on a map',
});
infoWindow.attachTo(map, 'clickon');

close

close(): InfoWindow

Hides the InfoWindow. Alias to hide().

infoWindow.close();

hasContent

hasContent(): boolean

Returns whether the InfoWindow has any content set.

if (infoWindow.hasContent()) {
    // Do something
}

hide

hide(): InfoWindow

Hides the InfoWindow.

infoWindow.hide();

isOpen

isOpen(): boolean

Returns whether the InfoWindow is open.

if (infoWindow.isOpen()) {
    // Do something
}

open

open(element: Map | Layer): Promise<InfoWindow>

Show the InfoWindow for the element. Alias to show().

Parameter	Type	Required	Description
element	Map or Layer	Yes	The element to show the InfoWindow on.

infoWindow.open(markerObj);

infoWindow.open(mapObj);

setContent

setContent(content: string | Element | Text): InfoWindow

Set the InfoWindow content.

Parameter	Type	Required	Description
content	string or HTMLElement or Text	Yes	The InfoWindow content.

infoWindow.setContent('This is the content');

setOptions

setOptions(options: InfoWindowOptions): InfoWindow

Parameter	Type	Required	Description
options	InfoWindowOptions	Yes	The InfoWindow options.

infoWindow.setOptions({content: 'Hi!'});

setPosition

setPosition(position: LatLngValue): InfoWindow

Set the position of the InfoWindow.

Parameter	Type	Required	Description
position	LatLngValue	Yes	The InfoWindow position.

infoWindow.setPosition([49.864716, 2.6522]);

setZIndex

setZIndex(zIndex: number): InfoWindow

Set the zIndex for the InfoWindow.

Parameter	Type	Required	Description
zIndex	InfoWindowOptions	Yes	The InfoWindow zIndex.

infoWindow.setZIndex(3);

show

show(element: Map | Layer): Promise<InfoWindow>

Shows the InfoWindow for the element.

Parameter	Type	Required	Description
element	Map or Layer	Yes	The element to show the InfoWindow on.

infoWindow.show(markerObj);

infoWindow.show(mapObj);

If a Marker is passed as the element then the marker's position is automatically used to position the InfoWindow about the marker.

marker.on('click', () => {
    infoWindow.show(marker);
});

If a Map is passed as the element then you also need to call setPosition() to set the latitude/longitude position of the InfoWindow.

map.on('click', (e) => {
    infoWindow.setPosition(e.latLng);
    infoWindow.show(map);
});

By default if an InfoWindow is already shown then it'll be hidden automatically. If you want the InfoWindow to show on the map where you click then you'll need to hide it first.

map.on('click', (e) => {
    infoWindow.setPosition(e.latLng);
    infoWindow.hide();
    infoWindow.show(map);
});

If you attach the InfoWindow to the Map or Marker object then the positioning and showing/hiding is handled automatically.

map.attachInfoWindow(infoWindow);

marker.attachInfoWindow(infoWindow);

toggle

toggle(map: Map): void

Toggle the display of the InfoWindow on the map.

Parameter	Type	Required	Description
map	Map	Yes	The map object

infoWindow.toggle(map);

toGoogle

toGoogle(): google.maps.InfoWindow

Returns the Google Maps InfoWindow object.

const googleObject = infoWindow.toGoogle();