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.
// This example displays a marker at the center of London.
// When the user clicks the marker, an info window opens.
function initMap(): void {
// The map, centered at London
const map = new woosmap.map.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 10,
center: {
lat: 51.57,
lng: -0.13,
},
},
);
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>";
const marker = new window.woosmap.map.Marker({
position: {
lat: 51.515,
lng: -0.13,
},
icon: {
url: "https://images.woosmap.com/marker.png",
scaledSize: {
height: 50,
width: 32,
},
},
map,
});
const infoWindow = new woosmap.map.InfoWindow({});
infoWindow.setOffset(new woosmap.map.Point(0, -50));
infoWindow.setContent(londonInfoWindowHTML);
infoWindow.open(map, marker.position);
marker.addListener("click", () => {
infoWindow.open(map, marker.getPosition());
});
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
// This example displays a marker at the center of London.
// When the user clicks the marker, an info window opens.
function initMap() {
// The map, centered at London
const map = new woosmap.map.Map(document.getElementById("map"), {
zoom: 10,
center: {
lat: 51.57,
lng: -0.13,
},
});
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>";
const marker = new window.woosmap.map.Marker({
position: {
lat: 51.515,
lng: -0.13,
},
icon: {
url: "https://images.woosmap.com/marker.png",
scaledSize: {
height: 50,
width: 32,
},
},
map,
});
const infoWindow = new woosmap.map.InfoWindow({});
infoWindow.setOffset(new woosmap.map.Point(0, -50));
infoWindow.setContent(londonInfoWindowHTML);
infoWindow.open(map, marker.position);
marker.addListener("click", () => {
infoWindow.open(map, marker.getPosition());
});
}
window.initMap = initMap;
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}
.info-content {
font-size: 14px;
max-width: 300px;
height: 100%;
}
.london-img {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/London_Skyline_%28125508655%29.jpeg/556px-London_Skyline_%28125508655%29.jpeg");
width: 100%;
height: 90px;
background-size: cover;
}
<html>
<head>
<title>InfoWindow Simple</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<!--The div element for the map -->
<div id="map"></div>
<script
src="https://sdk.woosmap.com/map/map.js?key=woos-48c80350-88aa-333e-835a-07f4b658a9a4&callback=initMap"
defer
></script>
</body>
</html>
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();
})
