« はてブして地図で見る、Stepintoはじめました | Main | TeraTermマクロのyesnobox »

2013.02.14

Google Maps APIと(pjax)pushStateが相性いい

近頃、注目されてる気がするpjax。ajaxは見た目の画面は遷移しても、足場となるページが固定なので、戻るボタンやF5連打で最初のページまで戻ってしまう。pjaxは、HTML5で実装されたpushStateを使って、ajaxで非同期に読み込んだものに合わせて、履歴にURLをpushするという手法。実例としては、Githubあたりがわかりやすいだろうか。

で、Githubのようにページ全体が切り替わるサンプルは幾つか見てきたが、これってGoogle Maps APIを使ったサイトにこそピッタリじゃないの?と思い、Stepintoに組み込んでみた。

http://stepinto.asia/demo.php

地図をドラッグすると、はてなブックマークでブックマークした施設を地図の中心点に近い順に表示する。Google Maps APIのdragendが発火すると、施設情報をリフレッシュさせるrefreshMarkerという関数を呼び出している。このrefreshMarkerの先頭に

window.history.pushState(null,null,"index.php?lat="+lat+"&lng="+lng);

と記載すると、dragendするたびにブラウザのURL欄も変わる。ブラウザの履歴に残っていることを意味する。これまで地図をグリグリとドラッグして楽しんでたのにページ遷移して戻るボタンを押したら最初の位置に戻っちゃうなんていう悲しい体験からオサラバできそう。

|

« はてブして地図で見る、Stepintoはじめました | Main | TeraTermマクロのyesnobox »