カスタムマップを Google Maps JavaScript API を使ってスクロール地図にする方法

地理人さんの想像都市を勝手にスクロール地図化を作ったところ受け取った、下記メンションに対する一定の回答として。

@cat_in_136 突然で申し訳ありませんが、僕も地理人さんと同じく架空の地図を作っているものです。僕も同じようにこの地図（ http://t.co/NZxdIIJbVZ ）でスクロール/拡大縮小地図を作りたいと思っているのですが、方法を教示いただいてもよろしいでしょうか？
— 想像地図の篠永 (MACHO筋トレ) (@koridentetsu) March 23, 2014

Google Maps APIを駆使すればいくらでもできるが、極めて簡単にできるようにしてみた。

テンプレを落とす

一から作るのはダルいと思うのでテンプレートを用意した。 "Download ZIP"というところをクリックしてZIPをダウンロードする。

https://github.com/cat-in-136/custom_map_tutorial

余計な補足：もちろんgitを使って、git clone https://github.com/cat-in-136/custom_map_tutorial.gitでクローンして…をやってもいい。

フォルダー構成

テンプレートのファイルの構造は（本記事執筆時）以下のようになっている：

simple_tile\
- gmap3\ --- Google Maps API をつかったカスタムマップのテンプレート
  - index.css --- スタイルシート、変更不要
  - index.html --- HTMLファイル、変更箇所後述
  - index.js --- JavaScriptファイル、変更箇所後述
- osm-feaflet\ --- （本記事の対象外） Open Street Map を使ったカスタムマップのテンプレート
- tile\ --- サンプル地図データ
  - custom_map_tile_*_*.png
tools\
- ImageSlicerForCustomMap\ --- 私謹製の画像分割ツール
  - bin\
  - Release\
    - ImageSlicerForCustomMap.exe --- 画像分割ツール
  - *.csなど --- ソースコード

テンプレートとは言っているが、これ自体がサンプルとなるようにしてある。上記の index.html をウェブブラウザーでそのまま開くと私が適当に作った地図が表示されるようになっている。

まずは、適当な作業用フォルダーを作成し、その中で gmap3フォルダーをコピーする。この中のファイルは変更が必要だが後述する。

そして、地図データ用のフォルダーとしてtileフォルダーを作成する。ここに格納すべき画像ファイルは次節で述べる。

地図画像ファイルの作成

地図の画像を256x256ピクセルで分割してほしい。その時に画像のファイル名を下記のようにする：

custom_map_tile_0_0.png
custom_map_tile_1_0.png
custom_map_tile_2_0.png
...
custom_map_tile_10_0.png
custom_map_tile_0_1.png
custom_map_tile_1_1.png
...
custom_map_tile_10_9.png

数字の部分はルールがあり、位置関係が下記のようにする必要がある。

左上が custom_map_tile_0_0.png
一つ右（東）に位置する画像はひとつめの数字を進める。
一つ下（南）に位置する画像はふたつめの数字を進める。

要するに数字は下記のようなルールで番号を付けていく。

タイルの数字の関係

なお、テンプレートのところにちゃっかり入っている ImageSlicerForCustomMap.exe は、これをするためのツールであって、この exe ファイルに PNG ファイルまたは JPEG ファイルをドラッグアンドドロップすると同一フォルダに 256x256 ピクセルで分割したファイルが生成するようになっている。

`ImageSlicerForCustomMap.exe`へのドラッグアンドドロップ

`ImageSlicerForCustomMap.exe`へのドラッグアンドドロップの事後

小規模な地図ならば一旦一枚にまとめた巨大画像ファイルを作って、それを ImageSlicerForCustomMap.exe にドラッグアンドドロップすればつくれるだろう。

テンプレートで必要な箇所を修正する

gmap3フォルダー配下のファイルの一部は手直しが必要だ。

index.html での修正箇所

以下のタイトル部分をお好みのタイトルに変える：

  <title>＿タイトル＿</title>
↓
  <title>私の想像地図</title>

次は必須ではないが、JavaScriptがうまくうごかなかった環境とかのために何らかのリンクを貼ったほうがよいと思われる。（検索エンジン最適化も兼ねる）

 <div id="map_canvas">
   JavaScript を有効にしてください。
 </div>
↓
 <div id="map_canvas">
   JavaScript を有効にしてください。
   もしくは <a href="http://hoge.example.com/map.pdf">私の想像地図をPDFでみる</a>
 </div>

index.css での修正箇所

変更点なし。

index.js での修正箇所

以下の部分をあなたのウェブページなどに変える。私だったら下記のように変える：

  copyrightSpan.innerHTML = "地図データ &#169; " + "＿地図製作者＿".link("http://example.com/＿地図製作者のページへのリンク＿");
↓
  copyrightSpan.innerHTML = "地図データ &#169; " + "@cat_in_136".link("http://cat-in-136.blogspot.com/");

余計な注釈：地図画像を上の例とは違った置き方やファイル名とした場合は下記の箇所を変えると動作する。html ファイルからの相対パスかあるいは絶対パスを指定する。以下は変更例：

      return "../tile/custom_map_tile_%y_%x.png"
       .replace("%x", x.toString())
       .replace("%y", y.toString());
↓
      return "http://map-image.example.com/hoge/huga/tile_%y_%x.png"
       .replace("%x", x.toString())
       .replace("%y", y.toString());

以上でできあがり

以上で出来上がり。自分一人で楽しむのならばそのままウェブブラウザで開けば良い。

公開するのならばそのフォルダ構成のままウェブサーバーにアップロードする。すなわち以下の様にする：

http://map.example.com/hoge/huga/gmap3/index.html --- ここにアクセスしてもらう
http://map.example.com/hoge/huga/gmap3/index.css
http://map.example.com/hoge/huga/gmap3/index.js
http://map.example.com/hoge/huga/tile/custom_map_tile_*_*.png --- 先程作った地図画像は tile フォルダ以下に置く

補足

この方法のポイントとして縮尺を表示しないようにしている。
- Google Maps API はメルカトル図法をベースとしているため、緯度経度を考慮しないと縮尺をあわせることはむずかしい。
- しかし縮尺を表示しないことで単にスクロール機能だけを流用することができる。
規約上 Google のロゴを消すのは（技術上可能だが）してはいけない。
- かえってリアリティが出ているともいえる。
- クリックすると Google Maps の北極海付近に飛ばされるがキニシナイキニシナイ
初期位置の調整方法は現在考え中
- どのようにすればいいのだろう…
これを書いた後にPS_Bramus.GoogleMapsTileCutterというものを発見してしまったorz