Can you insert a google map into a page via AJAX

I am using the google maps V3 javascript API to create a google map. This is working fine but my map has lots of markers on and so lots of javascript is being cre开发者_如何转开发ated making the page about 5mb and therefore page load time is huge (over 20seconds)! I wanted to pull the map in via ajax instead so that I can display an ajax loader gif until it has been downloaded. I can't get it to work though. I pull in the javascript and everything and insert it into the page but the map doesnt load. Do I need to call an initialize function once the code is in the page or something?

---

You could use addListener to bind an event to the idle state of your map.

So, maybe you could load it hidden in background, display your spinner, wait for the event and then display it.

Something like :

google.maps.event.addListener(yourmap, 'idle', function()
{
if(!mapLoaded) $('#yourmapdiv').trigger('mapLoaded');
mapLoaded=true; 
});

Then :

$('#yourmapdiv').bind('mapLoaded', function(){
// hide your spinner, show your map
});

The point I'm not sure of is if the idle state concerns only the tiles loading or all the markers.