Map only visible on my web page if I press F12 key under IE

Question

This thread is a more investigation from my side to try to know why my Map is not visible on my page. See below link for original post

http://forums.asp.net/t/2085604.aspx?HOw+to+display+a+MAp+on+my+page+and+retrive+the+Lat+and+Long+coordinate

Why I have notice that when I run my page which contain the MAP, then the square is gray out but the map is loaded as I can place pin. Then if I press only once the F12 key to be in debug mode, then suddenly the MAP apears and the remains

If I check the debuger while refreshing my page containing the map I have only the follwing warning :

"Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys "

Any idea ? Does missing key could cause this behaviour ?

Sorry I am not an expert in this but can give you any needed information for helping me identify why it behaves like this

regards

Answer 1

To load the Google Maps JavaScript API , use a script tag like the one in the following example:

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

The URL contained in the script tag is the location of a JavaScript file that loads all of the symbols and definitions you need for using the Maps JavaScript API. This script tag is required.

The async attribute lets the browser render the rest of your website while the Maps JavaScript API loads. When the API is ready, it will call the function specified using the callback parameter.

Answer 2

执行initMap()时，谷歌地图的元素必须可见

Answer 3

I found this an issue with a tabbed interface on bootstrap (rendering a in openlayers!) it wouldn't display (a ol-unselectable class was display:none )

I had to get round it like this

$("a[href='#tab-map-was-on']").on('shown.bs.tab', function(e) {
    map.updateSize(); 
});

this affected chrome and firefox. on openlayers mapping

it appears that the RESIZE event needs to fire. the console flipping back and forth FIRES the resize. since the tab move isn't detected as a resize you need to manually fire it