How to detect if google map loaded successfully

Question

I'm using google-maps version 3 in my website.

I ran through problems where the map sometimes does not load, but instead it will be shown as a grey box, and the browser log will be fulled with errors - unfortunately I can't get the log now because the map is working again.

According to some researches, the problem is because of the experimental version I'm using

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=false"></script>

Is There a way to find out if the map has been loaded successfully or crashed so I can tell the user to come back soon?

P.S. I tried the idle event, but it has been invoked even when the map crashed.

Solution 1

Listen for the "tilesloaded" event instead. It's the last event to fire when a map (successfully) loads and you are actually showing a map.

If there's no map (e.g. you haven't set the width/height explicitly), this event won't fire even though idle does.

You can use the Map Events example and throttle your connection from within the Network tab to do some tests. Here's the same example with width/height not set for #map.

Solution 2

I my opinion the best or most certain way is a combination of the tilesloaded event and a delayed function to test if a "success-flag" is set.

/* flag to indicate google maps is loaded */
googleMapsLoaded = false;

/* listen to the tilesloaded event
   if that is triggered, google maps is loaded successfully for sure */
google.maps.event.addListener(map, 'tilesloaded', function() {
   googleMapsLoaded = true;
   //clear the listener, we only need it once
   google.maps.event.clearListeners(map, 'tilesloaded');
});

/* a delayed check to see if google maps was ever loaded */
setTimeout(function() {
  if (!googleMapsLoaded) {
     //we have waited 5 secs, google maps is not loaded yet
     alert('google maps is not loaded');
  }    
}, 5000);