mapbox-3.html

<head>
    <meta charset="UTF-8">
    <title>Mapbox - 1</title>
    <!-- Mapbox CSS -->
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet'/>

    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.css' rel='stylesheet'/>


    <!-- Custom CSS -->
    <style>
        #map {
            /* the width and height may be set to any size */
            width: 100%;
            height: 700px;
        }
    </style>
    <script src="js/keys.js" type="text/javascript"></script>
    <script src="js/mapbox-utils.js"></script>

</head>
<body>

<div id='map' style='width: 100%; height: 600px;'></div>

<!-- Custom JS -->
<script>

    /** Washington */
    mapboxgl.accessToken = mapboxToken;

    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        zoom: 8,
        center: [-77.0369, 38.9072]
    });


    /** Add pop up */
    var lPopup = new mapboxgl.Popup()
        .setHTML("<h3>Lincoln Memorial!</h3>");
        // .addTo(map);

    // marker.setPopup(linconPopup);


    /** Set the marker */
    var marker = new mapboxgl.Marker()
    .setLngLat([-77.0502, 38.8893])
    .setPopup(lPopup)
    .addTo(map);

    marker.togglePopup();


</script>
</body>
</html>