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>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map-canvas" class="dropit" style="float:left;width:70%;height:100%;"></div>

CSS

html, body, #map-canvas {
          height: 100%;
          margin: 0px;
          padding: 0px;
          width: 1500px;
          margin-left: auto;
          margin-right: auto;
      }

JavaScript

var markers = [];

var map;

var marker;

function initialize() {

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    //CAN REVIEW FOR CURRENT LOCATION
    var mapOptions = {
        zoom: 8,
        mapTypeId: 'roadmap'
    };

    var defaultBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(0, 0));
    map.fitBounds(defaultBounds);

    // Create the search box and link it to the UI element.
    var input = /** @type {HTMLInputElement} */
    (
    document.getElementById('pac-input'));
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

    var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */ (input));

    // [START region_getplaces]
    // Listen for the event fired when the user selects an item from the
    // pick list. Retrieve the matching places for that item.
    google.maps.event.addListener(searchBox, 'places_changed', function () {
        var places = searchBox.getPlaces();

        //Taking input into array
        var item = document.getElementById("pac-input");

        if (places.length == 0) {
            return;
        }

        //for (var i = 0, marker; marker = markers[i]; i++) {
        google.maps.Map.prototype.clearMarkers = function () {
            for (var i = 0; i < this.markers.length; i++) {
                this.markers[i].setMap(null);

                map.setZoom(8);

            }
            this.markers = new Array();
            markers.length = 0;
        }
        // For each place, get the icon, place name, and location.
        markers = [];

        var bounds = new google.maps.LatLngBounds();
        for (var i = 0, place; place = places[i]; i++) {

            // Create a marker for each place.

            var marker = new google.maps.Marker({
                place_id: place.place_id
            });


            //Infowindow
            var infowindow = new google.maps.InfoWindow({
                //content:...