为什么Google Map会在加载时显示空白灰色div，如果屏幕调整大小为1 px，则地图是否可见？

Question

我试图在我的网页中显示Google Maps JavaScript API。

所有功能都运行正常，但是当地图加载时，我看到灰色的div而不是地图。这就是扭曲，如果我稍微调整浏览器窗口的大小，那么地图就变得可见了。为什么地图在没有调整大小的情况下显示？

HTML (React JSX)

<div className={`col-sm-12 form-group `}>
    <label>Country*</label>
    <select className="form-control" onChange={this.handleCountry}  id="countySel" name="countySel">
        {this.state.country === null ?  <option>Loading...</option> : <option  value="" disabled>--Select A Country--</option>}
        {countryname}
    </select>
    {this.props.country_id_error ?
        <span className="help-block">Country is required.</span>
        : ''}
</div>

<div className={`col-sm-6 form-group ${this.props.city_id_error ? 'has-error' : ''}`}>
    <label>City*</label>
    <select className="form-control" onChange={this.handleCity}  id="citySel">
        {this.state.country === null ?  <option >Loading...</option> : <option  value="">--Select A City--</option>}
        {cityname}
    </select>
    {this.props.city_id_error ?
        <span className="help-block">City is required.</span>
        : ''}
</div>
<div className={`col-sm-6 form-group ${this.props.district_id_error ? 'has-error' : ''}`}>
    <label>District*</label>
    <select className="form-control" id="districtSel" onChange={this.handleDistrict}>
        {this.state.country === null ?  <option >Loading...</option> : <option value="">--Select A District--</option>}
        {districtname}
    </select>
    {this.props.district_id_error ?
        <span className="help-block">District is required.</span>
        : ''}
</div>
<div className="col-sm-12">
    <p className="click-locate-map">
        <a href="javascript:void(0);" id="getlocation">
            Get current location
        </a>
    </p>
    <div className="wrapper">
        <div id="map_canvas">
        </div>
        <input id="pac-input" className="controls" type="text" placeholder="Search Box" />
    </div>
    <input  type="text" id="lat-lng" name="google_coordinates" disabled placeholder=" Insert google coordinates from above map" />
</div>

的 JavaScript

//Get html elements
var countySel = document.getElementById("countySel");
var citySel = document.getElementById("citySel");
var districtSel = document.getElementById("districtSel");

//County Changed
countySel.onchange = function () {
//Render Google Map
    var sel = document.getElementById("countySel");
    var address_city= sel.options[sel.selectedIndex].text;

    var geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': address_city}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();
            var number = latitude + ',' + longitude;
            document.getElementById("lat-lng").value = number;

            var coordinates = {lat: latitude, lng: longitude};
            map = new google.maps.Map(document.getElementById('map_canvas'), {
                zoom: 6,
                center: coordinates,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            addMarker(coordinates);
            map.addListener('click', function(event) {
// remove the previous marker
                deleteMarkers();
// add recently clicked position as a marker
                addMarker(event.latLng);
                var number = event.latLng.lat() + ',' + event.latLng.lng();
                document.getElementById("lat-lng").value = number;
            });
        }
    });

}

