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>
<div class="info">
  Click anywhere on the map to get a link to google 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%;
        }
        .info{
          position:absolute;
          top:0px;
          height:30px;
          margin:10px;
          border-radius:5px;
          paddding:10px;
          background-color:#FFF;
          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
});

    function makePopup(lat,lng){
    var popup = new mapboxgl.Popup()
      .setLngLat([lng, lat])
      .setHTML('<a href="" onclick="toGmap(' + lng + ',' + lat + ')">Open in google maps</a>')
      .addTo(map);
}

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



  map.on('click', function(e) {

    lng = e.lngLat.lng;
    lat = e.lngLat.lat;
    makePopup(lat,lng);

  });

  makePopup( 5.2269,-76.7421);

});