マップタイル変更 - Google Maps

Google Mapsを使ったWebサイトを作成する時、マップタイルを変更できる。

マップタイルとは
- マップタイル | ESRIジャパン

マップタイルを変える必要性は、もちろんデザインを変えるという用途もあるが、政治的要因なこともよくある。Google Maps の地図はGoogleが作成・管理する物なので（大元のデータはゼンリンだが、そこから調整を加えている）、日本が主張する国境や表記と一致する保証が無く、自治体など公の資料としては使いづらい。

日本が主張する地図なら一番確かなのは行政機関だ、ということで、国土地理院がマップタイルを公開しているのでそれを使う。詳細は以下のリンクにあるが、基本的には出典を表記すれば無償利用できる。

地理院地図｜地理院タイル一覧

あくまで大元のマップエンジンはGoogle Maps apiを使った上で、ガワだけ地理院タイルを使うので、Google Mapsでの既存コードは変更の必要は無い。

流れ

API KEYの取得とか、Google Maps自体に関係するものは省略。

MapTypeインターフェイスを実装した mapType オブジェクトの定義がメインとなる。

地理院タイル用の mapType オブジェクトを定義。以下などの項目を設定
- 最大・最小ズーム率
- 1タイルのサイズ
- タイル画像を返す関数
google.maps.Map オブジェクトに mapType オブジェクトを任意のIDとともにセット
セットした mapTypeId を指定

実装

Goma-An さんのソースを参考

        
          
          
              
              // 地理院タイル 標準地図の MapType 定義
function GSIstdMapType() {
}
 
GSIstdMapType.prototype.tileSize = new google.maps.Size(256, 256);
GSIstdMapType.prototype.maxZoom = 18; // 0～18→標準地図
GSIstdMapType.prototype.name = "地理院地図";
GSIstdMapType.prototype.alt = "国土地理院の標準地図を見る";
GSIstdMapType.prototype.getTile = function (tileCoord, zoom, ownerDocument) {
    var tile_x = tileCoord.x % Math.pow(2, zoom);
    if (tile_x < 0) {
        tile_x += Math.pow(2, zoom);
    }
    var img = ownerDocument.createElement("img");
    img.style.width = this.tileSize.width + "px";
    img.style.height = this.tileSize.height + "px";
    img.src = "//cyberjapandata.gsi.go.jp/xyz/std/" + zoom + "/" + tile_x + "/" + tileCoord.y + ".png";
    img.onerror = function () {
        this.src = "tile_nodata.gif";
    };
    return img;
};
// 地理院タイル 標準地図の MapType 定義ここまで=====
     
// MapType をID "GsiStd" で登録
map.mapTypes.set("GsiStd", new GSIstdMapType);
 
// 地図の初期設定
var map_zoom = 16;
var center_lat = 36.0;
var center_lng = 136.5;
var map_options = {
    zoom: map_zoom,
    center: new google.maps.LatLng(center_lat, center_lng),
    mapTypeId: "GsiStd",  // IDを指定
};
     
// 描画
var map = new google.maps.Map(document.getElementById("map_canvas"), map_options);

            

        
      