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

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

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

文● 古籏一浩、ASCII.jp

外部データをAjaxで読み込む

　ここまでで事前準備が整ったので、今回のキモであるマウスオーバー時の処理を作りましょう。マウスオーバー時の処理は、jQueryでは以下のように記述します。shopmap は先ほどサムネイル画像に設定したクラス名です。


$(".shopmap").mouseover(function(){
　マウスオーバー時の処理
})

　次に、実際にマウスオーバー時の処理の中身を書いていきます。マウスオーバーしたサムネイル画像には longdesc属性が設定されており、URL, 緯度, 経度の順番にデータが書かれています。そこで、以下のように longdesc属性の内容を読み出し、それぞれのデータに切り分けます。shopdata には配列形式でURL, 緯度, 経度の順番にデータが格納されます。


var shopdata = ($(this).attr("longdesc")).split(",");

　最初のデータは、書店の紹介文を記述した外部HTMLファイルのURLです。このHTMLを以下のようにAjax (非同期通信) を使って読み込み、ID名「shopInfo」の位置に表示します。shopdata[0] には書店情報のページURLが入っているので、load() のパラメータに指定するだけで自動的に内容が読み込まれ、表示されます。


$("#shopInfo").load(shopdata[0]);

　続いて、Googleマップを書店の所在地を示す座標に移動させます。地図の位置は以下のようにして設定します。


var pos = new GLatLng(parseFloat(shopdata[1]),parseFloat(shopdata[2]));
map.panTo(pos, 15);

　単純に座標を移動させるだけなら setCenter() でもいいのですが、panTo() を使った方が見た目にはよいでしょう。 panTo() は、指定した座標が現在表示されている地図の範囲内に存在する場合に、スムーズにスクロールしながら表示を切り替える命令です。

　次に、書店の場所をマーカーで示しましょう。マーカーは以下のように書けば表示できます。


map.addOverlay(new GMarker(pos));

　ただこれだと、サムネイル画像にマウスを乗せるたびにマーカーがどんどん追加されてしまい、表示速度が低下する原因になります。そこで、すでにマーカーが表示されている場合は新たにマーカーを表示しないように対策します。

　対策方法はいくつかありますが、今回は、一度マーカーが表示されたら、 flag属性を imgタグに追加し、flag属性が存在する場合にはマーカーを追加しないようにします。わずか3行で実現できる手軽な方法です。


if($(this).attr("flag")) return;    // すでにマーカーがある場合は処理しない
map.addOverlay(new GMarker(pos));
$(this).attr("flag", true);

　以上で、マウスオーバー時の処理が完成しました。ここまでに説明したスクリプトは以下のとおりです。


    // サムネールオーバー＆書店情報表示処理
    $(".shopmap").mouseover(function(){
        var shopdata = ($(this).attr("longdesc")).split(",");
        $("#shopInfo").load(shopdata[0]);
        var pos = new GLatLng(parseFloat(shopdata[1]),parseFloat(shopdata[2]));
        map.panTo(pos, 15);
        if($(this).attr("flag")) return;    // すでにマーカーがある場合は処理しない
        map.addOverlay(new GMarker(pos));
        $(this).attr("flag", true);
    });