Source: https://developers.woosmap.com/products/map-api/guides/infowindows/

> For clean Markdown of any page, append `.md` to the page URL.

> For a complete documentation index, see https://developers.woosmap.com/llms.txt

# Info Window



An [`InfoWindow`](/products/map-api/reference/1.4/#woosmap.map.InfoWindow) displays content in a bubble above the map, at a given latlng position and usually opened upon map events, such as user clicks.

https://demo.woosmap.com/js-samples/samples/infowindow-simple/app/dist/
[](https://demo.woosmap.com/js-samples/samples/infowindow-simple/highlight/highlight.html "Open in new tab with highlighted code")
Try sample 

- [CodeSandbox](https://codesandbox.io/p/devbox/github/woosmap/js-samples/tree/master/dist/samples/infowindow-simple/app?file=index.ts)
- [JsFiddle](https://jsfiddle.net/gh/get/library/pure/woosmap/js-samples/tree/master/dist/samples/infowindow-simple/jsfiddle)
- [Clone on Github](https://github.com/Woosmap/js-samples/tree/sample/infowindow-simple)

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](/products/map-api/reference/1.4/#woosmap.map.InfoWindow) and optionally passing it an [`InfoWindowOptions`](/products/map-api/reference/1.4/#woosmap.map.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.

```javascript
let infoWindow;
infoWindow = new woosmap.map.InfoWindow({content:"<div>Some Content</div>"});
```

```javascript
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.

```typescript
// 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;
```

```javascript
// 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;
```

```css
/*
 * 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
<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.

```javascript
marker.addListener('click', () => {
  infoWindow.open(map, marker);
})
map.addListener('click', () => {
  infoWindow.close();
})
```