以前の投稿でGoogle Maps JS APIを使って「住所から緯度経度を取得し地図を検索する」機能を実装する方法という記事を書きましたが、こちらの仕組みを使ってjQueryプラグインを作ってみました。住所、場所名、緯度経度から位置情報を取得して、Googleマップの地図を表示させるjQueryプラグインとなります。ここで紹介させていただきます。
jquery.cbgetmaps.jsの概要
「住所」、「場所名」、「緯度経度」から位置情報を取得して、地図を表示させるjQueryプラグインです。地図の表示は、Google Maps JavaScript APIを使用して行っています。1回のプラグインの実行で、複数の位置情報を取得して地図を表示させることも可能。レスポンシブにもデフォルトで対応しています(オプションで変更可)。用途としては、写真ブログで撮影スポットの地図を表示させるなどが考えられます。
サンプル
まずは、jsdo.itで作成した以下のサンプルをご覧ください。
また、私の写真ブログでも当プラグインは使っていませんが、同様の仕組みで地図を表示させています。
実装方法
1. 外部ファイルを読み込む
「jQuery」、「Google Maps JavaScript API」、「当プラグイン」をページに読み込みます。
Google Maps JapaScript APIの読み込みの際に、「sensor=true」というパラメーターをつけていますが、このパラメーターは必須となっており、Google Maps APIを実装するアプリケーションがユーザーの位置情報を取得するのにセンサー(GPS など)を使用するかどうかを示すためのものです。詳細はGoogle Maps APIのスタートガイドをご覧ください。
2. 位置情報を取得する
地図を表示させたい場所の位置情報を取得します。class属性値に「cb-getlocation」を指定した要素のtitle属性に、「住所」か「場所名」か「緯度,経度(緯度と軽度の間はカンマ区切り)」を設定することで、位置情報が取得されるようになります。
ex.1 「住所」から位置情報を取得する場合
ex.2 「場所名」から位置情報を取得する場合
ex.3 「緯度経度」から位置情報を取得する場合
※緯度経度の情報はGooleマップの任意の場所で右クリックし、「ここの場所について」を選択すると表示されます。
3. 取得した位置情報をもとに地図を表示させる
地図を表示させたい要素に対して「class=”cb-mapcanvas”」を指定することで、地図が表示されるようになります。(注意点としては「ステップ2」で位置情報を取得した要素とセットで設置するようにしてください。次のステップでグループ化します。)
位置情報の取得と地図の表示を同じ要素内で行ってもOKです。
4. 2と3をグループ化し、プラグイン実行用のセレクターを設定する
「位置情報の取得用の要素」と「地図表示用の要素」をグループ化し、プラグインを実行するためのセレクター(ここでは「class=”cb-getmap”」)を設定します。
ex.1 基本スタイル(取得と表示は別々の要素で)
ex.2 取得と表示を同じ要素内で行った場合
5. プラグインを実行する
位置情報を取得させる「class属性cb−getmap(class属性の値は任意)」を指定した要素のjQueryオプジェクトに対し、「cbGetMapsメソッド」を指定し、プラグインを実行させます。
オプション
当プラグインはオプションの設定も可能です。オプションを設定の仕方は以下の通りです。(設定されている値はデフォルト値となります。)
- map_location_name
- 位置情報を取得するためのtitle属性を指定する要素のClass属性値
- map_canvas_name
- 地図を表示させる要素のClass属性値
- map_canvas_width
- 表示させる地図の幅(cssのwidthに設定できる値)
- map_canvas_height
- 表示させる地図の高さ(cssのheightに設定できる値)
- map_canvas_text
- 地図の下に表示されるGooleマップへのリンクのアンカーテキスト
- map_canvas_text_size
- 地図の下に表示されるGooleマップへのリンクのアンカーテキストのサイズ
- map_zoom
- 表示される地図の縮尺
- map_type
- 表示される地図のタイプ [ROADMAP], [SATELLITE], [HYBRID], [TERRAIN]
実装例
上記の実装方法を踏まえた実装例を書いておきます。
実装例
結果
上記の実装結果は以下の通りとなります。
ダウンロード
興味を持っていただけたら、ぜひ当jQueryプラグインを使ってみてください。今後まだまだバージョンアップさせていく予定なので、何かご意見、ご要望などありましたら、こちらのコメント欄でもよいのでお知らせいただけますと幸いです。
コメント