Dynamically loading Google Maps API + LocalSearh through google.load

"But for my purposes I need it to be loaded later, through the google.load method,"

not sure you can load it in pieces.  Why not try loading this into an iframe on the page only when you need it?  Remember, an iframe is a separate page within a main page (yours) and the google maps page seems to be coded so that it is it's own page, not just a component of your page, which doesn't seem to work ....

It works fine when it is loaded at the beginning of the page, but that slows down the webpage loading tremendously. This is an addon feature on the page that integrates with other components. I would rather not pass alot of back and forth query strings and variables in between the maps iframe and the rest of the page. It would mean rewriting alot of javascript and I would prefer to avoid that as a last resort.

unfortunately wepage loading is a synchronous event, and you can't really detach the map to load after the rest of the page loads -- the page doesn't fully load until all is done on it.  That's another reason for the iframe, at least it can load after the main page.  However, it is hard to change elements of an iframe from the parent.

Looking at their very long .JS file, there is a lot of stuff in that you don't need just for the search.  Why not go through the file, and pull out just the parts you need, save them, and reference that in your own .JS file in the document head?

Yes, but you can break up javascript and css to load when necessary to increase initial load times, that's what I'm trying to do. Scripts like this allow you to do that.
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)

Or the jQuery script of $.getScript("test.js");

But neither method plays very well with google, so google made up their own thing.
      google.load("maps", "2", {"callback" : drawMap});
And it loads maps just fine, and I can add the standard controls like
            map.addControl(new GLargeMapControl());
            map.addControl(new GMapTypeControl());
without any problems. But the tricky part comes in adding the LocalSearch control.
   mcon = new google.maps.LocalSearch();
   map.addControl(mcon);
Because it requires an additional javascript file to be loaded in, and the previous 2 methods don't work for loading in that component asynchronously, and all the Google documentation I've looked through doesn't really talk about loading this component through google.load() anywhere, I'm certain it can be done I just don't know how.

I know, that's why I suggested just taking out the parts of this file that you need just for the search --
http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js

putting it in your own JS file, referenced in the head of your document (only about 10% of their long file).
<SCRIPT src="mapsearch.js"></SCRIPT>

Are you saying that if you did this, it would still not load the search correctly?
If that's the case, I would email google maps support and find out why -- it should work ....

When I try and reference that file before I load maps firebug  throws me this error.

GControl is not defined
[Break on this error] LocalSearch.prototype = new GControl(false,true);
gmlocalsearch.js Line 46

I'm gonna try and load maps through the google load method and gmlocalsearch through normal js or jquery script loading, although I doubt it'll work cause google js tends to break through those methods it's worth a try though.

If you have any other suggestions let me know.

Actually.. using jQuery to load in the localsearch component worked.

I think you will find normal javascript loading should work as well, if you are interested enough to try it.  This is typical of google, they really only test a lot of their stuff with a single mindset, and I suspect that the way you were trying to stagger the map loading was simply not tested by them.  If you try JS as well, you will probably end up becoming the expert on this issue....

I tried it simply using JS, using this nifty little function I came across a while ago, but I don't know how to execute something on call back (once the localsearch is loaded), so my drawMap function was being executed too early before gmLocalSearch had a chance to load. Jquery does it automatically and I use it in the page anyways, it'd be nice however to figure that out for pages I won't be using jquery on.


//SAMPLE
loadjscssfile("main.js", "js");
//DYNAMICALLY LOAD JS OR CSS
function loadjscssfile(filename, filetype){
 if (filetype=="js"){ //if filename is a external JavaScript file
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }
 else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}