How to ensure that google map is loaded?

Question

I have to make screenshot of google maps using phantomjs. I dynamically pass few markers to web page that is being executed by phantom, draw them on map and then I call map.fitBounds(bounds) to make sure map will cover all markers. The problem is that I have to know when map (all tiles?) is loaded so I can make a screenshot. I know how to communicate from page executed by phantom to rendering script, but I don't know how to ensure that map is loaded. Here is my code:

      map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 0.0, lng: 0.0 },
        zoom: 8
      })

      showMarkers = function (markers) {
        markers = markers || []
        var bounds = new google.maps.LatLngBounds()
        for (var i = 0; i < markers.length; ++i) {
          var marker = new google.maps.Marker({
            position: markers[i].position,
            map: map,
            title: 'Hello World!'
          })
          bounds.extend(marker.getPosition())
        }
        map.fitBounds(bounds)

        // for now I set 1 sec timeout, but it is not always enough and I capture gray map with markers (no tiles loaded)
        setTimeout(function () {
          console.log('mapReady')
        }, 1000)
      }

take a look at http://stackoverflow.com/a/7262773/1149277 – Timur Bilalov Mar 02 '16 at 08:17 — Timur Bilalov, Mar 02 '16 at 08:17

score 1 · Answer 1 · answered Mar 02 '16 at 12:04

As @Timur suggested 'idle' event is what I needed, however I had to add some extra code to make it work properly in PhantomJs:

        var fitBoundsExecuted = false
        google.maps.event.addListener(map, 'idle', function () {
          if (!fitBoundsExecuted) { return }
          fitBoundsExecuted = false
          setTimeout(function () {
            console.log('mapReady')
          }, 1)
        })
        map.fitBounds(bounds)
        fitBoundsExecuted = true

How to ensure that google map is loaded?

1 Answers1

Linked