Google Maps V3异步给出错误

Question

For a website I'm trying to load the Google Maps script async, because it makes some browser (Firefox) ignore scrolling before all the scripts are loaded from Google.

I looked at the google developers docs and used their script. https://developers.google.com/maps/documentation/javascript/examples/map-simple-async works all perfect as long as you place it inside a <script> tag in your index.html.

But when I place this code for example in my main.js file it isn't working anymore. Example: http://jsfiddle.net/693xK/

Then I found this example on jsfiddle which seems to work: http://jsfiddle.net/doktormolle/7cu2F/ But over here the same problem. When I place it inside of my main.js file Google Maps isn't showing up. Everything is global. I get the following error but I don't understand what to do about it. I googled the error message but haven't had any luck.

TypeError: window.initialize is not a function

Answer 1

You're missing to add width and height to your #map-canvas . Also I checked your fiddle, since you're using window.onload = loadScript; so wrap it in head ( left corner, under Frameworks & Extensions )

#map-canvas{
    width:500px;
    height:500px;
}

check this updated JSFiddle .