0

First I checked without setTimeout function google map API is fully loaded or not using map idle function. it's working fine. but I tried using the setTimeout function in the google map loading page. the map is loaded successfully. but map idle function is not working on how to fix this issue.

Code.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Markers</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
var map;
      function initMap() {
        var myLatLng = {lat: -25.363, lng: 131.044};

        setTimeout(function(){
          map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: myLatLng
        });
        },2000);

        google.maps.event.addListenerOnce(map, 'idle', function(){
          console.log('hi')
          var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Hello World!'
        });
        })

        // var map = new google.maps.Map(document.getElementById('map'), {
        //   zoom: 4,
        //   center: myLatLng
        // });

        // var marker = new google.maps.Marker({
        //   position: myLatLng,
        //   map: map,
        //   title: 'Hello World!'
        // });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=***********&callback=initMap">
    </script>
  </body>
</html>

How to achieve this scenario.

hari prasanth
  • 716
  • 1
  • 15
  • 35

2 Answers2

2

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!

rafon
  • 1,469
  • 11
  • 21
0

Use titesloaded event to listen to complete map load.

Abhirup Pal
  • 152
  • 2
  • 11