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="info"></div>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
<div id="myinfo" class="info">
    <p>I am a div on top of a google map ..</p>
</div>

CSS

html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}
div.info {
    position: absolute;
    z-index: 999;
    width: 200px;
    height: 50px;
    display: none;
    background-color: #fff;
    border: 3px solid #ebebeb;
    padding: 10px;
}

JavaScript

var geocoder;
var map;
var overlay;

function initialize() {
    var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var marker = new google.maps.Marker({
        map: map,
        draggable: true,
        position: map.getCenter()
    });

    google.maps.event.addListener(map, 'projection_changed', function () {
        overlay = new google.maps.OverlayView();
        overlay.draw = function () {};
        overlay.setMap(map);

        var info = document.getElementById('myinfo');
        google.maps.event.addListener(marker, 'click', function (e) {
           var point = overlay.getProjection().fromLatLngToDivPixel(e.latLng); 
            var point2 = overlay.getProjection().fromLatLngToContainerPixel(e.latLng); 
            document.getElementById('info').innerHTML = "click:"+e.latLng.toUrlValue(6)+"<br>pointD:"+point.x+","+point.y+"<br>pointC"+point2.x+","+point2.y;
                info.style.left = (point2.x - 100)+ 'px';
                info.style.top = (point2.y - 60) + 'px';
                info.style.display = 'block';
        });
        google.maps.event.addListener(map, 'center_changed', function (e) {
           var point = overlay.getProjection().fromLatLngToDivPixel(marker.getPosition()); 
            var point2 = overlay.getProjection().fromLatLngToContainerPixel(marker.getPosition()); 
            document.getElementById('info').innerHTML = "marker:"+marker.getPosition().toUrlValue(6)+"<br>pointD:"+point.x+","+point.y+"<br>pointC"+point2.x+","+point2.y;
                info.style.left = (point2.x - 100)+ 'px';
                info.style.top = (point2.y - 60) + 'px';
                info.style.display = 'block';
        });
                google.maps.event.addListener(marker, 'drag', function (e) {
           var point =...