---
title: "Markers and popups | JavaScript maps SDK"
description: "Add interactive markers and popups to maps."
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Markers and popups

Elements that can be added to the map. The items in this section exist outside of the map’s `canvas` element.

## Marker

Creates a marker component.

**Example**

```js
const marker = new maptilersdk.Marker()
  .setLngLat([30.5, 50.5])
  .addTo(map);
```

```js
// Set options
const marker = new maptilersdk.Marker({
  color: "#FFFFFF",
  draggable: true,
})
  .setLngLat([30.5, 50.5])
  .addTo(map);
```

### API reference

[Class Marker](https://docs.maptiler.com/sdk-js/api-reference/classes/Marker/)

### Related examples

-   [Add custom icons with markers](https://docs.maptiler.com/sdk-js/examples/custom-marker-icons/)
-   [Create a draggable marker](https://docs.maptiler.com/sdk-js/examples/drag-a-marker/)

## ImageViewerMarker

Creates an `ImageViewerMarker` instance. This class behaves similarly to `Marker` but works with image pixels instead of geographic coordinates (latitude and longitude).

**Example**

```js
const marker = new maptilersdk.ImageViewerMarker({})
  .setPosition([10, 20])
  .addTo(imageViewer);
```

```js
// Set options
const marker = new maptilersdk.ImageViewerMarker({
  color: "#FFFFFF",
  draggable: true,
})
  .setPosition([30.5, 50.5])
  .addTo(imageViewer);
```

### API reference

[Class ImageViewerMarker](https://docs.maptiler.com/sdk-js/api-reference/classes/ImageViewerMarker/)

### Related examples

-   [Add markers to a non-georeferenced image](https://docs.maptiler.com/sdk-js/examples/image-viewer-marker/)

## Popup

A popup component.

**Example**

```js
const markerHeight = 50;
const markerRadius = 10;
const linearOffset = 25;

const popupOffsets = {
  'top': [0, 0],
  'top-left': [0, 0],
  'top-right': [0, 0],
  'bottom': [0, -markerHeight],
  'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
  'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
  'left': [markerRadius, (markerHeight - markerRadius) * -1],
  'right': [-markerRadius, (markerHeight - markerRadius) * -1],
};

const popup = new maptilersdk.Popup({ offset: popupOffsets, className: 'my-class' })
  .setLngLat(e.lngLat)
  .setHTML("<h1>Hello World!</h1>")
  .setMaxWidth("300px")
  .addTo(map);
```

### API reference

[Class Popup](https://docs.maptiler.com/sdk-js/api-reference/classes/Popup/)

### Related examples

-   [Display a popup](https://docs.maptiler.com/sdk-js/examples/popup/)
-   [Display a popup on hover](https://docs.maptiler.com/sdk-js/examples/popup-on-hover/)
-   [Display a popup on click](https://docs.maptiler.com/sdk-js/examples/popup-on-click/)
-   [Attach a popup to a marker instance](https://docs.maptiler.com/sdk-js/examples/set-popup/)