How can I check whether Google Maps is fully loaded

Question

I   m embedding Google Maps into my web site  Once Google Maps is loaded  I need to kick off a few JavaScript processes   Is there a way to auto-detect when Google Maps has fully loaded  including tile downloads and all   A tilesloaded   method exists that is supposed to accomplish exactly this task but it does not work

User · Answer

I m creating html5 mobile apps and I noticed that the idle  bounds changed and tilesloaded events fire when the map object is created and rendered  even if it is not visible    To make my map run code when it is shown for the first time I did the following   google maps event addListenerOnce map   tilesloaded   function          this part runs when the mapobject is created and rendered     google maps event addListenerOnce map   tilesloaded   function              this part runs when the mapobject shown for the first time

User · Answer

Where the variable map is an object of type GMap2       GEvent addListener map   tilesloaded   function           console log  Map is fully loaded

User · Answer

If you re using web components  then they have this as an example   map addEventListener  google-map-ready   function e       alert  Map loaded

User · Answer

If you re using the Maps API v3  this has changed   In version 3  you essentially want to set up a listener for the bounds changed event  which will trigger upon map load  Once that has triggered  remove the listener as you don t want to be informed every time the viewport bounds change   This may change in the future as the V3 API is evolving  -

User · Answer

In 2018   var map   new google maps Map      map addListener  tilesloaded   function               https   developers google com maps documentation javascript events

User · Answer

GMap2  tilesloaded   would be the event you re looking for   See GMap2 tilesloaded for references

User · Answer

In my case  Tile Image loaded from remote url and tilesloaded event was triggered before render the image    I solved with following dirty way    var tileCount   0  var options         getTileUrl  function coord  zoom            tileCount            return  http   posnic com tiles  param  coord             tileSize  new google maps Size 256  256       opacity  0 5      isPng  true    var MT   new google maps ImageMapType options   map overlayMapTypes setAt 0  MT   google maps event addListenerOnce map   tilesloaded   function        var checkExist   setInterval function             if      map canvas  gt  div  gt  div  gt  div nth-child 1   gt  div nth-child 1   gt  div nth-child 1   gt  div nth-child 2   gt  div  gt  div   length     tileCount                callyourmethod                clearInterval checkExist                    100      check every 100ms

User · Answer

You could check the GMap2 isLoaded   method every n milliseconds to see if the map and all its tiles were loaded  window setTimeout   or window setInterval   are your friends    While this won t give you the exact event of the load completion  it should be good enough to trigger your Javascript

User · Answer

This was bothering me for a while with GMaps v3   I found a way to do it like this   google maps event addListenerOnce map   idle   function           do something only the first time the map is loaded       The  idle  event is triggered when the map goes to idle state - everything loaded  or failed to load   I found it to be more reliable then tilesloaded bounds changed and using addListenerOnce method the code in the closure is executed the first time  idle  is fired and then the event is detached   See also the events section in the Google Maps Reference

[javascript] How can I check whether Google Maps is fully loaded?

Examples related to javascript

Examples related to html

Examples related to google-maps