CODEWITHSUNDEEP
javascriptgoogle-maps
janhartmann
janhartmann

Reputation: 15003

Google Maps API - Slow loading javascript

I am using Google Maps API to display a map on a certain page.

Problem is that the file http://maps.google.com/maps?file=api..... sometimes happens to load very slow - decreasing the page's performance, because the rest of the JavaScript is first loaded on document ready, which its rarely reaches - because the browser locks up waiting for the file from Google.

I have tried to move the JavaScript file from the <head> tag to under my content. But the rest of the JavaScript is never fired because the browser waits for the file from Google.

Is there a way around this, or have anyone else experienced same problem? It began recently, and I have no idea why.

This is my code, if anyone is interested:

<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAa24xicak8_ghHX58i7La7hRFh9iM79SNC94rOejOtdMRvQmJiBS6Uv5F_1BNSh9ZuSzFXyekHISgew">    </script>
<script type="text/javascript" src="/js/maps.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
    // Google Maps
    initialize();

    // Other JavaScript comes here....

   });
</script>

If I access 

http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAa24xicak8_ghHX58i7La7hRFh9iM79SNC94rOejOtdMRvQmJiBS6Uv5F_1BNSh9ZuSzFXyekHISgew

The file loads instantly.

Upvotes: 11

Views: 31465

Answers (3)

janhartmann
janhartmann

Reputation: 15003

This is a rather old question now - the solution was to disable firebug (atleast for me).

Upvotes: 16

viam0Zah
viam0Zah

Reputation: 26322

Use Google's Ajax APIs. From some time past, all of Google's services can be accessed through the JavaScript API. It's a modular system, you only have to include the JSAPI library, and then you can dynamically load the modules you need—it won't block your site. 

<script type="text/javascript"        
        src="http://www.google.com/jsapi?key=ABCDEFG"></script>
<script type="text/javascript">
google.load("maps", "2");
google.setOnLoadCallback(function() {
    // Your logic goes here.
    // It will be run right after the maps module was loaded.
});
</script>

For further details, see JSAPI's developer documentation.

Upvotes: 12

Nael El Shawwa
Nael El Shawwa

Reputation: 348

On JavaScript optimization: always put your JS at the bottom of your even your Maps API script. I can't really think of any good reason to have any JS in the head.

Upvotes: 4

Related Questions