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)
You can save a route in Google Maps with the "Pin" feature. Pinning a route or location lets you quickly find that route or directions to that spot again later. In the Google Maps Android app, you can also save a route to your phone's home screen for instant access.
Quick tip: You can also save offline Google maps to an Android's SD card by going to the Offline Maps section of the app.
Once you have the area you'd like to cache in view, type “okay maps” into the search box. Google will take a moment to “pre-load” the area and then save the copy to your device's offline cache. Once it's cached you can use the map at any time, even in Airplane mode.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With