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">
  <p>
    Click anywhere on the map to get a link to google map
  </p>
</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: 50px;
  margin: 10px;
  border-radius: 5px;
  paddding: 5px;
  background-color: #FFF;
  width: 100%;
  font-family: arial;
}

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);

});