JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<style>
html, body, #map_canvas {
    margin: 0;
    padding: 0;
    height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
$(function() {
    var LatLng = new google.maps.LatLng(37.4419, -122.1419),
        marker,
        mapOptions = {
            center: LatLng,
            zoom: 16,
            minZoom:12,
            maxZoom:18,
            panControl:false,
            scrollwheel: false,
            rotateControl:false,
            streetViewControl:false,
            keyboardShortcuts:false,
            mapTypeControl: false,
            scaleControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        },
        Gmap = new google.maps.Map($('#map_canvas').get(0), mapOptions);
        //Gmap.setOptions({draggable:false});
        var position;
        var infowindow = new google.maps.InfoWindow();
        var pos;
    google.maps.event.addListener(Gmap, 'dragstart', function(e) {
                 pos=this.position;
                 e.stopPropagation();
            });
            google.maps.event.addListener(Gmap, 'dragend', function() {
                 alert('Drag ended.');
                 //Gmap.setOptions({draggable:true});
            });
    google.maps.event.addListener(Gmap, 'click', function(e) {
        if (marker) {
            marker.setPosition(e.latLng);
        } else {
            marker = new google.maps.Marker({
                position: e.latLng,
                map: Gmap,
                draggable:true
            });
            
            google.maps.event.addListener(marker, 'dragend', function() {
                 alert('Show something');
            });
        }
        
       ...