MobilyMapプラグイン
次に、画像上にポップアップを表示するMobilyMapプラグインを使ってみます。例えば、地図が描かれた画像上に、会社やお店の情報のテキストをポップアップさせるサンプルを考えてみます。以下のサイトからプラグインをダウンロードします。
mobilymap.zipというファイルがダウンロードされるので、解凍後、pluginsフォルダにコピーします。
リスト3に、MobilyMapプラグインの使用例を示します。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MobilyMapサンプル</title>
<!--1.jQueryの読み込み-->
<script type="text/javascript" src="js/jquery-1.4.4.min.js">
<!--2.プラグインの読み込み-->
<script type="text/javascript" src="plugins/mobilymap/js/MobilyMap.js"></script>
<link href="plugins/mobilymap/css/default.css" rel="stylesheet" type="text/css" />
<!--3.プラグインの設定-->
<script type="text/javascript">
$(function () {
$('.SampleMap').mobilymap({
position: 'center',//ロード後の地図位置を指定
popupClass: 'bubble',//ポップアップのクラスを指定
markerClass: 'point',//マーカーのクラスを指定
popup: true,//ポップアップ表示させるかを指定
cookies: true,//最後の地図位置を記憶させるかを指定
caption: true, //caption表示を指定
setCenter: true, //マーカークリック時に画像を中心に表示させるかを指定
onMarkerClick: function () { },//マーカークリック時の処理
onPopupClose: function () { },//ポップアップを閉じる時の処理
onMapLoad: function () { }//地図ロード時の処理
});
});
</script>
</head>
<body>
<h1>MobilyMapサンプル</h1>
<div id="content">
<!--4.classの指定-->
<div class="SampleMap">
<!--5.背景画像の指定-->
<img src="plugins/mobilymap/SampleMap.jpg" alt="Sample Map" width="500" height="250" />
<!--6.マーカーアイコン表示位置の指定-->
<div class="point" id="p-190-55">
<!--7.ポップアップ時のテキストの指定-->
<span>株式会社翔泳社</span>
<p>住所:〒160-0006 東京都 新宿区 舟町5</p>
<p>アクセス:営団地下鉄丸の内線 四谷三丁目駅より徒歩2分</p>
<p> 都営地下鉄新宿線 曙橋駅より徒歩5分</p>
<p> ファミリーマートの隣 </p>
<p>電話:03-5362-3800（代表）</p>
<p>URL:<a href="http://www.shoeisha.co.jp/">http://www.shoeisha.co.jp/</a></p>
</div>
</div>
</div>
</body>
</html>
今回のサンプルでは、クリック時のマーカーアイコンやポップアップ時のテキストのスタイルなどは、mobilymap.zipをダウンロードした際に含まれているファイル（default.css）をそのまま使用し、背景に使用する画像のみを差し替えることにします。
まず、背景に使用する画像をmobilymapフォルダ直下に配置します。次に、4のように表示領域のクラス（id=SampleMap）を作成し、5のように使用画像を指定します。
次に、6のようにマーカーアイコンの表示位置をp-x座標（左からの距離）-y座標（上からの距離）のように指定します。それをクリックした際に、ポップアップに表示されるテキストは7のように指定します。マーカーアイコンを複数使用したい場合は6と7のひと固まりとし、必要な数だけ準備します。そして、4で指定した表示領域（id=SampleMap）のスタイル設定をmobilymapフォルダ直下のcssフォルダにあるdefault.cssにリスト4のように追記し、今回のサンプルでは不要な部分を削除します。削除箇所については同フォルダにあるダウンロード時に含まれているdefault.cssファイルを名称変更したdefault_old.cssファイルと比較してみてください。
.SampleMap {
margin:10px 0;
width:500px;
height:250px;
}
その後、MobilyMapプラグインは3のように表示領域に指定したクラス（id=SampleMap）に対して、ロード後の地図位置（position）などを指定します。MobilyMapプラグインの主なオプションを表3に示します。
| オプション | 説明 | デフォルト |
| position | ロード後の地図位置を指定 X Y/center/top left/top right/bottom left.bottom right |
center |
| popupClass | ポップアップのクラスを指定 | bubble |
| markerClass | マーカーのクラスを指定 | point |
| popup | ポップアップ表示させるかを指定 true/false |
TRUE |
| cookies | 最後の地図位置を記憶させるかを指定 true/false |
TRUE |
| caption | caption表示を指定 true/false |
TRUE |
| setCenter | マーカークリック時に画像を中心に表示させるかを指定 true/false |
TRUE |
| onMarkerClick | マーカークリック時の処理 | function () { } |
| onPopupClose | ポップアップを閉じる時の処理 | function () { } |
| onMapLoad | 地図ロード時の処理 | function () { } |
MobilyMapプラグイン使用時の結果を、図7、図8に示します。
図7の黄緑色のマーカーアイコンをクリックすると、図8のように会社情報が表示されます。
