Info Window
Used to display content in an overlay that looks like a popup window and is often linked to a marker.
An InfoWindow displays content in a bubble above the map, at a given latlng position and usually opened upon map events, such as user clicks.
Typically you will connect an info window to a marker, but you can also attach it to a specific latitude/longitude.
Create an Info Window
To add an Info Window, you’ll need to create a new instance of woosmap.map.InfoWindow and optionally passing it an InfoWindowOptions object to specify the initial properties for displaying the info window.
The content of the InfoWindow could be set when creating the instance or using the setContent() method. It may contain only text, a string HTML, or a DOM element.
let infoWindow;
infoWindow = new woosmap.map.InfoWindow({content:"<div>Some Content</div>"});
let infoWindow;
infoWindow = new woosmap.map.InfoWindow({});
infoWindow.setContent("<div>Some Content</div>");
You don’t need to create multiple instances of InfoWindow for different markers. Indeed, you can update the content - using setContent() - and position - using setPosition() - as user clicks on the markers.
Open an Info Window
To display an InfoWindow above the Map, call the InfoWindow.open() method passing it the map and a marker (or a latitude/longitude location).
The following example displays a marker at the center of London. When the user clicks the marker, an info window opens.
let map, marker, infoWindow;
const londonInfoWindowHTML = "<div class='info-content'>" +
"<h2>London</h2>" +
"<div class='london-img'></div>" +
"<p>London is the capital and largest city of England and the United Kingdom. <a href='https://en.wikipedia.org/wiki/London'>Wikipedia →</a></p>" +
"</div>";
function initMap() {
map = new woosmap.map.Map(document.getElementById('map'), {
center: {
lat: 51.57,
lng: -0.13
},
zoom: 10
});
marker = new woosmap.map.Marker({
position: {
lat: 51.515,
lng: -0.13
},
icon: {
url: 'https://images.woosmap.com/dot-marker.png'
}
});
marker.setMap(map);
infoWindow = new woosmap.map.InfoWindow({})
infoWindow.setContent(londonInfoWindowHTML);
marker.addListener('click', () => {
infoWindow.open(map, marker);
})
}
Close an InfoWindow
Once opened, an InfoWindow can be closed either when the user clicks the close button at top right or by explicitly calling the close() method.
For example, you can close the InfoWindow when the user clicks outside it on the map.
marker.addListener('click', () => {
infoWindow.open(map, marker);
})
map.addListener('click', () => {
infoWindow.close();
})