How to Check Whether Google Maps Is Fully Loaded

How to check google map API is fully loaded or not using setimeout function?

You can use the tilesloaded event of the Maps Javascript API Events. The tilesloaded is used to detect when the map has been fully loaded. A sample POC below using your current implementation.

 var map;
  function initMap() {
    var myLatLng = {lat: -25.363, lng: 131.044};
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: myLatLng
    });
    map.addListener('tilesloaded', function() {
        console.log('map is loaded');
    });        
    google.maps.event.addListenerOnce(map, 'idle', function(){
        console.log('map is idle')
        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Hello World!'
        }); 
    });     
  }

If this doesn't help you, you can also check the answer from this Stackoverflow question How can I check whether Google Maps is fully loaded?. It appears a lot of users were also experiencing this issue before.

Hope this information find you helpful and good luck on your applicaion!

How to check if Google Maps is fully loaded?

Try the tilesloaded event instead of idle.

How to detect if google map loaded successfully

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.

How to check if Google Maps API is loaded?

if (google.maps) {...} will give you a reference error if google is undefined (i.e. if the API didn't load).

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

Android Java Google Maps, need to check if map is loaded fully before executing dialog

How about GoogleMap.OnMapLoadedCallback?

How can I check wether a (Google maps API) map has loaded?

You can try using a OnCameraChangeListener on your map. The onCameraChange call will be called when the map's tiles are initially loaded.

  this.map.setOnCameraChangeListener(new OnCameraChangeListener() {

    public void onCameraChange(CameraPosition arg0) {
      isMapReady = true;
      map.setOnCameraChangeListener(null);
    }
  });

Google is undefined: How to check if google maps script is loaded in React

There is a callback param you could pass in the url. It will be called one the async file is loaded.

When the API is ready, it will call the function specified using the
callback parameter.

&callback=initMap

Example:

"https://maps.googleapis.com/maps/api/js?${API_KEY}&callback=initMap"

---

Related Topics