このページの本文へ

4日目:写真の横にGoogleマップを表示しよう (2/2)

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マップが表示されていれば完成です。

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

自動リンクプラグイン

Googleマッププラグインを組み込んだページ。写真の横にGoogleマップを表示している


 明日はいよいよ最終日。リンク文字上にマウスを乗せたときにリンク先のサムネイルを表示するプラグインを作成します。お楽しみに。

■もっと勉強したい人のためのオススメBOOK(Amazon.co.jp)

前へ 1 2 次へ

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く