JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css">
<div id='map'>
</div>
<script>
var toGmap =  function(lng,lat){
window.open("https://www.google.com/maps/@"+lat+","+lng+",7174m/data=!3m1!1e3", '_blank');
return false;
}
</script>

CSS

body {
          margin: 0;
          padding: 0;
        }
        
        #map {
          position: absolute;
          top: 0;
          bottom: 0;
          width: 100%;
        }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoidW5lcGdyaWQiLCJhIjoiY2lrd293Z3RhMDAzNHd4bTR4YjE4MHM0byJ9.9c-Yt3p0aKFSO2tX6CR26Q';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/satellite-v9',
  center: [-76.7421,5.2269],
  zoom: 12
});




map.on('load', function() {

var popup = new mapboxgl.Popup({closeOnClick: false})
    .setLngLat([-76.7421,5.2269])
    .setHTML('<a href="" onclick="toGmap(-76.7421,5.2269)">Open in google maps</a>')
    .addTo(map);
});