【短期集中連載】この冬作ろう！jQueryプラグイン講座

4日目：写真の横にGoogleマップを表示しよう

2009年01月04日 08時00分更新

文● 古籏一浩

Googleマッププラグインを使ってみよう

　それでは、できあがったばかりのGoogleマッププラグインを実際に組み込んで使ってみましょう。

　まずjQueryライブラリファイル、次にプラグインファイルを読み込ませます。


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

　次に、ページが読み込まれた後に地図が表示されるように、以下のように書き加えます。地図を表示させる対象は<img>タグのみですので、以下のように指定します。


<script type="text/javascript"><!--
$(function () {
$("img").addGMap("★★★取得したAPIキー★★",15);
});
// --></script>

　期待どおり、画像の横にGoogleマップが表示されていれば完成です。

　今回作成したプラグインでは表示する地図のサイズは固定されていますが、画像の高さや幅に地図のサイズを合わせるように改良してもよいでしょう。また、緯度、経度を直接指定していますが、指定した住所からジオコーディングを使って自動的にその場所の地図を表示するようにすると、使い勝手がよりよくなるでしょう。試してみてください。