javascript - Google map 插件显示为灰色框(MVC 环境)

Question

我正在尝试，如标题所述，在我正在开发的网站中实现谷歌地图插件，但收效甚微:

map 加载 - 但是，它仍然是灰色的。 map 上的所有其他控件似乎都在工作(单击 Logo 会在正确的纬度/经度 + 缩放位置打开谷歌地图，服务条款按钮工作等)

我在实现中缺少什么想法吗？

HTML:

<div class="tab-pane" id="auctionMap">
     <input type="hidden" value="@Model.Lat" id="lat" />
     <input type="hidden" value="@Model.Long" id="lng" />
     <div id="basic_map" style="width:100%; height:400px;"></div>         
</div>

JS:

<script>
    function initMap() {


      var uluru = {
        lat: parseFloat(document.getElementById('lat').value),
        lng: parseFloat(document.getElementById('lng').value),
      }

        google.maps.visualRefresh = true; 
        var center = new google.maps.LatLng(parseFloat(document.getElementById('lat').value), parseFloat(document.getElementById('lng').value));
        var map = new google.maps.Map(document.getElementById('basic_map'), {
            zoom: 17,
            center: center,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var marker = new google.maps.Marker({
            position: uluru,
            map: map
        });

    }
</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=SECRETKEY&callback=initMap"></script>

** 编辑 **

发现:页面完成加载并显示屏幕上的 map 后运行 initMap 可以正确加载 map 。如果 map 不可见(即选择了另一个选项卡 - 该 map 特别位于 Bootstrap .tab-control 上 - 它保持灰色

Answer 1

请在您的脚本中尝试此操作。

           <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAPKeBYFqGsbfGiH7wvx1mMH9A4I" 
type="text/javascript"></script>