//State Changed
citySel.onchange = function () {
//Render Google Map
    var sel = document.getElementById("citySel");
    var address_city= sel.options[sel.selectedIndex].text;
    var address_city_value= sel.options[sel.selectedIndex].value;

    var sel_country = document.getElementById("countySel");
    var address_country= sel_country.options[sel_country.selectedIndex].text;

    // var sel = document.getElementById("countySel");
    // var address_city= sel.options[sel.selectedIndex].text;
    if(address_city_value == ""){
        address_city = address_country
    }else{
        address_city
    }
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': address_city}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();
            var number = latitude + ',' + longitude;
            document.getElementById("lat-lng").value = number;

            var coordinates = {lat: latitude, lng: longitude};
            map = new google.maps.Map(document.getElementById('map_canvas'), {
                zoom: 6,
                center: coordinates,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            addMarker(coordinates);
            map.addListener('click', function(event) {
// remove the previous marker
                deleteMarkers();
// add recently clicked position as a marker
                addMarker(event.latLng);
                var number = event.latLng.lat() + ',' + event.latLng.lng();
                document.getElementById("lat-lng").value = number;
            });
        }
    });
}
districtSel.onchange = function () {
//Render Google Map
    var sel = document.getElementById("districtSel");
    var address_district= sel.options[sel.selectedIndex].text;
    var address_city_value= sel.options[sel.selectedIndex].value;

    var sel_country = document.getElementById("citySel");
    var address_country= sel_country.options[sel_country.selectedIndex].text;



    // var sel = document.getElementById("countySel");
    // var address_city= sel.options[sel.selectedIndex].text;
    if(address_city_value == ""){
        address_district = address_country
    }else{
        address_district
    }

    var geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': address_district}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();
            var number = latitude + ',' + longitude;
            document.getElementById("lat-lng").value = number;

            var coordinates = {lat: latitude, lng: longitude};
            map = new google.maps.Map(document.getElementById('map_canvas'), {
                zoom: 14,
                center: coordinates,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            addMarker(coordinates);
            map.addListener('click', function(event) {
// remove the previous marker
                deleteMarkers();
// add recently clicked position as a marker
                addMarker(event.latLng);
                var number = event.latLng.lat() + ',' + event.latLng.lng();
                document.getElementById("lat-lng").value = number;
            });
        }
    });
}

var map;
var markers = [];
function initialize() {

    searchbox();
    getLocation();

}
google.maps.event.addDomListener(window, "load", initialize);
getLocation();
//on button click get current location
function getLocation() {
    navigator.geolocation.getCurrentPosition(function(location) {
            var coordinates = {lat: location.coords.latitude, lng: location.coords.longitude};
            map = new google.maps.Map(document.getElementById('map_canvas'), {
                center: coordinates,
                zoom: 14,
                streetViewControl: false,
                scaleControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            var number = location.coords.latitude + ',' + location.coords.longitude;
            document.getElementById("lat-lng").value = number;
            addMarker(coordinates);
            map.addListener('click', function(event) {
// remove the previous marker
                deleteMarkers();
// add recently clicked position as a marker
                addMarker(event.latLng);
                var number = event.latLng.lat() + ',' + event.latLng.lng();
                document.getElementById("lat-lng").value = number;
            });
        },
        function (error) {
            if (error.code == error.PERMISSION_DENIED)
                var coordinates = new google.maps.LatLng(24.0133282,40.6055682);
            map = new google.maps.Map(document.getElementById('map_canvas'), {
                center: coordinates,
                zoom: 14,
                streetViewControl: false,
                scaleControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            addMarker(coordinates);
            map.addListener('click', function(event) {
// remove the previous marker
                deleteMarkers();
// add recently clicked position as a marker
                addMarker(event.latLng);
                var number = event.latLng.lat() + ',' + event.latLng.lng();
                document.getElementById("lat-lng").value = number;
            });
        });

}
document.getElementById('getlocation').addEventListener('click', function() {
    getLocation();
});

// window.onload = getLocation;

// Adds a marker to the map and push to the array.
function addMarker(location) {
    var marker = new google.maps.Marker({
        position: location,
        map: map
    });
    markers.push(marker);
}
// Sets the map on all markers in the array.
function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map);
    }
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
    setMapOnAll(null);
}
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
    clearMarkers();
    markers = [];
}
window.onload = searchbox;
function searchbox(){
    var input = document.getElementById('pac-input');
    var searchBox = new google.maps.places.SearchBox(input);

    searchBox.addListener('places_changed', function() {
        var places = searchBox.getPlaces();
        if (places.length == 0) {
            return;
        }
// delete previous marker
        deleteMarkers();
// For each place, get the icon, name and location.
        var bounds = new google.maps.LatLngBounds();
        places.forEach(function(place) {
// Create a marker for each place.
            markers.push(new google.maps.Marker({
                map: map,
                title: place.name,
                position: place.geometry.location
            }));
            var address = place.formatted_address;
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode( { 'address': address}, function(results, status) {

                if (status == google.maps.GeocoderStatus.OK) {
                    var latitude = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();
                    var number = latitude + ',' + longitude;
                    document.getElementById("lat-lng").value = number;
                }
            });
            if (place.geometry.viewport) {
// Only geocodes have viewport.
                bounds.union(place.geometry.viewport);
            } else {
                bounds.extend(place.geometry.location);
            }
        });
        map.fitBounds(bounds);

    });
}