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

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

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

bkmap.jpg

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

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

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

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

 

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

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

2.ゴルフバカマップ ハワイ編(ハワイのゴルフ場、グルメ、観光情報をマークアップ)

3.ゴルフバカマップ タイ編(準備中)

4.ゴルフバカマップ 台湾編

5.ゴルフバカマップ 国内編(準備中)

6.井上誠一氏巡礼マップ

7.ゴルフバカマップ グルメ編(準備中)

8.ゴルフバカマップ 名所編(準備中)

 

現在、地図が表示されるのは1と2と4と6のカテゴリが表示されます。

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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でのタブ付き情報ウインドウ。

oldinfowindow.jpg 

ゴルフ場情報のタブでゴルフ場の情報を表示して、ブログ記事のタブでそのゴルフ場の記事のリンクを表示していました。

これに関しても自分で実装する必要があります。

InfoWindowのcontentにタブになる要素を作り、その要素に対してイベントの割り当てを行ってcontentの内容を書き換えるようにしました。

infowindow.jpg

見た目はちょっと悪いですがこんな感じで実装しました。見た目よくするにはCCSで綺麗にデザインすればいいのですが、めんどうなので今回はこの程度でやめておきます。

イベントの割り当てをするタイミングはインフォウインドウが表示されるときにdomreadyイベントが発生しますのでその中でタブの要素にイベントを割り当てました。

google.maps.event.addListener(infowindow, ‘domready’, function(){

 この中でinfowindow内のタブの要素にクリックイベントを割り当てる(クリックされたら内容を書き換える)

}

 

そしてどれだけ速くなったかを実感。

比較的時間がかからない「ゴルフバカマップ 台湾編」で比較してみます。

まずは古いバージョンのV2版はこちら

地図が表示されるまで私の環境では20秒から25秒かかりました。

そして新しいV3版はこちら

地図が表示されるまで2秒ほどで表示されました。

 

これでようやく実用に耐えるスピードになったのでこれからまたコツコツとデータを更新していきたいと思います。

ゴルフバカの地図はページ上部のサイドバーメニューからかこちらからジャンプできます。


Comments

comments

2 Comments

Leave a Reply

Your email address will not be published.




このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください