maesblog

住所、場所名、緯度経度から位置情報を取得しGoogleマップを表示させるjQueryプラグイン「jquery.cb-getmaps.js」

以前の投稿でGoogle Maps JS APIを使って「住所から緯度経度を取得し地図を検索する」機能を実装する方法という記事を書きましたが、こちらの仕組みを使ってjQueryプラグインを作ってみました。住所、場所名、緯度経度から位置情報を取得して、Googleマップの地図を表示させるjQueryプラグインとなります。ここで紹介させていただきます。

jquery.cbgetmaps.jsの概要

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

プラグインを使用した地図の表示例
写真ブログに地図を表示

サンプル

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

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

実装方法

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のスタートガイドをご覧ください。

2. 位置情報を取得する

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

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

<p><a href="#" class="cb-getlocation" title="東京都新宿区西新宿2−8−1">東京都庁</a></p>

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

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

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

<p class="cb-getlocation" title="35.689599,139.692090">東京都庁</p>

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

Googleマップから緯度経度情報を取得

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

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

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

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

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

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プラグインを使ってみてください。今後まだまだバージョンアップさせていく予定なので、何かご意見、ご要望などありましたら、こちらのコメント欄でもよいのでお知らせいただけますと幸いです。

関連記事

コメント

  • 必須

コメント