【jQueryのプラグインを作ろう！】

第11回「手軽にグーグルマップにリンクしよう」
＊これはascii.jpで連載した記事の続きです。このため、このページを読む前にあらかじめascii.jpで連載した記事をお読み下さい。

text : 古籏一浩

■面倒なプログラミングや座標、長いリンクも不要

　プラグイン作成講座の4日目でも地図表示を取り扱いました。4日目のものは撮影した写真の横に自動的にグーグルマップ（スタティックマップ）を表示するものでした。
　多くの場合、地名などがあれば自動的にグーグルマップにリンクする方が実用的でしょう。ということで、今回は指定された範囲の文字をジオコーディング可能な住所（場所、地名）とみなして自動的にグーグルマップにリンクするプラグインを作成してみます。

■ジオコーディング可能な地名や住所ならOK

　グーグルマップをページ内に表示するのではなく、maps.google.co.jpのページにリンクする場合には面倒な手続きは不要です。maps.google.co.jpのURLパラメータに「maps?q=住所」とすれば指定した住所の地図が自動的に表示されます。つまり「http://maps.google.co.jp/maps?q=北海道庁」とすれば北海道庁の地図が表示されるということになります。
　他にもズームレベルなどのパラメータも指定することができます。ズームレベルはz=で指定できます。どこまでズーム可能かは地域によって異なります。また、日本に住む外国人の場合地図が日本語では読めないことがあります。そこでhl=enのように表示言語を指定することで地図に英語が付記されるようになります。
　それではプラグインを作成していきましょう。まず、パラメータには地図のズームレベルが指定できるようにしておきます。ズームレベルが省略された場合にはレベル15とします。
　次に地名／住所を読み出しますが、これは$(this).text()とします。ここで読み出した文字列（地名／住所）をグーグルマップ表示ページへのURLパラメータとして渡します。生成されたリンクは$(this).html()として書き戻します。これを指定されたエレメントの数だけ繰り返せばできあがりです。

　完成したプラグインのソースは以下のようになります。

【プラグインのソース】

/* マップ表示プラグイン for jQuery
2009.2 By KaZuhiro FuRuhata  */
$.fn.geomap = function(zoomLevel){
    if (!zoomLevel) zoomLevel = 15;
	return this.each(function(){
        var txt = $(this).text();
        $(this).html('<a href="http://maps.google.co.jp/maps?hl=ja&ie=UTF8&z='+zoomLevel+'&q='+txt+'">'+txt+'</a>');
    });
}

■実際に使ってみよう

　それでは作成したプラグインを使ってみましょう。
　最初にjQueryライブラリファイルを読み込ませたあとにプラグインファイルを読み込ませます。

	<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
	<script type="text/javascript" src="js/geomap.js"></script>

　次に地名／住所のエレメントを含む要素を$()のセレクタで指定します。例えば<span class="geo">新宿都庁</span>となっている場合には以下のようにします。

$(".geo").geomap();

　マップのズームレベルを指定するには以下のようにします（ズームレベルを12にする場合）。

$(".geo").geomap(12);

　これで指定した住所が自動的にグーグルマップのページにリンクされます（サンプルを実行する）。
ただし、正しくジオコーディングできない場合（対象が複数ある場合など）には、思わぬ所の地図が表示されてしまいますので注意が必要です。