スポンサーリンク

Web開発

JSを書かずにGoogle Mapに吹き出しやオリジナルマーカーを設置できるjQueryプラグイン「AxGmap」

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 を読み込みます。

地図の作成

クラス名 axgmap が付与された要素が、地図本体となります。
そして、地図要素に、data-○○属性を付与することで各種設定を行います。

data-latlng:地図の中央座標
data-zoom:地図のズームレベル(縮尺)
data-map-width:地図の横幅 (省略時はCSSのwidth)
data-map-height:地図の縦幅 (省略時はCSSのheight)

マーカーの設置

東京タワー

地図要素の子要素は、マーカー要素となります。
マーカー要素も、地図要素と同じようにdata-○○属性を付与することで設定を行います。

data-latlng:マーカーを設置する座標 (省略時は地図の中央)
data-title:マウスホバー時に表示されるタイトル
data-window-open:true or 1 で最初から吹き出しを開いておく

マーカー要素内部のHTMLが、そのまま吹き出し(情報ウィンドウ)の内容となります。
マーカー要素の内部が空の場合、吹き出しは表示されません。

また、複数の吹き出しがある場合、1つの吹き出しが開くと、他の吹き出しは閉じられます。

オリジナル画像のマーカーを設置

東京タワー
両国国技館
東京都庁

マーカー要素に 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 数値 地図の横幅 (初期値:CSSのwidth)
data-map-height 数値 地図の縦幅 (初期値:CSSの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とスクリプトの混在を避け、美しい実装を保ちながら、動的に地図を表示することができます。

>>[GitHub] Nouris-Inc/jquery-axgmap



スポンサーリンク