JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<div id="coordinates"></div>

CSS

html, body, #map_canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}

JavaScript

function initialize() {
    var crosshairShape = {
        coords: [0, 0, 0, 0],
        type: 'rect'
    };
    var latlng = new google.maps.LatLng(54.62279178711505, -5.895538330078125);
    var myOptions = {
        zoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.SATELLITE,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        }
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var marker = new google.maps.Marker({
        map: map,
    });
    document.getElementById('coordinates').innerHTML ="<b>center coordinates</b>: "+ map.getCenter().toUrlValue(6)
    google.maps.event.addListener(map,'center_changed',function() {
        document.getElementById('coordinates').innerHTML ="<b>center coordinates</b>: "+ map.getCenter().toUrlValue(6);
    });
    marker.bindTo('position', map, 'center');
}
google.maps.event.addDomListener(window, 'load', initialize);