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.
async function initMap(): Promise<void> {
await woosmap.map.importLibrary("maps");
await woosmap.map.importLibrary("marker");
// The map, centered at London
const map = (document.getElementById("map") as woosmap.map.MapElement).innerMap;
map.moveCamera({
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 { PinElement } = woosmap.map.marker;
const pin = new PinElement({
background: "#5588FF",
borderColor: "#3D6FE0",
glyphColor: "#FFFFFF",
});
const marker = new woosmap.map.marker.AdvancedMarkerElement({
position: {
lat: 51.515,
lng: -0.13,
},
content: pin.element,
gmpClickable: true,
map,
});
const infoWindow = new woosmap.map.InfoWindow({});
infoWindow.setContent(londonInfoWindowHTML);
infoWindow.open({map, anchor: marker});
marker.addListener("click", () => {
infoWindow.open({map, anchor: marker});
});
}
initMap();
// This example displays a marker at the center of London.
// When the user clicks the marker, an info window opens.
async function initMap() {
await woosmap.map.importLibrary("maps");
await woosmap.map.importLibrary("marker");
// The map, centered at London
const map = document.getElementById("map").innerMap;
map.moveCamera({
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 { PinElement } = woosmap.map.marker;
const pin = new PinElement({
background: "#5588FF",
borderColor: "#3D6FE0",
glyphColor: "#FFFFFF",
});
const marker = new woosmap.map.marker.AdvancedMarkerElement({
position: {
lat: 51.515,
lng: -0.13,
},
content: pin.element,
gmpClickable: true,
map,
});
const infoWindow = new woosmap.map.InfoWindow({});
infoWindow.setContent(londonInfoWindowHTML);
infoWindow.open({ map, anchor: marker });
marker.addListener("click", () => {
infoWindow.open({ map, anchor: marker });
});
}
initMap();
/*
* Always set the map height explicitly to define the size of the element
* that contains the map. `display: block` is required for <wmp-map>/<gmp-map>,
* which default to inline like any other custom element outside a flex/grid
* container (no-op for a plain <div>).
*/
#map {
display: block;
width: 100%;
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 -->
<wmp-map id="map"></wmp-map>
<script>
(g=>{var p,w=window,d=document,l="importLibrary",q="__ib__",e="The Woosmap Maps JavaScript API",o=w.woosmap||(w.woosmap={}),m=o.map||(o.map={}),r=new Set(String(g.libraries||"").split(",").filter(Boolean)),s=new URLSearchParams,u=()=>p||(p=new Promise((f,n)=>{var a=d.createElement("script");s.set("libraries",[...r]+"");for(var k in g)k!="libraries"&&g[k]&&s.set(k,g[k]);s.set("callback","woosmap.map."+q);a.src="https://sdk.woosmap.com/map/map.js?"+s;m[q]=f;a.onerror=()=>n(Error(e+" could not load."));a.nonce=d.querySelector("script[nonce]")?.nonce||"";d.head.append(a)}));m[l]?console.warn(e+" only loads once. Ignoring:",g):m[l]=(f,...n)=>r.add(f)&&u().then(()=>m[l](f,...n))})({
key: "woos-e1e5490b-19d1-34f8-9955-fd5cfc8c880f",
libraries: "marker",
});
</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();
})