Attach a popup to a marker instance

Attach a Popup to a Marker and display it on click.

<!DOCTYPE html>
    <meta charset='utf-8' />
    <title>Attach a popup to a marker instance</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src=''></script>
    <link href='' rel='stylesheet' />
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }


#marker {
    background-image: url('');
    background-size: cover;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;

.mapboxgl-popup {
    max-width: 200px;


<div id='map'></div>

mapboxgl.accessToken = '<your access token here>';

var monument = [-77.0353, 38.8895];
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    center: monument,
    zoom: 15

// create the popup
var popup = new mapboxgl.Popup({ offset: 25 })
    .setText('Construction on the Washington Monument began in 1848.');

// create DOM element for the marker
var el = document.createElement('div'); = 'marker';

// create the marker
new mapboxgl.Marker(el)
    .setPopup(popup) // sets a popup on this marker


Copy example