はじめに
Googleマップに象徴されるように、Webページで地図を表示することは近年一般的に行われています。特に静的な画像ではなくJavaScriptで動的に描画される地図は、利用者がインタラクティブに操作を行って場所の情報を取得できるため、Webページの利便性を高める手段として有用です。
そこで、JavaScriptの処理によりWebページ上に地図を表示するjQueryプラグインに着目し、以下3種類を紹介します。
- （1）jQuery Vector Maps： 世界地図を表示
- （2）Japan Map： 日本地図を表示
- （3）jquery.gmap3： Googleマップを表示
（1）と（2）は世界地図／日本地図という大きな単位で地図を表示し、国・地域や都道府県といった単位で利用者に情報を表示したり、利用者に選択させたりする機能を備えており、例えば以下のような利用方法が考えられます。
- 言語を意識せずに出身国・地域を選択できる入力フォーム
- 地図にマウスカーソルを当てるとその都道府県の名物を表示する観光案内
一方でGoogleマップそのものを表示する（3）は、特定の場所（地点）に着目して情報を表示する処理が得意で、以下のような利用方法が考えられます。
- Wi-Fiスポットの場所と内容を地図上に表示
- リストから支社を選ぶと地図で場所を表示する会社案内
まず今回は（1）と（2）を紹介します。（3）については次回紹介していきます。
対象読者
- インタラクティブな世界地図・日本地図をWebページに表示させたい方
- Webページに画像で地図を掲載するより一工夫したい方
必要な環境
jQueryには1.x系と2.x系が存在し、2.x系はInternet Explorer 6～8との互換性を切り捨てることでコードサイズを縮小しています。今回は互換性を考慮して1.x系の最新版であるjQuery 1.11.1を使用します。
今回は以下の環境で動作を確認しています。
-
Windows 7 64bit版
- Internet Explorer 11
