Rails 5：Google地图显示为灰色

Question

I have implemented a google map inside a tab, where a user can click on the map and get the address. The only issue I'm having is that when the page is loaded the map appears grey and only after I resize the browser window the map shows correctly. Any ideas why this is happening?

This is the setup I have:

#map_canvas
  height: 300px
  width: 100%
  margin: 0px
  padding: 0px


<div id="map_canvas"></div>
<script>
var map;
var geocoder;
var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP };

function initialize() {
    var myOptions = {
        center: new google.maps.LatLng(38.89103282648849, -97.646484375),
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    geocoder = new google.maps.Geocoder();
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(event.latLng);
    });

    var marker;
    function placeMarker(location) {
        if(marker){ //on vérifie si le marqueur existe
            marker.setPosition(location); //on change sa position
        }else{
            marker = new google.maps.Marker({ //on créé le marqueur
                position: location,
                map: map
            });
        }
        document.getElementById('lat').value=location.lat();
        document.getElementById('lng').value=location.lng();
        getAddress(location);
    }

    function getAddress(latLng) {
        geocoder.geocode( {'latLng': latLng},
            function(results, status) {
                if(status = google.maps.GeocoderStatus.OK) {
                    if(results[0]) {
                        document.getElementById("address").value = results[0].formatted_address;
                    }
                    else {
                        document.getElementById("address").value = "No results";
                    }
                }
                else {
                    document.getElementById("address").value = status;
                }
            });
    }
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Update 1

The map is inside a tab and this is where I'm trying to fit the resize :

<script>
$('#tabs').on('click','.tablink,#prodTabs a',function (e) {
    e.preventDefault();
    var url = $(this).attr("data-url");

    if (typeof url !== "undefined") {
        var pane = $(this), href = this.hash;

        // ajax load from data-url
        $(href).load(url,function(result){
            pane.tab('show');
            google.maps.event.trigger(map, 'resize');
        });
    } else {
        $(this).tab('show');
    }
});
</script>

Answer 1

只需在地图初始化结束时触发调整大小，它就可以工作。

google.maps.event.trigger(map, 'resize');