

APIキーを取得し以下のコードで地図を表示させると、地図に灰色のカバーがかかってしまいます。

[code]

    <div class="map-area">
        <div id="mapField"></div>
    </div>
    <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false&key=APIキー"></script>
    <script type="text/javascript">
    function mapInit() {
        //サイズ
        document.getElementById("mapField").style.width = "100%";
        document.getElementById("mapField").style.height = "350px";
        //座標
        var centerPosition = new google.maps.LatLng({{$company->lat}},{{$company->lng}});
        var option = {
            //ズーム
            zoom : 13,
            center : centerPosition,
            mapTypeId : google.maps.MapTypeId.ROADMAP
        };
        var googlemap = new google.maps.Map(document.getElementById("mapField"), option);
        //情報ウインドウ
        var marker = new google.maps.Marker({
            position: centerPosition,
            map: googlemap
        });
        var infoWindowOption = {
            position : centerPosition,
            content : "{{$company->name}}",
            pixelOffset: new google.maps.Size(0, -30)
        };
        var infoWindow = new google.maps.InfoWindow(infoWindowOption);
        //infoWindow.open(googlemap);
    }
    mapInit();
    </script>
    
[/code]

[![画像の説明をここに入力](https://i.stack.imgur.com/zFLBT.jpg)](https://i.stack.imgur.com/zFLBT.jpg)

今までこういった表示になったことはないのですが、原因、解決方法がわかる方いらっしゃいますでしょうか。  
どうぞよろしくお願いいたします。

追記：以下の公式のコードも試しましたが、同じように灰色のカバーが表示されました。  
<https://developers.google.com/maps/documentation/javascript/adding-a-google-
map?hl=ja#maps_add_map-css>


CC BY-SA 4.0
2022-03-15T11:10:34.850
86843
2022-03-15T11:54:46.353
2022-03-15T11:54:46.353
3060
14234
question
javascript google-maps
GoogleMapで灰色のカバーが表示される