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>

CSS

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

JavaScript

var geocoder;
var map;
var markersArray = [];

function placeMarkerAndPanTo(latLng, map) {
    var position = latLng;
    console.log(position);
    while (markersArray.length) {
        markersArray.pop().setMap(null);
    }
    var marker = new google.maps.Marker({
        draggable: true,
        position: latLng,
        map: map,
        title: "Select Your Location!"
    });
    map.panTo(latLng);

    markersArray.push(marker);

    google.maps.event.addListener(marker, 'dragend', function (event) {
        var position = event.latLng;
        console.log(position);
    });
}

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
    });

    map.addListener('click', function (e) {
        placeMarkerAndPanTo(e.latLng, map);
    });

}
google.maps.event.addDomListener(window, "load", initialize);