Speed up the loading of Google maps

Question

I am trying to speed up my web page and the one thing which is slowing it right down is my google map. I currently have it set up like this:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=key_goes_here&amp;sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>

and in my document.ready script:

google.maps.event.addDomListener(window, 'load', initialize);

Is there an alternative to this, I did try the asynchronous loading but I couldn't get it to work with the infobox, any help would be greatly appreciated :)

impossible to give performance suggestions without knowing what the performance problems are. — charlietfl, Apr 23 '13 at 11:52
You could try using [Google Loader](https://developers.google.com/loader/) and host the `infobox.js` file yourself. — robertklep, Apr 23 '13 at 11:54

score 1 · Answer 1 · answered Apr 23 '13 at 12:02

1

You could load the map asynchronously: see https://google-developers.appspot.com/maps/documentation/javascript/examples/map-simple-async

If a static map will do you can use this. Once the users needs the full map you can load it then.

If you don´t need the Infobox.js remove that. In case you still need it load the packed version which is smaller (infobox_packed.js).

Last but not least messure how you webpage is loaded in a appropriation profiler like google chromes.

answered Apr 23 '13 at 12:02

Th 00 mÄ s

3,776
1
27
46

Thanks, that loads in my map async :) however I am having problems with the infobox, it would seem that just including the link to it doesn't seem to work. It keeps throwing errors saying google isn't defined :-/ – green_arrow Apr 23 '13 at 14:28
google is not defined because the infobox is loaded prior the main maps java file. Have a look at the callback parameter in the google maps api sample. You have to load the infobox script from this callback method. Do you use jquery? If yes see http://api.jquery.com/jQuery.getScript/ if not see http://stackoverflow.com/questions/3523091/dynamically-loading-javascript-files-and-load-completion-events – Th 00 mÄ s Apr 23 '13 at 19:14

score 0 · Answer 2 · answered Apr 23 '13 at 11:50

0

You can speed things up if you include the script tags at the bottom of your document or use a javascript loading library like HeadJS.

answered Apr 23 '13 at 11:50

Alp

29,274
27
120
198

Yes I have my script tags at the bottom of the document already. – green_arrow Apr 23 '13 at 11:51

score 0 · Answer 3 · answered Dec 03 '13 at 10:19

You can load Google API asynchronous and after that, you can have a custom event that indicate when loading process for map has finished. You can use a photo with the map and when the event is fired, hide the photo and you will have the map without "slow load effect".

Speed up the loading of Google maps

3 Answers3