マップタイル変更 - 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);

目次

マップタイル変更 - Google Maps

流れ

実装