JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript">
    
    // Handle to our map 
    var map;

    /**
     * Method for initializing the map
     *
     */
    function initialize() {

        var myLatlng = new google.maps.LatLng(-31.397, 150.644);
        var mapOptions = {
            zoom: 10,
            center: myLatlng
        };
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: ''
        });

    }

    /**
     * Method for opening google at other tab, based on current location at map and zoom
     *
     */
    function openGoogleMap() {

        // find out current zoom level
        var zoom = map.getZoom();

        // making the url
        var url = "http://maps.google.com/maps/place/" + 
            map.getCenter().lat() + "," + 
            map.getCenter().lng() + "/@" + 
            map.getCenter().lat() + "," + 
            map.getCenter().lng() + "," +
            zoom + "z";

        // opening map in new tab
        window.open(url);

    }

    google.maps.event.addDomListener(window, 'load', initialize);
    
</script>

<div id="content">
    <div id="map-canvas"></div>
    <button onclick="openGoogleMap()" class="button">View on google maps</button>
</div>

CSS

html, body, #map-canvas, #content {
    height: 600px;
    width: 600px;
    margin: 0px;
    padding: 0px
}
.button {
    padding: 1px; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; 
    box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; 
    border-top-left-radius: 2px; 
    border-top-right-radius: 2px; 
    border-bottom-right-radius: 2px; 
    border-bottom-left-radius: 2px; 
    background-color: white;
    font-size: 12px;
    font-family: Roboto, Arial;
    color: #3a84df;
    padding-bottom: 5px;
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 5px;
    border: 1px solid #CCCCCC;
    position: absolute;
    cursor: pointer;
    top: 4px;
    left: 4px;
}
.button:hover {
    text-decoration: underline;
}