Popup

The Popup object displays a custom popup on the map.

Popup extends Overlay.

This is an alternate option to displaying an InfoWindow. You have full style control over a popup.

The easiest way to display a popup is to use the attachPopup() method.

Example usage

 marker = G.marker({
    latitude: 40.730610,
    longitude: -73.935242,
});
marker.attachPopup('My Popup');

G.popup(options?: PopupValue): Popup

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

No parameters.

G.popup(): Popup

const popup = G.popup();

Pass the popup options.

G.popup(options: PopupOptions): Popup

Parameter	Type	Required	Description
options	PopupOptions	Yes	The options.

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

Pass an existing Popup object.

G.popup(object: Popup): Popup

In this case the Popup object is simply returned.

Parameter	Type	Required	Description
object	Popup	Yes	A Popup object.

const popup = G.popup(popupObject);

Pass the popup content.

G.popup(content: string|HTMLElement): Popup

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

const popup = G.popup('My popup content');

const content = document.createElement('div');
content.classList.add('myPopupClass');
content.innerHTML = 'This is my popup';
const popup = G.popup(content);

The attachPopup() function and other methods that accept a popup value accept PopupValue as the value type.

The PopupValue can be one of the following values:

Popup object
PopupOptions object
A string containing the content for the popup
An HTMLElement that will be the content for the popup.

Type PopupOptions

Option	Type	Default	Description
autoClose	boolean	true	Whether to automatically close other open popups when opening this one.
center	boolean	true	Whether to center the popup horizontally on the element. Useful if the popup is on a marker. If this is `true` then `transform: translate(-50%, 0)` is added to the popup container `div`.
className	string		The popup wrapper class name.
clearance	SizeValue	0, 0	The amount of space between the popup and the map viewport edge. This is used when the map is panned to bring the popup into view.
closeElement	string or HTMLElement		The string CSS selector or an HTMLElement representing the element that will close the popup when clicked. See Closing the popup for more information.
content	string, HTMLElement, or Text		The popup content
event	string	'click'	The event to trigger the display of the popup. Allowed values are `click`, `clickon`, and `hover`. This is an alternate way of setting the trigger event than passing the event to attachTo or attachPopup.
fit	boolean	true	Whether to fit the popup within the map bounds when it's displayed. If this is `true` then the map may pan to bring the full popup into view. This will not happen if `event` is `hover` as that can be a jarring experience.
offset	PointValue		The amount to offset the popup from the element it is displayed at. If the element is a Marker, then this is added to the marker's anchorPoint value. For example, if the marker is 40px tall and no anchorPoint value was set for the marker, then by default the popup will be displayed at the top of the marker. If you set the offset to be 0, -20 then the popup will be displayed 20px above the top of the marker. If the element is a marker and this is not set, then the marker's anchorPoint value is used.
styles	object		An object of styles to apply to the popup.
theme	string	'none'	The theme to use for the popup. By default the popup does not have any default styles and you have to use your own. Set to `default` to use the basic default theme. Note, if `center` is `true` then `transform: translate(-50%, -100%)` will still be set to horizontally center the popup on the element.

Events

Below are the available popup events

Event	Description
open	Called when the popup is opened.

open event

Called when the popup is opened.

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

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

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

Properties

Properties inherited from Overlay.
Properties inherited from Layer.

Property	Type	Description
autoClose	boolean	Whether to automatically close other open popups when opening this one
center	boolean	Whether to center the popup horizontally on the element. This does the same as the `center` option.
clearance	SizeValue	The amount of space between the popup and the map viewport edge. This is used when the map is panned to bring the popup into view.
closeElement	string or HTMLElement	The string CSS selector or an HTMLElement representing the element that will close the popup when clicked. See Closing the popup for more information.
content	string, HTMLElement, or Text	The popup content.
event	string	The event to trigger the display of the popup. Allowed values are `click`, `clickon`, and `hover`. This is an alternate way of setting the trigger event than passing the event to attachTo or attachPopup.
fit	boolean	Whether to fit the popup within the map bounds when it's displayed. If this is `true` then the map may pan to bring the full popup into view. This is ignored if `event` is `hover` as that can be a jarring experience.
theme	string	The theme to use for the popup. This does the same as the `theme` option.

Methods

Methods inherited from Overlay.
Methods inherited from Layer.
Methods inherited from Evented.
Methods inherited from Base.

attachTo

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

Attach the Popup 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 Popup to.
event	string	'hover'		The event to trigger the Popup.

Allowed event values include:

click - Toggle the display of the Popup when clicking on the element.
clickon - Show the Popup 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 Popup each time you click on the map.
hover - Show the Popup when hovering over the element. Hide the Popup when the element is no longer hovered.

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

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

close

close(): Popup

Close the popup. Alias to hide().

popup.close();

hasContent

hasContent(): boolean

Returns whether the popup has any content set.

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

hide

hide(): Popup

Close the popup. Alias to close().

popup.hide();

isOpen

isOpen(): boolean

Returns whether the popup is open.

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

open

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

Open the popup attachd to the element. Alias to show().

Parameter	Type	Required	Description
element	Map or Layer	Yes	The element to attach the Popup to.

popup.open(marker);

setCloseElement

setCloseElement(closeElement: HTMLElement | string): Popup

Set the element to close the popup. This can be a CSS selector or an HTMLElement. The popup will be closed when this element is clicked.

See Closing the popup for more information.

Parameter	Type	Required	Description
element	string or HTMLElement	Yes	The element to close the popup. This can be a CSS selector or an HTMLElement.

const popup = G.popup('<p>My popup</p><p><buttton>Close</button></p>');
popup.setCloseElement('button');

setContent

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

Set the popup content.

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

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

setOptions

setOptions(options: PopupOptions): Popup

Parameter	Type	Required	Description
options	PopupOptions	Yes	The popup options.

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

show

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

Open the popup attached to the element. Alias to open().

Parameter	Type	Required	Description
element	Map or Layer	Yes	The element to attach the Popup to.

popup.show(marker);

toggle

toggle(element: Map | Layer): void

Toggle the display of the popup on the map.

Parameter	Type	Required	Description
element	Map or Layer	Yes	The element to attach the Popup to.

infoWindow.toggle(map);

Close all popups

There is a helper function to close all open popups. This is useful if you need to change what is on the map and there is a possibility that a popup may be open.

G.closeAllPopups(): void

Example usage:

G.closeAllPopups();

Example usage​

Creating the Popup object​

Popup type​

Popup options​

Events​

open event​

Properties​

Methods​

attachTo​

close​

hasContent​

hide​

isOpen​

open​

setCloseElement​

setContent​

setOptions​

show​

toggle​

Close all popups​