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;
    var centerRadius = 100;
    
    var mapOptions = {
        center: new google.maps.LatLng(30.267153, -97.743061),
        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() {
        console.log('drag end', center);
        if (center && center != map.getCenter()) {
            map.setCenter(center);
            center = null;
        }
    });
    
    //we should recenter the map if the click/mousedown was within the centerRadius of the center of the map
    google.maps.event.addListener(map, 'mousedown', function(clickMouseEvent) {
        var mapDiv = document.getElementById('map');
        
        if (pointInCircle(clickMouseEvent.pixel.x, 
                          clickMouseEvent.pixel.y, 
                          mapDiv.offsetWidth/2, 
                          mapDiv.offsetHeight/2, 
                          centerRadius)) { 
            //map.setOptions({draggable: false}); //disables zoom
            center = map.getCenter();
        }
    });
    
    //handy function from http://stackoverflow.com/a/16819053/1861459
    function pointInCircle(x, y, cx, cy, radius) {
        var distancesquared = (x - cx) * (x - cx) + (y - cy) * (y - cy);
        return distancesquared <= radius * radius;
    }
    
});