29分でできる！あのサイトの“技”を盗め ― 第25回

Googleマップ＋jQueryで作るAjaxなデザイン

2009年05月26日 11時55分更新

文● 古籏一浩、ASCII.jp

Googleマップ×自作スクリプトの組み合わせで実現

　はじめに仕様を確認します。今回は、連載の作例として制作してきた架空の書評サイト「東京ブックマニア」に書店紹介のページを作成し、hitotokiのような仕掛けを組み込んでいきます。


「東京ブックマニア」の新コンテンツ「ブックストア」（書店紹介ページ）。地図と書店紹介が連動して動くページに仕立てていきます

　新たに作成する部分（地図とコンテンツを組み合わせたウィジェット）は以下のような配置で、書店のサムネイル画像をマウスオーバーすると、地図（Googleマップ）の中心を移動させ、同時に左上のコンテンツ（書店の紹介文）を書き換えます。


新たに作成するウィジェット。地図＋コンテンツ＋サムネイルをこのようにレイアウトします

　地図には、お手本サイトと同じく、Googleマップを使用します。Googleマップの使用にあたっては事前にAPIキーの取得が必要です。ここではAPIキーの取得方法の説明は省きますので、以前紹介した記事を参考にしてください（関連記事）。

　Googleマップの位置をマウスオーバーにあわせて操作したり、コンテンツを書き換えたりするスクリプトは、適当なライブラリがないので、jQueryをベースに自作します。jQueryを使えば一見複雑そうな処理も案外と簡単にできるので便利です。

書店情報をどう扱うか？

　それではスクリプトの作成に入りましょう、と言いたいところですが、実際に作り始める前に、複数の書店の緯度経度と表示する書店情報をどのように扱えばよいか、少し考えてみましょう。

　もっとも単純なのは、書店の緯度経度、説明文などを配列に入れておく方法です。ただ、これだと書店が増えたり移転したりした場合に、その都度プログラムを変更しなくてはなりません。紹介文を変更したい場合も同様に手間がかかり、少々面倒です。

　そこで今回は、説明文については外部のHTMLファイルに分割しておき、そのURLと緯度経度をHTMLの属性にまとめて書く方法を採ることにします。これなら、後々修正したいときにもHTMLタグの属性値だけを変えればよいので楽ですし、追加も簡単です。

　具体的には、サムネイル画像を表示するための imgタグに、 longdesc属性を追加します。longdesc属性は「Long Description」の略で、alt属性で説明しきれないような長い補足的な説明を示すものです。今回はこの longdesc属性に、緯度経度と、連動して表示させたい外部HTMLのURLを一緒に書いておきます。たとえば以下の例では、「1.jpg」というサムネイル画像を表示し、マウスオーバー時には地図を「35.647613,139.714239」に動かしたうえで、説明文として「1.html」を表示します。


<img src="images/shop/thumb/1.jpg" class="shopmap" longdesc="1.html,35.647613,139.714239">

　URLと緯度経度は簡単にデータを切り分けられるように、,（カンマ）で区切って書きます。また、スクリプト側でデータを読み出すための目印として、スタイルシートクラス「shopmap」を指定しておきます。この imgタグを、表示させたいコンテンツの数だけ繰り返します。


<img src="images/shop/thumb/1.jpg" class="shopmap" longdesc="1.html,35.647613,139.714239">
<img src="images/shop/thumb/2.jpg" class="shopmap" longdesc="2.html,35.664179,139.693221">
<img src="images/shop/thumb/3.jpg" class="shopmap" longdesc="3.html,35.691417,139.696913">
<img src="images/shop/thumb/4.jpg" class="shopmap" longdesc="4.html,35.665255,139.713869">
<img src="images/shop/thumb/5.jpg" class="shopmap" longdesc="5.html,35.706423,139.651261">

　次に、地図を表示する部分（ID名「gmap」）に以下のスクリプトを書き、Googleマップを埋め込みます。


// マップ処理
var map = new GMap2(document.getElementById("gmap"));
map.setCenter(new GLatLng(35.697177,139.775147), 15);
map.addControl(new GSmallMapControl());

　上のサンプルではデフォルトで表示する緯度経度を指定していますが、後で紹介する方法によって、実際には最初の imgタグで指定している緯度経度に書き換えてしまうため、ここでは適当で構いません。

前へ 1 2 3 4 5 次へ

ツイートする