JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;extension=.js"></script>

<table>
    <tr>
        <td>Latitude:</td>
        <td>Longitude:</td>
    </tr>
    <tr>
        <td>
            <input name="LatitudeTextBox" type="text" value="33.976222" id="LatitudeTextBox" />
        </td>
        <td>
            <input name="LongitudeTextBox" type="text" value="-118.281698" id="LongitudeTextBox" />
        </td>
    </tr>
</table>
<div id="map_canvas" style="width: 300px; height: 300px"></div>

JavaScript

var map;
var marker;
var latitudeTextBox = $("#LatitudeTextBox");
var longitudeTextBox = $("#LongitudeTextBox");

jQuery(document).ready(function () {
    var centerLatlng = new google.maps.LatLng(33.976222, -118.281698);

    var mapOptions = {
        zoom: 10,
        center: centerLatlng,
        scrollwheel: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DEFAULT
        },
        navigationControl: true,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.DEFAULT
        }
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    // Edit existing location so that we need to display

    // Display default marker
    marker = new google.maps.Marker({
        draggable: true,
        map: map,
        position: centerLatlng
    });

    // After dragging, updates both Lat and Lng.
    google.maps.event.addListener(marker, 'dragend', function () {
        var curLatLng = marker.getPosition();
        latitudeTextBox.val(curLatLng.lat());
        longitudeTextBox.val(curLatLng.lng());
    });

    google.maps.event.trigger(marker, "click");
});