How to check if Google Maps API is loaded?
JavascriptGoogle Maps-Api-3Javascript Problem Overview
How to check if Google Maps API (v3) is loaded?
I do not want to execute mapping scripts if the API did not load due to internet connectivity problems (web page is hosted locally).
Javascript Solutions
Solution 1 - Javascript
if (google.maps) {...}
will give you a reference error if google is undefined (i.e. if the API didn't load).
Instead, use if (typeof google === 'object' && typeof google.maps === 'object') {...}
to check if it loaded successfully.
Solution 2 - Javascript
None of the current answers are working with 100% consistency for me (excluding Google Loader, which I haven't tried). I don't think checking the existence of google.maps
is enough to be sure the library has finished loading. Here are the network requests I'm seeing when the Maps API and optional Places library are requested:
That very first script defines google.maps
, but the code that you probably need (google.maps.Map
, google.maps.places
) won't be around until some of the other scripts have loaded.
It is much safer to define a callback when loading the Maps API. @verti's answer is almost correct, but still relies on checking google.maps
unsafely.
Instead, do this:
HTML:
<!-- "async" and "defer" are optional, but help the page load faster. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=mapsCallback">
</script>
JS:
var isMapsApiLoaded = false;
window.mapsCallback = function () {
isMapsApiLoaded = true;
// initialize map, etc.
};
Solution 3 - Javascript
in async loading this one works for me (Thanks to DaveS) :
function appendBootstrap() {
if (typeof google === 'object' && typeof google.maps === 'object') {
handleApiReady();
} else {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=handleApiReady";
document.body.appendChild(script);
}
}
function handleApiReady() {
var myLatlng = new google.maps.LatLng(39.51728, 34.765211);
var myOptions = {
zoom: 6,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
Solution 4 - Javascript
You might consider using the Google Loader
google.load("maps", "3", {callback: myFn});
It will load your designated javascript file, then execute the callback, specified in the optionalSettings
argument.
Solution 5 - Javascript
EDIT:
If you are not afraid to be "not explicit" then you can use following, otherwise if you are not sure if there will be only one instance of google
variable then use DaveS answer.
Check if google maps v3 api loaded:
if(google && google.maps){
console.log('Google maps loaded');
}
in this condition variable google
will use javascript truth so if it will be function or object or string it will become true and then will try to access maps
inside of that object.
And inverse:
if(!google || !google.maps){
console.log('Not loaded yet');
}
Solution 6 - Javascript
Just so you know, there's an issue with the accepted answer. It will return true if the script has loaded otherwise 'typeof google' may return undefined and throw an error. The solution to this is:
if ('google' in window && typeof google === 'object' && typeof google.maps === 'object') {...}
This makes sure a boolean value is always returned.
Solution 7 - Javascript
A simple if(google && google.maps)
check didn't work for me; I still get an error when I try to access the API:
> TypeError: google.maps.LatLng is not a constructor
In my case this is probably due to my mouse event handlers being triggered before the maps API has even finished downloading. In this case, to reliably check if maps is loaded, I create a "gmaps" alias and initialise it on dom ready (using JQuery):
var gmaps;
$(function () {
gmaps = google.maps;
});
then in my event handlers I can simply use:
if(gmaps) {
// do stuff with maps
}
Solution 8 - Javascript
try
(google && 'maps' in google)?true:false
or
if(google && 'maps' in google){
//true
}
else{
//false
}
since I had a problem with the following on mobile:
if (typeof google === 'object' && typeof google.maps === 'object') {...}
Solution 9 - Javascript
I believe you can do this with an if(google && google.maps){ … }
, unless you mean what is in this post, which is about Maps API V2, but someone updated it for v3 here.
Solution 10 - Javascript
If you are using jQuery
, I have good news for you:
if (typeof google === 'object' && typeof google.maps === 'object') {
gmapInit();
} else {
$.getScript('https://maps.googleapis.com/maps/api/js?key='+gApiKey+'&language=en', function(){
gmapInit();
});
}
it's similar to answer-17702802