JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://developers.google.com/maps/documentation/javascript/examples/default.css">
<div id="panel" style="">
    <input id="searchTextField" type="text" size="50">
    <input type="radio" name="type" id="changetype-all" checked="checked">
    <label for="changetype-all">All</label>
    <input type="radio" name="type" id="changetype-establishment">
    <label for="changetype-establishment">Establishments</label>
    <input type="radio" name="type" id="changetype-geocode">
    <label for="changetype-geocode">Geocodes</lable>
</div>
<div id="map-canvas"></div>
        <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=nearby&key=AIzaSyAH-iGUJdvq7YDcW1As5LH2HSy8eCKr2UY"></script>

CSS

input {
    border: 1px solid rgba(0, 0, 0, 0.5);
}
input.notfound {
    border: 2px solid rgba(255, 0, 0, 0.4);
}
#map-canvas, #map_canvas {
    height: 100%;
    width:100%;
}

JavaScript

var mapOptions = {
        center: new google.maps.LatLng(-33.8688, 151.2195),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    var input = /** @type {HTMLInputElement} */
    (document.getElementById('searchTextField'));
    var autocomplete = new google.maps.places.Autocomplete(input);

    autocomplete.bindTo('bounds', map);

    var infowindow = new google.maps.InfoWindow();
    var marker = new google.maps.Marker({
        map: map
    });

    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        infowindow.close();
        marker.setVisible(false);
        input.className = '';
        var place = autocomplete.getPlace();
        if (!place.geometry) {
            // Inform the user that the place was not found and return.
            input.className = 'notfound';
            return;
        }

        // If the place has a geometry, then present it on a map.
        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17); // Why 17? Because it looks good.
        }
        marker.setIcon( /** @type {google.maps.Icon} */ ({
            url: place.icon,
            size: new google.maps.Size(71, 71),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(17, 34),
            scaledSize: new google.maps.Size(35, 35)
        }));
        marker.setPosition(place.geometry.location);
        marker.setVisible(true);

        var address = '';
        if (place.address_components) {
            address = [
            (place.address_components[0] && place.address_components[0].short_name || ''), (place.address_components[1] && place.address_components[1].short_name || ''), (place.address_components[2] && place.address_components[2].short_name || '')].join('...