暫く前に、「googlemapでドラクエ」ということで、ドラゴンクエストの世界地図を Google Maps で表示するサイトが話題になりました。
当時、コレを見て感動したのを覚えています。
今では Google Maps API も v3 となり、v2 は正式に廃止され、アップデートすることが推奨されています。
ということなので、カスタムマップの作成を v3 でやってみます。
大きい画像の用意
まずは、拡大時に耐えるような大きな画像を用意します。
1900年に作成された日本の世界地図 から拝借しました。タイル（tile）を作成
Google Maps は、それぞれのズームレベルに合わせて 縦横 256px の画像（タイル）を地球全面に覆う仕組みになっています。
例えば、ズームレベル 1 では、256x256 px の画像を縦横 2枚、計 4枚のタイルにより構成されます。
ズームレベル 2 では、縦横それぞれ 2 倍の、計 16枚のタイルで構成されます。
GMIC - The GMap Image Cutter
というわけで、多数のタイルが必要になるのですが、自力でカットしていくのははっきり言って無理があります。
そこで GMIC というとても便利なツールの登場です。
このツールを使えば、用意した画像を Google Maps に合わせたタイルにカットしてくれます。しかも、解像度から最大ズームレベルまで判断してくれます。
使用方法も簡単で、ダウンロードした zip を解凍し、GMapImageCutter.batを実行（Windows の場合。その他は .sh）して起動させます。
起動したら、File を Open して、 Create するだけ！簡単です。動作も高速であっという間に作業が完了します。
出力ファイルには、タイル画像だけではなく、作成したタイルを表示するためのサンプル HTML も出力されます。
大きな画像を Google Maps 的に見たい！というなら、これだけで OK ですね。
V3
GMIC より出力された HTML は、残念ながら今現在は v2 の Google Maps API を使用しています。
そこでやっと本題の、カスタムマップを v3 で書き換えてみます。
ポイントは、ImageMapType というクラスを使うことで、一から MapType インターフェースを実装する手間を省いています。
サンプルは下記リンクから！
Google Maps API v3 カスタムマップサンプル
参考：
0 件のコメント:
コメントを投稿