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="float:left; width: 950px; height: 400px; float: left; color:"></div>
<!--<div onclick=scrollToMarker(0)>Pointer 1</div>
  <div onclick=scrollToMarker(1)>Pointer 2</div>
  <div onclick=scrollToMarker(2)>Pointer 3</div>
  <div onclick=scrollToMarker(3)>Pointer 4</div>-->
<form>
    <input type="text" name="address" id="address" value="nebraska"/>
    <input type="button" class="search_button" value="find" onclick="codeAddress();" />
</form>

CSS

html, body, #map-canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}

JavaScript

var geocoder;

function initialize() {
    geocoder = new google.maps.Geocoder();
    var mapOptions = {
        center: {
            lat: 48.509532,
            lng: -122.643852
        },
        zoom: 4
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var locations = [
        ["kl", 40, -118],
        ["gh", 45, -117]
    ];
    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            animation: google.maps.Animation.DROP,
            map: map
        });

        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {

                var content = '';

                infowindow.setContent(content);
                infowindow.open(map, marker);

            }
        })(marker, i));
    }
    
function codeAddress() {
    var address = document.getElementById('address').value;
    geocoder.geocode({
        'address': address
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            // alert(results[0].geometry.location);
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
        } else {
            alert('Please try again: ' + status);
        }
    });
}
    google.maps.event.addDomListener(document.getElementsByClassName('search_button')[0],'click',codeAddress);
}


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