Zoom系スクリプト GoogleMap Auto Zoomerの公開
2015/12/07
Zoom系のスクリプト第二弾、GoogleMap Auto Zoomer.jsというのを作りました。
Google Maps API v3を使用したスクリプトで、jQueryなどライブラリ非依存です。
機能は地図上に色分けされた矩形エリアを表示し、それにカーソルを合わせると自動的にそのエリアがマップ全体に拡大するというもの。 グーグルマップにこんな機能があればいいなと、ふと思い制作しました。
デモページはこちらです。
ライブラリをversion 0.2に更新しました。マウスオーバー時のおかしな挙動の修正です。
GoogleMaps APIのライブラリを読み込んだ後に、GoogleMap Auto Zoomer.jsを読み込むだけでよく、ユーザースクリプトをいちいち書く必要がありません。
ただし、HTMLに次のような書式に従ってDIV要素を記述する必要があります。
クラス属性名をgmap-auto-zoomerとして、以下data-*属性名のプロパティをいくつか指定します。data-latlngは地図の中心部分の地図座標を指定します。座標の調べ方ですが、まずグーグルマップのページの地図上で、中心位置にしたい場所にカーソルを合わせて右クリックを押します。すると「この場所について」というメニューが出てくるので、それをクリックするとキーワード検索の窓に緯度経度の座標が表示されます。あとは座標をコピーしてこのdata-latlngの値としてペーストすればOKです。
data-zoom data-default-zoomlevelプロパティは地図のズームレベルを指定します。ズームレベルとは、世界地図全体が表示されるレベルをゼロとした地図の縮尺基準です。1レベルずつ上がるごとに縮尺が小さくなっていきます。10前後くらいから実用的なズームレベルになります。実際にはグーグルマップのページでレベルを調整しながら最適なズームレベルを見つけていくことになります。
data-targetプロパティは、ズーム後の地図の中心点となる座標を指定します。この座標にはマーカーが表示され、その周辺が色分けされた四角いエリアに囲まれます。
これらは必須のパラメータとなりますが、そのほかにdata-zoomlevelというプロパティを任意で指定可能で、1以上の数値を入れます。実用レベルでは1～3までです。数値を大きくすると矩形エリアが小さくなっていきます。 また、各DIV要素には別途、CSSでwidth、heightプロパティを指定しなければなりません。これを忘れると地図が表示されません。
動作状況はFirefoxとChromeの最新バージョン、およびInternet Explorerの9-10で確認していますが、Internet Explorer 8では動作しませんでした。バージョン8以下のIEについては今後対応していきたいと思います（予定）。