Google Maps Javascript Api Not Loading Reliably

I have a page which displays a google map however the page does not consistently load the map especially when navigating to the page from an href in another page. I am running it o

Solution 1:

You are getting this error:

Uncaught (in promise) "initMap is not a function"

Because your initMap function is scoped within jquery's document.ready so you are asynchronously calling a global function that is never found as it's in fact not globally defined. The method only gets executed (and hence your map does load most times) because you call it again in your onload dom listener inside jquery's document.ready.

You can fix this in multiple ways, e.g. by placing this method in global scope, loading the Maps API synchronously, lazy loading it... Most recommended approach is to use a callback.

Check out related threads: Google maps API can't find a callback defined in $(document).readyMoving google maps api code to separate file + jquery

Hope this helps you.