Google Map overlay map

2012/04
Google マップ オーバーレイマップ

南津電鉄京成上野地下線 の記事で使用した重ね合わせ地図についてメールで何件かお問い合わせをいただいたので、この機会に若干解説をしておきます。 これらは Google Maps JavaScript API V3 を使っており、その中のカスタムマップタイプの「オーバーレイマップ」というタイプを使用しています。 既存の Googleマップの上にレイヤーを作り、そこへ自サイトに置いた画像イメージを APIを使って重ねて同時に動かしているわけです。

ちなみに以前は Googleの APIを使用するには登録して自サイト用に APIキーを取得しなくてはなりませんでしたが、現バージョンでは必要ありません。 また 1日のページロード数 25,000以上は課金されますが、一般的な個人サイトではまずこれを超える心配は無いでしょう。

[ オーバーレイマップ サンプル ]

■とにかくすぐに動かしたい

私の作成したもの(上のサンプル)でよろしければ、右記に一式をアーカイブしたものを置いておきます。 Googleのサイトに繋がる環境ならとりあえずローカルでも動作可能になっていますので、ダウンロードして解凍の上、ブラウザでお試し下さい。

詳細は省きますが、動作原理としては OverlayMap.js の中で map = new google.maps.Map(containerm, myOptions) として Google基本マップの表示を行ない、MCustomTileLayer.js の中で map.overlayMapTypes.insertAt(0, self) の指示でオーバーレイの挿入を行なっています。 MTileLayerControl_v3.js はオーバーレイ表示のオンオフや透過度のコントロールをするスライダー部等を定義しています。 後者 2本の jsはデモギャラリーにあったものの改造です。

では以下、自作する場合の手順について概要説明です。

■準備

■システム構築

■重ね合わせ作業

■タイルの作成

以上、簡単ですがご説明まで。 多少とも参考になれば幸いです。

button Back to rail page