How to preload some part of google maps?

Question

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 am having the same issue. Want to make the change of zoom level smoother... — flaudre, Feb 24 '17 at 11:22
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, Mar 02 '17 at 03:09

score 12 · Accepted Answer · edited Jun 20 '20 at 09:12

12

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.”

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 09 '12 at 17:31

RASG

5,988
4
26
47

Reading that it looks like it's ok to preload it to improve performance. – dalore Aug 15 '14 at 16:01
It seems ToS is not against @RASG 's offered solution. So go with it & don't worry! Dude, We back you in any court ! – behkod Feb 26 '17 at 15:59

score 7 · Answer 2 · answered Mar 02 '17 at 21:54

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.

You can calculate the speed of your slow zoom-in by the time the first two caches get. — shukshin.ivan, Mar 02 '17 at 21:58
Hey ivan, thanks a lot for the effort. I checked the page too late to reward some bounty. I hope you are okay with a mere upvote. — flaudre, Mar 10 '17 at 16:04

How to preload some part of google maps?

2 Answers2