Google Maps API v3 で地下鉄路線図を表示する
読み込み中です。しばらくお待ち下さい。
日本のGoogleマップでは、地下鉄の駅検索などをしたときに地下鉄の路線が強調表示される。 これはGoogleがそういうマップ画像を保持しているからできるのだが、現状Google Maps APIのいずれのバージョンも提供していない。
Googleマップでのその画像は"http://mt0.google.com/mapslt?lyrs=transit&x=?&y=?&z=?
"として、取得している。x,y,z
はそれぞれGoogle Maps API の地図の座標で述べられるx,y
およびズーム値である。
というわけで、結局以下のとおりカスタムマップを使って、地下鉄の路線図を簡単に利用することができる。
var subwayMapType = new google.maps.ImageMapType({
name: "地下鉄", alt: "地下鉄を見る",
tileSize: new google.maps.Size(256,256),
isPng: true,
maxZoom: 22,
minZoom: 10,
getTileUrl: function(coord, zoom) {
var mt = ((coord.y & 0x1 == 0)? 0 : 2) | (coord.x & 0x1);
var url = "http://mt%m.google.com/mapslt?lyrs=transit&x=%x&y=%y&z=%z&w=256&h=256&style=1"
.replace("%m", mt)
.replace("%x", coord.x).replace("%y", coord.y)
.replace("%z", zoom);
return url;
}
});
map.overlayMapTypes.insertAt(0, subwayMapType); // オーバーレイ表示するときの例
なお、このコードでは画像をダウンロードするURLにおいて、ドメイン名をmt0
~mt3
まで分散する仕掛けを入れてある。これはGoogleのサーバのロードバランスや画像ファイルのダウンロードの速度の向上に役に立つはずだが、検証はしていない。
残念なのは、日本の地下鉄しかサポートされていないこと、著作権表示の設定ができないため路線図のみ表示するとこの記事の冒頭に示したように著作権表示ができないことである。