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>
<!-- Map -->
<div id="mapDiv"></div>
<br />
<!-- Destinations -->
<div id="destination1">
    <label class="title">Destination 1:</label>
    <input id="dest-num1" type="text" name="dest1" size="50" />
</div>
<br />
<div id="destination2">
    <label class="title">Destination 2:</label>
    <input id="dest-num2" type="text" name="dest2" size="50" />
</div>
<br />

CSS

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

JavaScript

var map;

function initMap() {
    google.maps.visualRefresh = true;

    var mapOptions = {
        center: new google.maps.LatLng(37.09948, -95.59307),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var mapElement = document.getElementById('mapDiv');

    map = new google.maps.Map(mapElement, mapOptions);

    var markers = [
        ['BHM-Birmingham', 33.56243, -86.75413],
        ['HSV-Huntsville', 34.64033, -86.77569],
        ['PHX-Phoenix', 33.43727, -112.00779],
        ['TUS-Tucson', 32.11451, -110.93923]
    ];

    var infoWindowContent = [
        ['<div class="info_content">' + '<p>Birmingham, AL (BHM - Birmingham-Shuttlesworth Intl)</p>' + '</div>'],
        ['<div class="info_content">' + '<p>Huntsville, AL (HSV - Huntsville Intl)</p>' + '</div>'],
        ['<div class="info_content">' + '<p>Phoenix, AZ (PHX - Phoenix Sky Harbor Intl)</p>' + '</div>'],
        ['<div class="info_content">' + '<p>Tucson, AZ (TUS - Tucson Intl)</p>' + '</div>'], ];

    var infoWindow = new google.maps.InfoWindow(),
        marker, i;

    for (i = 0; i < markers.length; i++) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        // var image = 'images/airportIcon_red.png';
        var marker = new google.maps.Marker({
            position: position,
            map: map,
            // icon: image,
            title: markers[i][0],
            draggable: false,
        });

        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
                var value = $("#dest-num1").val();
                if (!$("#dest-num1").val()) {
                    document.getElementById("dest-num1").value = markers[i][0];
                } else if (!$("#dest-num2").val()) {
                    document.getElementById("dest-num2").value = markers[i][0];
        ...