ゴルフバカの地図をGoogle Maps API V3に対応

以前からデータ未完のまま、公開していた「ゴルフバカの地図」。

Google Maps APIを使って当ブログの記事と位置情報をリンクさせるコンテンツです。

マップ上にマーカーを表示させてクリックするとその地点の情報が見れます。

更にそのウインドウからブログの記事にジャンプできるというコンテンツ。

この「ゴルフバカの地図」をバージョンアップして高速化することができました。

どうやって高速化したかを備忘録＋Google Maps APIを利用していて速度の遅さに苦労している方向けに簡単に記事にしておきますが、興味がなく新しいマップを使ってみたい方は以下の記事をジャンプしてこちらをご覧ください。こちらをクリック。

今のところカテゴリには次の８つを用意する予定。

１．ゴルフバカの地図（ラウンドしてきた世界中のゴルフ場をマークアップ）現在、データ追加中

２．ゴルフバカマップ　ハワイ編（ハワイのゴルフ場、グルメ、観光情報をマークアップ）

３．ゴルフバカマップ　タイ編（準備中）

４．ゴルフバカマップ　台湾編

５．ゴルフバカマップ国内編（準備中）

６．井上誠一氏巡礼マップ

７．ゴルフバカマップ　グルメ編（準備中）

８．ゴルフバカマップ　名所編（準備中）

現在、地図が表示されるのは１と２と４と６のカテゴリが表示されます。

随時データを追加していくつもりでいたのですが、現在は放置気味。

放置していた理由の一番大きな理由は、読み込みが遅くてマップが表示されるまで時間がかかり過ぎて実用的でなかったというのが一番の理由。

テスト的に作成していたときはマップに表示するポイント情報が少なかったので、表示に時間がかからなかったのですが、数が増えてきたあとは、カテゴリ１の「ゴルフバカの地図」に至っては1分以上時間がかかっていました。

そんなこともあり、読み込みの高速化を試みてみることにしました。

時間がかかる原因は単純にデータ構造に問題があると思い、まずはそこを見直してみました。

データにはJSON形式のフォーマットファイルを使用して階層的に管理するために１つのポイント情報につき、1個のファイルを読み込んでマーカーを表示していました。つまりポイント情報が増えるたびに読み込むファイル数が増えていました。

まずはこれを１つのファイルにまとめてみることに。

そして読み込みを行ったところ、あまり改善されず。。。

いろいろ調べてみたところ、Google Maps API V2ではマーカーの登録に時間がかかり過ぎるということが分かりました。

現在、Googleが正式にサポートしているのは最新バージョンのV3。

V3ではこの処理が劇的に改善されているらしい。

いずれV2はサポートが終了するのでV3に移行する必要があるのでこの際、V3に移行することにしました。

移行した結果は、信じられないぐらいの速さ。

分単位の処理が秒単位になりました。

V2からV3の違いについてはいろんな技術系のサイト、ブログで取り上げられているのでここでは語りませんが、私が移行するにあたって、躓いたポイントをちょこっと挙げておきます。

（※WEBプログラムやJavaScriptなどに知識はあまり持っていないので間違っているかもしれません）

まずGXmlHttp.create()やGDownloadUrl()などのファイルを読み込むための関数がV3では実装されていないので自分で読み込む必要があります。現在、V3に実装されているのは KML と GeoRSS データ形式というフォーマットのみのようでこの２つのフォーマットであれば読み込むことができるようです。

JSON形式のデータの場合は自分で読み込む必要があるのでjQueryのajaxをつかって読み込むことにしました。

V2ではGXmlHttpでは以下のようにしていた処理や

var request = GXmlHttp.create();
request.open(“GET”, 読み込むファイル名, false);
request.onreadystatechange = function() {
　　if (request.readyState == 4) {
　　　　　　読み込み後の処理
　　}
}

GDownloadUrlで以下のようにしていた処理を

GDownloadUrl(読み込むファイル名, function(data){
　　読み込み後の処理
});

V3ではjQueryをスクリプト内で読み込んでajaxを使って以下のように読むようにしました。

jQuery.ajax({
url : 読み込むファイル名,
type : “get”,
success : function(data){
　読み込み後の処理
}
});

次に困ったのがV2では情報ウインドウでタブ付き情報ウインドウがサポートされていたのですがV3では実装されていない点でした。

こちらはV2でのタブ付き情報ウインドウ。