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マップが表示されていれば完成です。
今回作成したプラグインでは表示する地図のサイズは固定されていますが、画像の高さや幅に地図のサイズを合わせるように改良してもよいでしょう。また、緯度、経度を直接指定していますが、指定した住所からジオコーディングを使って自動的にその場所の地図を表示するようにすると、使い勝手がよりよくなるでしょう。試してみてください。
Googleマッププラグインを組み込んだページ。写真の横にGoogleマップを表示している
明日はいよいよ最終日。リンク文字上にマウスを乗せたときにリンク先のサムネイルを表示するプラグインを作成します。お楽しみに。
■もっと勉強したい人のためのオススメBOOK（Amazon.co.jp）
