11

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.

Improve this question
4
  • 7
    Are you using Firebug? I found that firebug decreased the performance of my app when I was working with the maps api, and if i viewed the page on a browser without firebug it was fine. Commented May 17, 2009 at 23:57
  • I've seen the same thing, but only in firefox and when running against localhost. IE and Chrome have been fine. Commented May 18, 2009 at 5:17
  • I am using Firebug to debug. I can try switching it off and see if it helps. Commented May 18, 2009 at 6:33
  • 1
    Disabling firebug fixed the problem! This is weird. Firebug have been running the past weeks with no problem at all. Thanks Paul - you can answer this post and I accept yours. Commented May 18, 2009 at 7:17

3 Answers 3

Reset to default
16

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Yes, for me too, I was investigating in both FF and IE9, and when closed the Firebug in FF and Developer Tools in IE9 the map get loaded, thx!
12

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.

Improve this answer

Comments

4

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.

Improve this answer

4 Comments

I know this is old but if you're using google maps api or require.js, both of those recommend you put it at the top.
I haven't had issues with it at the bottom for both.
If you put your javascript at the bottom, it won't run until after the page has rendered, which is undesirable in a number of scenarios.
because it's supposed to be in the head ! only recently programmers started to move their scripts to the body. i still think the scripts should be in the head, compiled early, but initialized later. just because i don't like to mix content and source code.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.