Googleマップの一部をどのようにプリロードするのですか？

Question

私はGoogle Maps APIを使ってウェブアプリケーションを構築していますが、スムーズにズームする必要があるため、毎秒ズームレベルを上げるのにsetTimeoutを使用しますが、ネットワークの悪い場所ではマップ画像が遅すぎますページはすばやくので、私の質問がある

....白のページへ向けることは、Googleマップの一部をプリロードすることが可能である（3から地点の16までズーム）

Answer 1

あなたはおそらく事前ことができ隠しdivまたはiframeに読み込みます。

しかし、あなたは確かにそれはデータのエクスポートまたはコピーに対するGoogle Maps/Google Earth APIs Terms of Service

10.1.3制限事項に反しないすべきです。

（b）コンテンツのプリフェッチ、キャッシング、または保存はしません。 （ ） Maps APIの実装を一時的に安全に行う場合は、 のパフォーマンスを向上させるためにコンテンツ量が制限されていますが、その場合は、 個のコンテンツが保存されることを除いて、 サービスの外部のコンテンツの使用を許可しない方法で、 （ii）Maps APIの特別な保管を許可するコンテンツ識別子またはキー。たとえば、 の独立したデータベースを作成するためにコンテンツを使用してはならない「の場所を。」

Answer 2

いくつかのコード

を作る私は5歳に基づいてスクリプトを作成しましたRASGのアイデア。隠しマップを作成して、完全にロードされたらズームインしてください。すべてのズームをキャッシュするまで何度も何度もやります。作業はfiddle is hereです。ズームの進行状況を表示するには、右上隅にdivという情報を配置しました。

// 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); 
    } 
}); 

実際に地図をキャッシュしていますか？

まあ、ブラウザのキャッシュをクリアし、フィドルを開きます。

は、ブラウザのネットワークアクティビティでは、ダウンロードした画像をたくさん見ることができます。次に、地図をズームインしてアクティビティをもう一度見てください。すべての画像がキャッシュから読み込まれるように見えます。

はそれがお役に立てば幸いです。