谷歌地圖插件顯示爲灰色框（MVC環境）

我想，按照所有權聲明，實現谷歌地圖插件安裝到我工作的網站，但收效甚微：谷歌地圖插件顯示爲灰色框（MVC環境）

地圖加載 - 但是，它仍然是灰色的。在地圖上的所有其他控件似乎正在工作（點擊標誌打開谷歌地圖在右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頁面完成與地圖顯示在屏幕上加載後加載地圖正確。如果地圖是不可見的（即另一個選項卡中選擇 - 這個地圖是特別是在自舉.tab-control - 它仍然是灰色

來源

2017-01-12 Eon

你介意張貼此？ – wazzahenry

請嘗試一下本作的劇本

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

來源

2017-01-12 15:56:38 SmartDeveloper

校正碼你錯過了這個觀點：我正在做一個異步和延期加載的腳本，所以它不會阻止頁面加載。回調應該調用ini tMap（）完成後。它至少... – Eon

– Cocuba

谷歌地圖API需要的關鍵。

你可以從這裏得到一個： https://developers.google.com/maps/documentation/javascript/get-api-key

來源

2017-01-12 16:02:27 bucurvlad

我確實有一個關鍵。我在上面的示例中刪除了它。 – Eon

爲了公平起見，我沒有張貼在谷歌地圖是一個引導標籤，面板上的代碼，這是最初不可見的/不呈現到t。他的屏幕，和我的編輯給了線索遠：

發現：運行initMap頁面完成與地圖在屏幕上看到樣之後，正確地加載地圖。如果映射是不可見（即，另一選項卡中選擇 - 該地圖是特別是在一個自舉 .TAB控制 - 其保持灰

一個點擊監聽只需連接到的標籤中的地圖是在哪裏再次回顧initMap()顯示的地圖，因爲這個時候，在地圖加載div可見再次，它有東西呈現給我應得我downvotes這裏。

來源

2017-01-12 16:27:18 Eon

谷歌地圖插件顯示爲灰色框（MVC環境）

回答

相關問題