JSを書かずにGoogle Mapに吹き出しやオリジナルマーカーを設置できるjQueryプラグイン「AxGmap」
ノウリスの前身となるチームで開発・配布していたjQueryプラグイン「AxGmap」を再編集し、GitHubで公開しました。
＞＞[GitHub] Nouris-Inc/jquery-axgmap
「AxGmap」はGoogle Mapの設置・カスタマイズを、HTMLの編集のみで簡単に行うためのjQueryプラグインです。
AxGmapの特徴
- HTML編集のみで地図を設置 (JavaScriptの記述不要)
- 複数のマーカー表示に対応
- 吹き出し(情報ウィンドウ)の表示に対応
- オリジナル画像のマーカー表示に対応
- マウスホイールによるズームや、ドラッグ移動の有効・無効を設定できる
- 地図上の各種コントロールの表示・非表示を設定できる
- 地図の座標やズームレベルなどのステータスを表示できる
AxGmapの使い方
初期設定
Google Maps API、jQuery、jquery.axgmap.js を読み込みます。
|
1 2 3 |
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="path/jquery.axgmap2.js"></script> |
地図の作成
|
1 2 3 |
<div class="axgmap" data-latlng="35.658582, 139.745430" data-zoom="15" data-map-width="620" data-map-height="320"> </div> |
クラス名 axgmap が付与された要素が、地図本体となります。
そして、地図要素に、data-○○属性を付与することで各種設定を行います。
・data-latlng：地図の中央座標
・data-zoom：地図のズームレベル(縮尺)
・data-map-width：地図の横幅(px)
・data-map-height：地図の縦幅(px)
マーカーの設置
|
1 2 3 4 |
<div class="axgmap" data-latlng="35.658582, 139.745430" data-zoom="15" data-map-width="620" data-map-height="320"> <p data-title="東京タワー" data-window-open="1">東京タワー</p> </div> |
地図要素の子要素は、マーカー要素となります。
マーカー要素も、地図要素と同じようにdata-○○属性を付与することで設定を行います。
・data-latlng：マーカーを設置する座標 （省略時は地図の中央）
・data-title：マウスホバー時に表示されるタイトル
・data-window-open：true or 1 で最初から吹き出しを開いておく
マーカー要素内部のHTMLが、そのまま吹き出し(情報ウィンドウ)の内容となります。
マーカー要素の内部が空の場合、吹き出しは表示されません。
また、複数の吹き出しがある場合、1つの吹き出しが開くと、他の吹き出しは閉じられます。
オリジナル画像のマーカーを設置
|
1 2 3 4 5 6 |
<div class="axgmap" data-latlng="35.681168, 139.746675" data-zoom="12" data-map-width="620" data-map-height="320" data-map-status="1"> <p data-marker-image="./yellow-dot.png" data-latlng="35.658582, 139.745430" data-title="東京タワー" data-window-open="1">東京タワー</p> <p data-marker-image="./police.png" data-latlng="35.696858, 139.793619" data-title="両国国技館">両国国技館</p> <p data-marker-image="./pink-pushpin.png" data-latlng="35.689664, 139.691699" data-title="東京都庁">東京都庁</p> </div> |
マーカー要素に data-marker-image属性でURLを指定すると、オリジナル画像をマーカーとして使用できます。
座標やズームレベルの取得方法
地図要素にdata-map-status属性を指定すると、地図の設定に必要な情報がリアルタイム表示されます。
・Center LatLng：地図の中央座標
・Zoom：ズームレベル
・Right Click LatLng：地図上を右クリックした地点の座標
また、Google Mapのサイト上では、地図上の地点を右クリックし「この場所について」を選択すると、その地点の座標が表示されます。
まずは、この座標を参考に設定を調整するのが良いでしょう。
AxGmapの設定項目一覧
AxGmapでは、地図要素やマーカー要素に、data-○○属性を付与することで各種設定を行います。
地図要素
| 属性名 | 値 | 説明 |
|---|---|---|
| data-latlng | lat, lng | 地図の中央座標 |
| data-map-width | 数値 | 地図の横幅 |
| data-map-height | 数値 | 地図の縦幅 |
| data-zoom | 数値 | ズームレベル |
| data-max-zoom | 数値 | ズームレベルの最大値 |
| data-min-zoom | 数値 | ズームレベルの最小値 |
| data-map-type | HYBRID | ROADMAP | SATELLITE | TERRAIN | 地図タイプ (初期値：ROADMAP) |
| data-draggable | true or false | ドラッグ移動の有効・無効 |
| data-scrollwheel | true or false | マウスホイールによるズームの有効・無効 |
| data-map-status | true or false | 地図ステータスの表示・非表示 |
| data-map-type-control | true or false | 地図タイプコントロールの表示・非表示 |
| data-overview-map-control | true or false | オーバービューコントロールの表示・非表示 |
| data-pan-control | true or false | パンコントロールの表示・非表示 |
| data-rotate-control | true or false | 回転コントロールの表示・非表示 |
| data-scale-control | true or false | スケールコントロールの表示・非表示 |
| data-street-view-control | true or false | ストリートビューコントロールの表示・非表示 |
| data-zoom-control | true or false | ズームコントロールの表示・非表示 |
マーカー要素
| 属性名 | 値 | 説明 |
|---|---|---|
| data-latlng | lat, lng | マーカーの設置座標 (初期値:地図の中央座標) |
| data-title | 文字列 | ロールオーバー時に表示されるタイトル |
| data-window-open | true or false | 吹き出しを開いておくか |
| data-marker-image | URL | オリジナルマーカー画像のURL |
※値が true or false となっている項目は、1 or 0 で指定することも可能です。
HTMLとスクリプトの混在を避け、美しい実装を保つ
AxGmapはWebアプリケーション開発のために生まれました。
AxGmapを使用することで、Webアプリケーション開発者は、HTMLとスクリプトの混在を避け、美しい実装を保ちながら、動的に地図を表示することができます。
|
1 2 3 4 5 6 7 |
<?php print "<div class='axgmap' data-latlng='".$lat.",".$lng."' data-zoom='15'>"; print "<div data-title='".$title."' data-window-open='1'><h3>".$title."</h3><p>".$addr."</p></div>"; print "</div>"; ?> |
＞＞[GitHub] Nouris-Inc/jquery-axgmap