How to check if Google Maps API is loaded?

Question

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).

Answer 1

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.

Answer 2

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.
};

Answer 3

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);
}

Answer 4

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.

Answer 5

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');
}

Answer 6

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.

Answer 7

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
}

Answer 8

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') {...}

Answer 9

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

Answer 10

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.