Google Maps API v3 で地下鉄路線図を表示する〜パート2〜

Google Maps API v3 で地下鉄路線図を表示する で、地下鉄路線図だけを表示することを紹介したが、 今回は他に地図を表示する方法(URL)を見つけたよ、という話。

経路検索でアクセスしている画像ファイルなどを見た結果、 以前記事を書いた時と違って下記のようなURLに変わっていることに気づいた。

このURLには style なるものがあったり色々遊べそうである。 で、不要そうなものを削り試行錯誤のうえ、以下のようなURLのアクセスで ImageTileLayer で表示させればよいと判明。

オススメの style は以下の通り(style=21が個人的オススメ)：

• style=0: 地下鉄を含む経路検索結果と同じような地図表示
• style=1: 地名・駅名などのみ。オーバーレイして使うほうがいいだろう。
• style=2: 文字がでかい。目が悪くても見やすいのではないか。
• style=3: 文字がない。白地図的使い方ができそう。
• style=4: 衛星画像で地下鉄を含む経路検索結果でオーバーレイ表示される画像
• style=5: 文字がほとんどない。地下鉄と道路の対比がしやすい。
• style=15: 地下鉄網だけ表示。オーバーレイして使うほうがいいだろう。
• style=21: 道路表示を目立たなくしたもの。鉄道網が把握しやすい。
• style=22: モノクロの中から浮き上がる地下鉄網
• style=25: 闇の中から浮き上がる地下鉄網

ImageMapType クラスの作り方は下記の通り。 あとは、この MapType を登録する（登録処理部のソース略）。

function createTransitMapType (styleId, name, alt) {
  if (name == undefined) name = "style="+styleId;
  return new google.maps.ImageMapType({
    name: name, alt: 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://mts%m.google.com/mapslt?lyrs=transit:prev|pm:1|vm:1,m&x=%x&y=%y&z=%z&w=256&h=256&style=%s"
        .replace("%m", mt)
        .replace("%x", coord.x).replace("%y", coord.y)
        .replace("%z", zoom)
        .replace("%s", styleId);
      return url;
    }
  });
}

なお、これはドキュメント化されていない非公式なものなので、 いつ使えなくなるかわからない代物なので注意するように。