■

@jishiha です。

リリース以来、地味にちょこちょこと改善し続けている地図画面について書いてみようと思います。

スマートフォン版で、メニューの「近くを探す」を選ぶと、今いる場所の近くのクエストを地図上で見ることができます。

この地図、Google Maps を使っているので、ピンチすれば拡大することができます。ですが、あまりに拡大してしまうとクエストがピンポイントでどこにあるかがわかってしまい、レーダー画面でクエストを探す楽しみを損ねてしまいます。

そこで、ある程度までしかズームできないようにしてあります。技術的なことを書くと、google.maps.MapOptions のプロパティ maxZoom に適当な値をセットしてあります。

また、宝の地図っぽい雰囲気を出すために Google Maps のデフォルトのスタイルを使わず、セピア色っぽいスタイルをあてています。

こちらは google.maps.MapOptions の styles プロパティに以下をセットしています。

地図上の小学校や病院などの施設をタップすると通常はその情報が吹き出しで表示されるのですが、まちクエストでは必要ないので、featureType: “poi” の visibility を false にすることで表示されないようにしてあります。

地図画面は、以前は以下のキャプチャのように、画面全体に地図を表示していました。マーカーをタップすると吹き出しを表示し、その中に各クエストの写真と情報が表示されます。

しかし、これだとひとつひとつのクエストの情報を見ていきたいときにマーカーを一個ずつタップする必要があり面倒でした。

一方、以下のようにリストだけを表示すると一覧性は良くなるのですが、クエストがどこにあるのかがわからなくなってしまいます。

そこで、上半分に地図、下半分にはリストを表示することで、クエストの一覧性を保ちつつ、それぞれの場所がわかるようにしました。

リストは地図に連動していて、地図上に表示されたクエストを、地図の中心に近い順に表示しています。

リストをズラッと下に伸ばしてしまうと、画面を下までスクロールさせた時に地図が隠れてしまいます。

そこで、CSS の overflow: scroll を使うことで、画面全体でなく、リストの部分だけがスクロールするようにしています。

他にもいくつか工夫しているところがありますが、それはまた別の機会に。

こうした改善はユーザーの皆さんからのフィードバックを元に行っています。こういうところが使いにくいとかこうした方が使いやすくなるのに、といったご意見やご要望がありましたら遠慮なく聞かせてください。