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!