javascript - How to detect if google map loaded successfully - Stack Overflow

admin管理员组

文章数量:1324816

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=".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 e back soon?

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

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./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 e back soon?

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

• javascript
• html
• google-maps
• google-maps-api-3

Share Improve this question Follow asked Oct 20, 2015 at 11:03 Ahmad HammoudAhmad Hammoud 70111 gold badge55 silver badges1515 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

I my opinion the best or most certain way is a bination 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);   

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.

In idle event, do following on map object:

Check following:

Use if (typeof google === 'object' && typeof google.maps === 'object') {...} to check if it loaded successfully.

And then check if(map.getCenter) { var latlng = map.getCenter(); //check here if latlng is object }

If any of the "IF" condition fails that means something's wrong.

本文标签： javascriptHow to detect if google map loaded successfullyStack Overflow