GoogleMaps does not load on page load

后端未结

关注

 6  1850

I can\'t get my map running using the GoogleMaps API V3. The map does not load. I would expect the map to appear in the div with the id gisMap but in the Chrome

相关标签:

6条回答

不思量自难忘°

2020-11-29 09:59
Simply make sure that the script element with the initMap function in it comes before the google maps api script element in your HTML. Also, the async defer attributes included in Google's examples may be causing the problem. Simply remove those attributes.
```
<script src='/js/script.js'></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&callback=initMap"></script>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
余生分开走

2020-11-29 10:01

Add async defer in the end of google maps api like this

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=YOUR API KEY HERE&callback=initMap" async defer></script>

I hope it will work fine.

0 讨论(0)
发布评论:

提交评论
- 加载中...

粉色の甜心

2020-11-29 10:02

I had the same issue. Solved it by moving:

<script src="//maps.googleapis.com/maps/api/js?key=-yourkey-=initMap" async defer></script>

after:

    // Google Map
    function initMap() {
        GoogleMap.initGoogleMap();
    }

Hope it will be of any assistance for someone...

0 讨论(0)

遇见更好的自我

2020-11-29 10:06

try:

                                    <script async defer src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&key=YOUR_API_KEY&signed_in=true">
                                    initMap()
                                    </script>
                                    <div id="map_canvas" style=""></div>
                                    <body id="loadMap" onload="initializeMap(-79, 43,'')"></body>

0 讨论(0)

天涯浪人

2020-11-29 10:12
Make sure that initMap function is visible from the global scope or the parameter passed as callback to google maps.js is properly namespaced. In your case, the quickest solution will be replacing:
```
function initMap(){
//..
}
```
to:
```
window.initMap = function(){
//...
}
```
or namespace version:
```
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBDucSpoWkWGH6n05GpjFLorktAzT1CuEc&callback=YOUR.NAMESPACE.initMap" async defer></script>
```
//Edit:

I see that in your code snippet you use some async module loading (require.js?) and the code in which you create window.initMap function does not get executed unless you call the module that contains this declaration. So you have not fulfilled the first condition that I've mentioned - the initMap must be visible from the global scope before you call google maps.js.
0 讨论(0)
发布评论:

提交评论
- 加载中...
梦如初夏

2020-11-29 10:23
I have the answer :)

After a little faffing around. I've determined that the js file with your Google Maps function in should not be async

So in my case
```
<script async type="text/javascript" src="js/home.js"></script>
```
became
```
<script type="text/javascript" src="js/home.js"></script>
```
This does not mean that the Google Maps API call can't have async and/or defer attributes included!

Ie, my call looks like this, and comes before the local home.js file
```
<script src="https://maps.googleapis.com/maps/api/js?key=[APIKEY]&callback=initMap" async defer></script>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...