I'm building a web app with Google Maps API, I need to zoom into an area smoothly, so I use setTimeout to increase the zoom level every second, but in some place with bad network, the map images are loaded too slow that the page quickly turn to a white page....

so my question is is it possible to preload some part of Google Maps(zoom from 3 to 16 of a point)

I'm building a web app with Google Maps API, I need to zoom into an area smoothly, so I use setTimeout to increase the zoom level every second, but in some place with bad network, the map images are loaded too slow that the page quickly turn to a white page....

so my question is is it possible to preload some part of Google Maps(zoom from 3 to 16 of a point)

• javascript
• performance
• google-maps
• google-maps-api-3
• preload

• I am having the same issue. Want to make the change of zoom level smoother... – flaudre Commented Feb 24, 2017 at 11:22
• 1 @Flaudre have you tried RASG's solution? – wong2 Commented Feb 27, 2017 at 7:02
• 1 Perhaps zooming in slowly isn't the best user experience for users on slow connections? Even if you pre-load all the data they will have to wait for a lot of images to load at some point – dpix Commented Mar 2, 2017 at 3:09
• @Flaudre check the answer please. – shukshin.ivan Commented Mar 2, 2017 at 22:08

2 Answers 2

you could probably pre-load it in a hidden div or iframe.

but you should make sure it is not against the Google Maps/Google Earth APIs Terms of Service

10.1.3 Restrictions against Data Export or Copying.

(b) No Pre-Fetching, Caching, or Storage of Content. You must not pre-fetch, cache, or store any Content, except that you may store: (i) limited amounts of Content for the purpose of improving the performance of your Maps API Implementation if you do so temporarily, securely, and in a manner that does not permit use of the Content outside of the Service; and (ii) any content identifier or key that the Maps APIs Documentation specifically permits you to store. For example, you must not use the Content to create an independent database of “places.”

Make some code

I've just created a script based on the 5-years-old idea by RASG. Let's create a hidden map and when it is fully loaded, zoom it in. We do it again and again until it caches all the zooms. The working fiddle is here. I've placed an info div in the top right corner to view how zoom progress.

// init the hidden map
var mapOptions = {
  center: new google.maps.LatLng(center.lat, center.lng),
  zoom: minZoom + 1
};
var preMap = new google.maps.Map(document.getElementById('map-canvas-hidden'), mapOptions);

// when the current hidden map is fully loaded, zoom it in 
preMap.addListener('tilesloaded', function() {
  $('#out').html('Zoom ' + preMap.getZoom() + ' preloaded');

  // if there is zoom to zoom-in, do it after some rest
  if(preMap.getZoom() < maxZoom) {
    setTimeout(function(){
      preMap.setZoom(preMap.getZoom() + 1);
    }, 50);
  }
});

Does it really cache the map?

Well, clear browser cache and open the fiddle.

In browser network activity we can see a lot of images downloading. Then zoom the map in and watch the activity again. Looks like all the images are loaded from cache.

Hope it helps.