Question

我正按照标题中的说明，在我正在处理的网站上实施谷歌地图插件，但收效甚微：

地图加载 - 但是，它仍然是灰色的。地图上的所有其他控件似乎都有效（单击徽标会在右侧lat / lng +缩放位置打开谷歌地图，服务条款按钮工作等等。）

我的实施中缺少什么想法？

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>

**编辑**

发现：在页面完成加载后，在屏幕上运行initMap屏幕上的VISIBLE正确加载地图。如果地图不可见（即选择了另一个标签 - 这个地图特别是在引导程序.tab-control上 - 它仍然是灰色的

Answer 1

请为您的脚本尝试此操作。

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

Answer 2

Google Maps API需要密钥。

你可以从这里得到一个： https://developers.google.com/maps/documentation/javascript/get-api-key

Answer 3

公平地说，我没有在gostrap标签面板上发布谷歌地图的代码。它最初是不可见/不呈现在屏幕上，我的编辑提供了线索：

发现：在页面加载完成后运行initMap 地图VISIBLE在屏幕上正确加载地图。如果地图不是可见（即选择另一个标签 - 这张地图特别是在 bootstrap .tab-control - 它仍然是灰色的

只需将点击监听器附加到地图所在的选项卡上，然后重新调出initMap()就会再次显示地图，因为此时加载地图的div再次可见，并且要渲染的东西。我值得在这里投票。

谷歌地图插件显示为灰色框（MVC环境）

3 个答案: