Question

I’m building large applications with the Google Maps API, and I’m finding the need to be more modular in my development approach, and could use some direction.

My goal is to logically break out my code into different JS files – so there will always be a “base” JS file that takes care of loading the map, adding base functionality, etc. But for different clients, I want to build on this base without duplicating code. So the base JS file stays put, and I just add some additional functionality to another client-specific JS file, and load both of these into the application. The problem with this approach is that I need to wait until the Google Maps API is completely loaded before loading any other JS files, otherwise the second JS file doesn’t have access to API objects and errors out.

So are there any libraries or frameworks out there that address this big-picture and little-picture issue? I ran into Require.js as a solution, but I want to see what all of the options are here. Any direction is much appreciated.

Answer 1

RequireJS is probably your best bet here. It will load scripts in parallel, but execute them in dependency order. It looks like the async plugin referenced in that blog post will work as advertised with the Google Maps loader. Once you get into projects with more than a handful of JavaScript files and classes, and try out RequireJS, you’ll wonder how you ever did without it.