How to check if the Google Maps API is loaded?

Question

How to check if the Google Maps API (v3) is loaded?

I do not want to execute the matching scripts if the API did not load due to problems with the Internet connection (the web page is hosted locally).

Answer 1

if (google.maps) {...} will give you a reference error if google is undefined (that is, if the API has not loaded).

Instead, use if (typeof google === 'object' && typeof google.maps === 'object') {...} to see if it loaded successfully.

Answer 2

None of the current answers work with 100% consistency for me (excluding Google Loader, which I have not tried). I don’t think that checking the existence of google.maps enough to make sure that the library has finished loading. Here are the network requests that I see when the Maps API and the additional "Places" library are requested:

This very first script defines google.maps , but the code that you probably need ( google.maps.Map , google.maps.places ) will not be found until some other scripts load.

It is much safer to define a callback when loading the Maps API. @Verti's answer is almost correct, but still relies on google.maps unsafely validation.

Instead, do the following:

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 download this 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 can use google loader

 google.load("maps", "3", {callback: myFn}); 

It will load your specified javascript file and then execute the callback specified in the optionalSettings argument.

Answer 5

EDIT: If you are not afraid to be "not explicit", you can use the following, otherwise if you are not sure if there will be only one instance of the google variable, then use the DaveS answer.

Check if Google Maps v3 api is loaded:

 if(google && google.maps){ console.log('Google maps loaded'); } 

in this condition, the google variable will use javascript true, so if it is a function, object or string, it will become true and then try to access maps inside that object.

And the opposite:

 if(!google || !google.maps){ console.log('Not loaded yet'); } 

Answer 6

A simple if(google && google.maps) check if(google && google.maps) did not work for me; I still get an error when trying to access the API:

TypeError: google.maps.LatLng is not a constructor

In my case, this is probably due to the fact that the mouse event handlers are started before the map API even finished loading. In this case, to reliably check if the maps are loaded, I create an alias "gmaps" and initialize it to 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 7

to try

 (google && 'maps' in google)?true:false 

or

 if(google && 'maps' in google){ //true } else{ //false } 

since I had a problem with the following:

 if (typeof google === 'object' && typeof google.maps === 'object') {...} 

Answer 8

I believe that you can do this with if(google && google.maps){ … } if you do not mean what is in this post regarding Maps API V2, but someone updated it for v3 here .