jquery.cbgetmaps.jsの概要

「住所」、「場所名」、「緯度経度」から位置情報を取得して、地図を表示させるjQueryプラグインです。地図の表示は、Google Maps JavaScript APIを使用して行っています。1回のプラグインの実行で、複数の位置情報を取得して地図を表示させることも可能。レスポンシブにもデフォルトで対応しています（オプションで変更可）。用途としては、写真ブログで撮影スポットの地図を表示させるなどが考えられます。

• プラグインのダウンロード

• jquery.cbgetmaps.js [GitHub]

サンプル

まずは、jsdo.itで作成した以下のサンプルをご覧ください。

• サンプル

また、私の写真ブログでも当プラグインは使っていませんが、同様の仕組みで地図を表示させています。

• 写真ブログmae’s works

実装方法

1. 外部ファイルを読み込む

「jQuery」、「Google Maps JavaScript API」、「当プラグイン」をページに読み込みます。

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?sensor=true"></script>
<script src="jquery.cbgetmaps.min.js"></script>

Google Maps JapaScript APIの読み込みの際に、「sensor=true」というパラメーターをつけていますが、このパラメーターは必須となっており、Google Maps APIを実装するアプリケーションがユーザーの位置情報を取得するのにセンサー（GPS など）を使用するかどうかを示すためのものです。詳細はGoogle Maps APIのスタートガイドをご覧ください。

• スタート ガイド – Google Maps JavaScript API v3 — Google Developers

2. 位置情報を取得する

地図を表示させたい場所の位置情報を取得します。class属性値に「cb-getlocation」を指定した要素のtitle属性に、「住所」か「場所名」か「緯度,経度（緯度と軽度の間はカンマ区切り）」を設定することで、位置情報が取得されるようになります。

ex.1 「住所」から位置情報を取得する場合

ex.2 「場所名」から位置情報を取得する場合

ex.3 「緯度経度」から位置情報を取得する場合

※緯度経度の情報はGooleマップの任意の場所で右クリックし、「ここの場所について」を選択すると表示されます。

3. 取得した位置情報をもとに地図を表示させる

地図を表示させたい要素に対して「class=”cb-mapcanvas”」を指定することで、地図が表示されるようになります。（注意点としては「ステップ2」で位置情報を取得した要素とセットで設置するようにしてください。次のステップでグループ化します。）

<p class="cb-getlocation" title="東京都庁">東京都庁</p>
<div class="cb-mapcanvas"></div>

位置情報の取得と地図の表示を同じ要素内で行ってもOKです。

4. 2と3をグループ化し、プラグイン実行用のセレクターを設定する

「位置情報の取得用の要素」と「地図表示用の要素」をグループ化し、プラグインを実行するためのセレクター（ここでは「class=”cb-getmap”」）を設定します。

ex.1 基本スタイル（取得と表示は別々の要素で）

<div class="cb-getmap">
    <p class="cb-getlocation" title="東京都庁">東京都庁</p>
    <div class="cb-mapcanvas"></div>
</div>

ex.2 取得と表示を同じ要素内で行った場合

<div class="cb-getmap">
    <div class="cb-getlocation cb-mapcanvas" title="35.689599,139.692090"></div>
</div>

5. プラグインを実行する

位置情報を取得させる「class属性cb−getmap（class属性の値は任意）」を指定した要素のjQueryオプジェクトに対し、「cbGetMapsメソッド」を指定し、プラグインを実行させます。

<script>
$(".cb-getmap").cbGetMaps();
</script>

オプション

当プラグインはオプションの設定も可能です。オプションを設定の仕方は以下の通りです。（設定されている値はデフォルト値となります。）

$(".cb-getmap").cbGetMaps({
    map_location_name: ".cb-getlocation",
    map_canvas_name: ".cb-mapcanvas",
    map_canvas_width: "100%",
    map_canvas_height: "120px",
    map_canvas_text: "大きな地図で見る", // タグ使用可
    map_canvas_text_size: "14px",
    map_zoom: 13,
    map_type: "ROADMAP" // ROADMAP, SATELLITE, HYBRID, TERRAIN
});

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]

実装例

上記の実装方法を踏まえた実装例を書いておきます。

実装例

<!-- === HTML === -->

<!-- ■ 基本スタイル -->
<div class="cb-getmap">
<!-- 位置情報の取得 -->
<p><a href="https://www.google.co.jp/maps?q=東京都庁" class="cb-getlocation" title="東京都庁">東京都庁</a></p>
<!-- 地図の表示 -->
<div class="cb-mapcanvas"></div>
</div>

<div class="cb-getmap">
<!-- 位置情報の取得 -->
<p><a href="https://www.google.co.jp/maps?q=大阪城" class="cb-getlocation" title="34.687375,135.526226">大阪城</a></p>
<!-- 地図の表示 -->
<div class="cb-mapcanvas"></div>
</div>

<!-- ■ 同じ要素内で位置情報の取得と地図の表示を行う場合 -->
<div class="cb-getmap2">
<div class="cb-getlocation cb-mapcanvas" title="34.687375,135.526226"></div>
</div>


<!-- === JavaScript === -->
<script>
// オプションなし
$(".cb-getmap").cbGetMaps();

// オプションあり
$(".cb-getmap2").cbGetMaps({
    map_canvas_height: "300px",
    map_canvas_text: "<i>別ウィンドウで地図を表示</i>", // タグ使用可
    map_canvas_text_size: "10px",
    map_zoom: 16,
    map_type: "HYBRID"
});
</script>

結果

上記の実装結果は以下の通りとなります。

ダウンロード

興味を持っていただけたら、ぜひ当jQueryプラグインを使ってみてください。今後まだまだバージョンアップさせていく予定なので、何かご意見、ご要望などありましたら、こちらのコメント欄でもよいのでお知らせいただけますと幸いです。

• jquery.cbgetmaps.jsをダウンロードする
• jquery.cbgetmaps.js [GitHub]