Long story short: Don’t be fancy when you dynamically inject your Google API script call into the DOM. Inject it to the BODY of your document using plain javascript.

I was struggling mightily with getting the Google Maps API to load on-demand today for my wife’s old Android 2.1.x device. The maps worked on every other conceivable device. Everything would load but mysteriously the maps would never load. I looked at it a long time but it’s really tough to debug older Android browsers because I can only look at the console output through the terminal using adb.

Every time the map tried to load I would get this message in the adb terminal.

Console: TypeError: Result of expression 'n.google.maps.Load' [undefined] is not a function. http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/12/8a/%7Bmain,places%7D.js:42

I was trying to inject the Google script into the HEAD portion of DOM using jQuery. THIS DID NOT WORK!

script = document.createElement("SCRIPT")
script.src = "http://maps.googleapis.com/maps/api/js?key=#{APIKEY}&libraries=places&sensor=true&callback=#{callback}"
script.type = "text/javascript"
script.id = "googlemapscript"
$("head").append(script) // < -- this will NOT WORK!!!
document.body.appendChild(script) // <-- use regular injection to fix your Woes!