title: Display Lat Lng Coordinates on click on Mapbox GL JS
body: <p>I'm trying to get my mapbox to display coordinates <a href="https://developers.google.com/maps/documentation/javascript/examples/event-click-latlng" rel="nofollow noreferrer">like this Google Map example</a>, with a popup of lat lng coordinates on click. The closest I have gotten is getting a draggable marker which displays the coordinates at the bottom left of the map, if I tried an onclick function, the map just goes blank. How could I get the coordinates to appear as a popup on click?</p>
  <pre><code>var marker = new mapboxgl.Marker({
          draggable: true
      })
      .setLngLat([101.967, 35.431])
      .addTo(map);
  
  function onDragEnd() {
      var lngLat = marker.getLngLat();
  
      coordinates.style.display = 'block';
      coordinates.innerHTML =
          'Longitude: ' + lngLat.lng + '&lt;br /&gt;Latitude: ' + lngLat.lat;
  }
  
  marker.on('dragend', onDragEnd);
  </code></pre>
  <p>And I have css styles for .coordinates for them to display at the bottom left of the screen when the marker is dragged around.
  I know this is a simple question, but I'm totally new to mapbox and coding in general. Would appreciate any help! Thank you!</p>