How can I check whether Google Maps is fully loaded?
JavascriptHtmlGoogle MapsJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
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
});
});
Solution 3 - Javascript
In 2018:
var map = new google.maps.Map(...)
map.addListener('tilesloaded', function () { ... })
https://developers.google.com/maps/documentation/javascript/events
Solution 4 - Javascript
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 :-)
Solution 5 - Javascript
If you're using web components, then they have this as an example:
map.addEventListener('google-map-ready', function(e) {
alert('Map loaded!');
});
Solution 6 - Javascript
GMap2::tilesloaded()
would be the event you're looking for.
See GMap2.tilesloaded for references.
Solution 7 - Javascript
Where the variable map
is an object of type GMap2:
GEvent.addListener(map, "tilesloaded", function() {
console.log("Map is fully loaded");
});
Solution 8 - Javascript
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 > div > div > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div > div').length === tileCount) {
callyourmethod();
clearInterval(checkExist);
}
}, 100); // check every 100ms
});
Solution 9 - Javascript
For Google Maps V3, to check when google maps is fully loaded.
The trick is a combination of all the submissions on here
First you must create the map example:
let googleMap = new google.maps.Map(document.getElementById(targetMapId),
{
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
styles: [
{
featureType: "poi",
elementType: "labels",
stylers: [
{visibility: "off"}
]
}
],
});
Then you need to set a default location for it to load.. it can be anywhere
googleMap.setCenter({
lat: 26.12269,
lng: -80.130172
});
Then finally once it finishes loading the tiles for that location you can process code via the "tilesloaded" eent, this code can include re-centering the map, placing markers etc..
This ensures that the map is loaded before you do something with it
google.maps.event.addListenerOnce(googleMap, 'tilesloaded', function(){
// do something only the first time the map is loaded
});
Others have suggested the "idle" event as well, but I did not have much luck with that as it was hit or miss for me.
google.maps.event.addListenerOnce(googleMap, 'idle', function(){
// do something only the first time the map is loaded
});
Whereas when I used the "tilesloaded" , while I do get a quick blip then jump to the correct map view, it always works...so I went with the lesser of two evils
Solution 10 - Javascript
This days you know if the map is ready here:
void _onMapCreated(GoogleMapController controller) {
this.controller = controller;
_mapIsReady=true; //create this variable
}
call this method from the map widget
return GoogleMap(
myLocationEnabled: true,
//markers: markers,
markers: Set<Marker>.of(markers.values),
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: _initialPosition,
zoom: 5.0,
),
);
Solution 11 - Javascript
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.