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 h

Answer 1

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.

Answer 2

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

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 5

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 6

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