google.maps.geocoder undefined is not a function

I ran into an issue yesterday while trying to leverage the Google maps geocoder resource in javascript. I’m using RequireJS and AngularJS on this project and up to this point everything had been working great. However, when I added this google library things just got weird.

Instead of just working like everything else chrome tells me undefined is not a function. Okay, well, that’s interesting. My first thought was that somehow things were firing out of order and the code just hadn’t loaded yet. I opened up the console in chrome and tried to create a new geocoder object. It didn’t work from there either but chrome was auto completing google.maps so I knew that some of the library had loaded.

After googling around for a bit I learned that google maps asynchronously loads up several additional files and, out of the box, RequireJS somehow mangles all of that leaving you with an incomplete google object. Thankfully, the fix is super easy thanks to this set of plugins from Miller Medeiros. There are several cool looking utilities in there but we only need the async plugin to get this working.

And voilá! Everything should just work.