JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<div id="pin"></div>
<div id="map"></div>

CSS

body {
    margin: 0;
    padding: 0;
}

#map {
    position: absolute;
    overflow: auto;
    top: 0;
    left: 0px;
    right: 0;
    bottom: 0;
    z-index: 0;
}

#pin {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 40px;
    margin-top: -36px;
    margin-left: -8px;
    background: url('http://i.imgur.com/XxcyUAg.png') no-repeat center center;
    background-size: 30px 40px;
    z-index: 1;
    pointer-events: none; /*allows dragging even on pin*/
}

JavaScript

$(document).ready(function() { 
    var map;

    var center = new google.maps.LatLng(30.267153, -97.743061);
    
    var mapOptions = {
        center: center,
        zoom: 13,
        styles: [{"featureType": "poi", "stylers": [{ "visibility": "off" }]},{"featureType": "transit","stylers": [{ "visibility": "off" }]}],
        disableDefaultUI: true,
        disableDoubleClickZoom: true
    };
    
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
    
    
    
    google.maps.event.addListener(map, 'dragend', function() {
        center = map.getCenter();
        updateLocation(center);
    });
    
    google.maps.event.addListener(map, 'zoom_changed', function() {
        map.setOptions({draggable: false});
    });
    
    google.maps.event.addListener(map, 'mouseup', function() {
        map.setOptions({draggable: true});
    });
    
    
    function updateLocation(position) {
        latLng = new google.maps.LatLng(position.lat(), position.lng());
        console.log(latLng);
    }
    
});