この記事は「【短期集中連載】この冬作ろう！ jQueryプラグイン講座」の第4日目です→[連載インデックス]へ
今日のお題はGoogleマップ。写真の横に地図を表示するプラグイン
カメラを持って撮影スポットに向かうと、近ごろ、カメラを提げた中高年の方々をよく見かけます。そこでしか撮れないベストショットを収めたい、ということなのでしょう。その人数の多さにはビックリすることもあります。そして、そうやって撮ったベストショットはしまっておくのではなく、後で自分のWebサイトに掲載する、という人も割合多くいるようです。
そんなときに、「この写真はどこで撮影したのか」「撮影対象はどの山なのか」などが分かる地図を同時に表示してあげると便利かもしれません。今日は、写真の横にGoogleマップを表示するプラグインを作成してみましょう。
2種類あるGoogleマップ
おなじみのGoogleマップですが、一般によく利用されているのは地図をドラッグしてスクロールできる“動的なGoogleマップ”です。実はこのほかに、画像として地図を表示する“静的なGoogleマップ”が存在します。静的なGoogleマップは面倒なスクリプトが不要で、URLに座標値やズームレベルなどを指定するだけで地図を表示できます。
たとえば富士山の地図を表示させてみましょう。ブラウザのアドレスバーに以下のURLを入力してEnterキーを押してみてください。富士山周辺の地図が表示されるはずです。
http://maps.google.com/staticmap?center=35.362754,138.730974&zoom=10&size=640x640
このパラメータを<img>タグのsrc属性に指定するだけで、手軽にWebページの中に地図画像を表示させられる、というわけです。今回作るプラグインでは、この静的なGoogleマップを使うことにしましょう。
今回使用するGoogleマップAPIのパラメータの意味を以下に示します。これ以外のパラメータに関しては「Static Maps APIデベロッパーガイド」を参照してください。
- center=緯度,経度
- zoom=倍率
- markers=緯度,経度
なお、静的なGoogleマップでも、利用にはAPIキーが必要ですので（なくても表示はできてしまいますが）、あらかじめ以下のページで取得しておきましょう。
【APIキーの取得】
http://code.google.com/intl/ja/apis/maps/signup.html
imgタグに独自の属性を用意する
ではさっそくプラグインの作成に入ります。地図を表示するプラグインの名前（メソッド名）は、「addGMap」としましょう。「addGMap()」のパラメータは2つ。最初のパラメータには先に取得しておいたGoogleマップのAPIキーを、2番目のパラメータには地図の倍率を指定する仕様とします。
このプラグインを作るときのキモは、撮影ポイントもしくは撮影対象の緯度、経度をどうやって取得するか、ということです。仮に画像データの中に緯度、経度の情報が含まれていても、それを取り出す術がありません。そこで今回は、既存の<img>タグを拡張して「geo」属性を追加し、geo属性が指定されている場合は画像と一緒に地図を表示することにしたいと思います。このgeo属性には以下のように緯度、経度が記述されており、「35,138」のように緯度と経度は「,（カンマ）」で区切られているものとします。
【geo属性を追加した<img>タグの記述例】
<img src="DSC0001.jpg" geo="35,138">
独自に追加したgeo属性の値をjQueryを使って読み出すには、以下のように「attr()」を使います。geo属性があればその内容が返され、ない場合には「undefined」となります。geo属性で指定した緯度経度は、Googleマップを呼び出す<img>タグのsrc属性に使います。
$(this).attr("geo")
写真のすぐ隣に地図を表示させるのは、指定したエレメントの直後に指定されたHTML文字列を挿入するメソッド「after()」です。「$(this).after(～)」のように書きます。geo属性で指定された緯度経度、addGMap()のパラメータとして指定されたAPIキーと地図の倍率を<img>タグのsrc属性に与えればできあがりです。
【Googleマップ表示プラグインのソース】
/* Googleマップ表示プラグイン for jQuery
2009.1 By KaZuhiro FuRuhata */
$.fn.addGMap = function(apiKey,zoom){
return this.each(function(){
var pt = $(this).attr("geo");
if (pt){
var mapStr = "http://maps.google.com/staticmap?center="+pt+"&zoom="+zoom+"&markers="+pt+"&size=256x256&key="+apiKey;
var mapHTML = "<img src='"+mapStr+"' width='256' height='256'>";
$(this).after(mapHTML);
}
});
}
