GoogleマップのAPI V3 - カスタムタイル

Question

私は現在here

でGoogle Maps APIのV3に取り組んでいますが、21〜23の間でズームする場合は、マップ上の画像のオーバーレイがあるでしょう。画像の読み込みには時間がかかり過ぎて、別のタイルに分割して読み込みを容易にすることに決めました。私はタイルに画像をカットする自動タイルカッターを使用しています。

私はスクリプトに問題があります。

var OrgX = 31551; // the Google Maps X value of the tile at the top left corner of your Photoshop document 
    var OrgY = 50899; // the Google Maps Y value of the tile at the top left corner of your Photoshop document 

最初の質問どのようにPhotoshopドキュメントからのXとYの値を見つけるのですか？

私が最初の質問を解決することができたらどうですか？

第2質問ズームレベルに応じてタイルを表示するには、以下のコードが正しいですか？あるいは、コードを紛失していますか？

var BuildingsLayer = new google.maps.ImageMapType({ 
    getTileUrl: function(coord, zoom) { 
     return "http://search.missouristate.edu/map/tilesets/baselayer/" + zoom + "_" + coord.x + "_" + coord.y + ".png"; 
    }, 
    tileSize: new google.maps.Size(256, 256), 
    isPng: true 
}); 

map.overlayMapTypes.push(BuildingsLayer); 

Answer 1

自動タイルカッターを使用する代わりに、私はMapTilerを使用し、推奨しました。 画像をタイルにスライスするだけでなく、それを使用するためのjavascriptタイルスクリプトも生成します。

ただし、スクリプトはv2で記述されています。あなたは応じてコードを編集することができます：GoogleマップV3をサポートしていhttp://www.maptiler.com/：

v3は、スクリプト

var maptiler = new google.maps.ImageMapType({ 
    getTileUrl: function(coord, zoom) { 
return zoom + "/" + coord.x + "/" + (Math.pow(2,zoom)-coord.y-1) + ".png"; 
}, 
    tileSize: new google.maps.Size(256, 256), 
    isPng: true 
}); 

var map; 

function initialize() { 
map = new google.maps.Map(document.getElementById("map_canvas")); 
map.setCenter(new google.maps.LatLng(36.07, -112.19)); 
map.setZoom(11); 
map.setMapTypeId('satellite'); 
map.overlayMapTypes.insertAt(0, maptiler); 
} 

Credits