谷歌地圖API的工作，只有當開發工具是開放

嘿，我想在我的項目的地圖。我得到了我API_KEY從谷歌的谷歌地圖......我在控制檯沒有錯誤，但映射犯規顯示任何東西，直到我打開谷歌瀏覽器開發人員工具...谷歌地圖API的工作，只有當開發工具是開放

之後是工作，但標記在工作palce ..仍然沒有錯誤的控制檯。

我到底做錯了什麼？

風格：

#map { 
width: 100%; 
height: 300px; 
background-color: grey; 
}

代碼：

<div id="map"></div> 
<script> 
    function initMap() { 
    var myLatLng = {lat: -0.250608, lng: 52.025528}; 

    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: myLatLng 
    }); 

    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     title: 'Title!' 
    }); 
    } 
</script> 
<script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap"> 
</script>

來源

2017-05-11 Maria

您的init-ING在一個容器中是不可見的地圖/沒有尺寸。

開放開發工具觸發您的瀏覽器導致的地圖來調整自身大小調整**

您可以通過修復：

要麼等待初始化地圖，直到它的容器是可見

或致電google.maps.event.trigger('resize',map)（其中map是地圖的實例）當你的容器變得可見。

**證明，這是發生了什麼：取消停靠的開發工具所以這是一個浮動窗口。然後再次刷新你的頁面（與開發工具關閉）和開放的開發工具，你看不到地圖後，它仍然不會因爲你的瀏覽器就不會改變大小是可見的（因爲你的開發工具是浮動的，不停靠）

來源

2017-05-11 16:24:02 Adam

是亞當你的權利......我只是現在要弄清楚如何使用google.maps.event.trigger（「調整」，地圖）...乾杯 – Maria

@Maria - 當用戶點擊聯繫我們選項卡 - 您可能會在DOM元素上添加/刪除類以顯示正確的選項卡。只需在添加/刪除DOM類後立即調用'google.maps.event.trigger（'resize'，map）'。另外，在'initMap'函數之外聲明'var map;' – Adam

是否已進行了一定要註冊與谷歌的網址/域使用Google地圖API的？ https://developers.google.com/maps/premium/previous-licenses/clientside/auth#register-urls

來源

2017-05-11 16:14:36 Woodrow

無多數民衆贊成什麼我甚至不知道我不得不......我現在在本地工作是一個問題？ – Maria

不是100％確定，你說它只在你打開開發工具時才顯示？如果它是一個身份驗證問題與你的API密鑰，看看https://developers.google.com/maps/premium/previous-licenses/articles/troubleshooting-auth當我打開開發工具 – Woodrow

是工作，但我看看，如果是認證問題 – Maria

谷歌地圖API的工作，只有當開發工具是開放

回答

相關問題