GMapをXMLで初期化するjQueryプラグイン「jquery.xmap.js」 [ピクスログ]

4月 2008
日	月	火	水	木	金	土
« 3月		5月 »
	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

2008年4月2日水曜日 10:39:53

GMapをXMLで初期化するjQueryプラグイン「jquery.xmap.js」

WEB開発,javascript,プログラム [ by Mizugame ]

GMapを使うのって結構、設定が結構めんどくさかったりするんですよね。

なんで表示用の設定を書き込んだXMLを読み込むだけで、GMapを初期化できるjQuery用のプラグインを作ってみました。

開発をしやすいようにjQueryを使っただけなので、それほどjQueryの恩恵は感じられないプラグインですが・・・(^^;
まぁ、GMapの設定を簡単にするためのものなんで・・・(^^;;;

XMapでできること

XMLファイルを使って、簡単にGMapが初期化できます。

具体的には、以下がXMLで設定できます。

GMap座標の設定とマップ中央に表示し続けるアイコンを設定
表示するGMapコントローラーの設定
アイコンとマーカーの表示設定

以下、jquery.xmap.jsを使ったデモページです。
デモページ

まず、jQueryとxmapを準備する。

使うためにですが、まずjQuery本家で、jQueryをダウンロードしてきます。
最新版のjQuery(Packed版)

次に、jquery.xmap.jsをダウンロードします。
ダウンロード
（ZIP圧縮していますので、ダウンロード後、解凍してお使いください。）

あと当然ながら、GMapを利用しますので、利用登録をする必要があります。
Google マップ APIのサイトからGoogleアカウントを使って、APIキーを取得する必要があります。
Google マップ API 登録ページ

この３つが揃ったら、後は簡単。
設定用のXMLと、ほんの少しスクリプトを書くだけです。

GMapやjQueryをページに読み込む。

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[API Key]" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="jquery-latest.js" charset="shift_jis"></script>
<script type="text/javascript" src="jquery.xmap.js"></script>

のような感じで、GMapを利用するページでJSファイルを読み込む。

XMapを開始するためのJSスクリプトをページに書く

本当は先に設定ファイルの書き方を説明するべきだけど、スクリプトの方が簡単で短くすみそうなので、とりあえずこっちから説明します。

<div id="map">
    ここにGMapを表示する予定。
</div>

みたいな「map」っていうIDのDIVタグ内に、「setting.xml」というXMLファイルで初期化した、GMapを表示させる場合を想定して、スクリプトを書くとこうなる。

<script type="text/javascript">
    jQuery(function() { jQuery("#map").XMap("setting.xml"); });
</script>

これだけ。

「map」っていうIDだったので、jQuery(“#map”)と書いてるけど、「map」っていうclassの場合はもちろんjQuery(“.map”)のようになる。
（ただし、IDやclassに一致するすべての要素に対して、GMapを挿入する仕様）

XMap()には設定ファイルとなるXMLのパスを渡すだけです。

GMapの設定用XMLを書く

まずは、設定できるすべての項目を書いたXMLだと以下のような感じになります。

<?xml version="1.0" encoding="utf-8"?>
<data>
    <show>
        <center lat="34.701909" lng="135.494977" zoom="16" address="大阪駅">
            <img src="./module/center.png" width="30" height="30" />
            <shadow src="./module/center-shadow.png" width="30" height="30" />
        </center>
        <control>
            <large value="true" />
            <small value="false" />
            <zoom value="false" />
            <type value="true" />
            <overview value="true" />
            <scale value="true" />
        </control>
        <option>
            <wheelZoom value="true" />
        </option>
    </show>
    <icons>
        <icon name="icon-1">
            <img src="./module/icon-1.png" width="18" height="30" />
            <shadow src="./module/shadow-1.png " width="34" height="30" />
        </icon>
        <icon name="icon-2">
            <img src="./module/icon-2.png" width="18" height="30" />
        </icon>
    </icons>
    <markers>
        <marker name="marker-1" lat="34.701909" lng="135.494977" address="大阪駅">
            <option>
                <icon name="icon-1" />
                <drag value="true" />
                <title>大阪駅</title>
            </option>
            <html>
                &lt;h3 style="color:red"&gt;icon sample1&lt;/h3&gt;
                &lt;ul&gt;
                    &lt;li&gt;list1&lt;/li&gt;
                    &lt;li&gt;list2&lt;/li&gt;
                    &lt;li&gt;list3&lt;/li&gt;
                &lt;/ul&gt;
            </html>
        </marker>
        <marker name="marker-2" address="大阪府高津">
            <option>
                <icon name="icon-2" />
                <title>大阪府高津</title>
            </option>
        </marker>
    </markers>
</data>

そこそこ設定できるようにしているので、割とややこしく見えるかもしれないですが、順に説明します。

とりあえずXML宣言部分と、一番外のdataタグは説明を省きますが、利用する場合はこういうものだと割り切って記述するようにしてください(^^;

dataタグ内は大きく分類すると、show要素、icons要素、markers要素と３つに分かれています。
全部一度だとわかりにくいと思うので、３つの要素を以下で順に説明します。

show要素内の設定について

「show」要素内はGmapの表示位置やコントローラーの表示など、GMapの基本的な表示に関する設定です。

「show」要素内の「center」要素は、GMapで表示する中心座標やズームレベルなどを設定します。

<center lat="緯度" lng="経度" zoom="GMapのズームレベル" address="地図の中心座標を住所や駅名から検索">
    <img src="地図の中心に表示するアイコン画像を指定" width="画像の横サイズ（数値）" height="画像の縦サイズ（数値）" />
    <shadow src="アイコンの影画像を指定" width="画像の横サイズ（数値）" height="画像の縦サイズ（数値）" />
</center>

中身の設定はざっとこんな感じです。

「center」タグ内の「address」に住所などを書くと便利ですが、見つからない場合や、検索まで時間がかかるときがあるので、緯度や経度も設定して置く方が無難です。

もし、緯度や経度を設定していない場合で、検索した住所の座標が見つからなかった場合は、GMapの登録を済ませたときに参考ソースでもらえる座標が、デフォルトとして適用されるようにしているので、アメリカの地図が出ます。

ズームレベルは「0～19」までの数値を入れてください。設定しなかった場合は、デフォルトとして「13」に設定されます。
「0」に近づくほど地図をひいて（0は世界地図のようになる）、「19」に近づくほど寄っていきます。

「center」内にあるimgタグとshadowタグは、地図の中央にアイコンを表示する場合のみ記述します。
中央にアイコンを表示したいときだけなので、「img」と「shadow」いずれか、もしくは両方のタグは省略可能です。

「show」要素内の「control」要素は、GMapを操作する各コントローラーを表示するかどうかを設定できます。

<control>
    <large value="ここにtrueを書いた場合、GMapに大きいコントローラー（GLargeMapControl）を表示する" />
    <small value="ここにtrueを書いた場合、GMapに小さいコントローラー（GSmallMapControl）を表示する" />
    <zoom value="ここにtrueを書いた場合、GMapにズームのみのコントローラー（GSmallZoomControl）を表示する" />
    <type value="ここにtrueを書いた場合、GMapにマップ切り替え用のコントローラー（GMapTypeControl）を表示する" />
    <overview value="ここにtrueを書いた場合、GMapにオーバービューコントローラー（GOverviewMapControl）を表示する" />
    <scale value="ここにtrueを書いた場合、GMapにスケールコントローラー（GScaleControl）を表示する" />
</control>

説明するより、試してもらった方が早い気もしますが、１点だけ。

表示する場合はコントローラー用のタグの「value」の値を「true」にして記述する必要がありますが、非表示の場合はタグ自体を省略してもいいです。

「show」要素内の「option」要素は、XMapによる拡張機能です。

<option>
    <wheelZoom value="ここにtrueを書いた場合、GMapをマウスホイールでズームレベルを操作できるようにする" />
</option>

拡張といっても、今のところマウスホイールによるズーム操作しかありません。

さらに実験的なものなので、もしかしたら不具合があるかもです。

不要な場合は「option」タグごと省略可能です。

iconsタグ内の設定について

「icons」要素内は、GMapで利用するアイコンを作成するための設定です。

独自アイコンを使用しない場合は、中の「icon」要素ごと「icons」タグを省略することができます。

<icon name="アイコンの名前">
    <img src="アイコンに使用する画像のパス" width="画像の横サイズ（数値）" height="画像の縦サイズ（数値）" />
    <shadow src="アイコンの影に使用する画像のパス" width="画像の横サイズ（数値）" height="画像の縦サイズ（数値）" />
</icon>

「icons」タグ内で「icon」タグを繰り返し記述することで、複数のアイコンを作成することができます。

次の「marker」要素で、作成したアイコンを利用してGMapにアイコンを表示することができます。

作成したアイコンは、以下のようにスクリプトを書くと取得できます。

//すべてのアイコンを取得
var icons = jQuery('#map').XMap().$getIcon();
//アイコンを指定して取得
var icon = jQuery('#map').XMap().$getIcon('アイコンの名前');

markersタグ内の設定について

「markers」要素内は、GMapにアイコンを設置するための設定です。

各「marker」要素で設定した座標にアイコンを表示します。

GMapにアイコンを設置しない場合は、「markers」要素ごと省略が可能です。

<marker name="マーカーの名前" lat="緯度" lng="経度" address="表示する住所や駅名を指定">
    <option>
        <icon name="icons内で作成したアイコンの名前" />
        <drag value="ここにtrueを書いた場合、アイコンをドラッグ＆ドロップで移動できるようになる" />
        <title>アイコンの上にマウスが来たときに、ここに書いた文字がツールチップとして表示させる</title>
    </option>
    <html>
        アイコンをクリックしたときに吹き出しが出るようになる。
        （HTMLタグが利用できるけど、「<」は「&lt;」に、「>」は「&gt;」に、「&」は「&amp;」に変換する必要がある）
    </html>
</marker>;

「icons」タグと同じく、「markers」タグ内で「marker」タグを繰り返し記述することで、複数のアイコンを作成することができます。

「marker」要素の「lat」や「lng」、「address」などの使い方は、GMapの中心を決めるために指定した「center」要素の時と基本的に同じです。

ちょっとだけ違うのは、「lat」、「lng」を指定せずに「address」を指定した場合、検索した住所の座標が見つからないと、GMapにアイコンを追加しません。

アイコンの表示が必須の場合は、検索よりも緯度や経度を直接設定する方が確実ということです。

「marker」要素内の「option」で表示するアイコンなどの細かな設定が行えます。
アイコンの設定が不要な場合は省略可能です。

「option」要素の「icon」は、「icons」要素内で作成したアイコンの名前を指定することで、表示するアイコンに独自に作成したアイコンを使用できます。

「option」要素の「drag」は、「value」に「true」を記述することで、配置したアイコンをドラッグ＆ドロップで移動させることができるようになります。

「option」要素の「title」は、アイコンにマウスが乗ったときに、ツールチップを表示させる文章を記述します。
「title」にはHTMLタグは利用できません。

「option」要素内の「icon」、「drag」、「title」の各要素も省略可能です。

「marker」要素内の「html」を設定すると、アイコンのクリック時に噴出しを表示することができます。
HTMLタグが利用できるので、「option」要素の「title」で指定したツールチップよりも、詳細な情報を表示させることができます。

「html」要素も省略することができます。

作成したマーカーは、以下のようにスクリプトを書くと取得できます。

//すべてのマーカーを取得
var markers = jQuery('#map').XMap().$getMarker();
//マーカーを指定して取得
var marker = jQuery('#map').XMap().$getMarker('マーカーの名前');

その他

後でGMapオブジェクトを利用したいときは、以下のようにスクリプトを書くと取得できます。

var gmap = jQuery('#map')._GMap2();

実際、jQuery(‘#map’)で一番最初に見つかったエレメントに対するGMapオブジェクトを返すので、適用したGMapオブジェクトが複数ある場合には

var gmaps = [];
jQuery('.map').each(function(i)
{
    gmaps[i] = jQuery(this)._GMap2();
});

のようにするといいかも。

GClientGeocoderを利用する場合は、

var geo = jQuery("#map")._Geo();
geo.getLatLng(text, function(){});

のように利用することもできます。

いまのところ、Geocoderはオブジェクト毎に作ってしまうので、ここは修正しないといけないかな・・・。

最後に、GMapのコントロールの表示／非表示を切り替える（表示されている場合は非表示に、非表示の場合は表示する）関数をXMap内に持たせていますので、利用いただける場合は、利用してください。

//大きいコントロールの表示切替
jQuery("#map").XMap().$switchControl('large');
//大きいコントロールとスケールの表示切替
jQuery("#map").XMap().$switchControl(['large','scale']);

最後に

一応、ライセンスについてはjQueryに合わせてGPLライセンスとします。

このスクリプトを利用して発生した損害につきまして、一切責任は負いません。
いつもどおり、自己責任でお使いください。

関連記事：
UTF-8以外の文字コードで作成したページでGmapを利用する

トラックバック URL :

コメント (0)

ピクスログ

ブログロール

2008年4月2日水曜日 10:39:53