How can I check whether Google Maps is fully loaded?

Viewed 207547

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.

12 Answers

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 :-)

GMap2::tilesloaded() would be the event you're looking for.

See GMap2.tilesloaded for references.

Where the variable map is an object of type GMap2:

    GEvent.addListener(map, "tilesloaded", function() {
      console.log("Map is fully loaded");
    });

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

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,
              ),
            );

I needed it for the calculating the map bounds, so this was enough for me:

new ResizeObserver(()=> updateMapBounds()).observe(map.getDiv())
new IntersectionObserver(()=> updateMapBounds()).observe(map.getDiv())
updateMapBounds();
Related