CSSのみで地図SPAの周辺スポット検索のような画面


いろんな周辺スポットの検索結果のリストを表示して、さらに地図上にピンを立ててスポットの情報をバルーン表示する、というサービスがありますね。
食べログとかホットペッパーとか、あとは不動産なんかのサイトでよく見かけるやつです。
あんな感じの画面を、CSSのみで作っちゃいましょう!

See the Pen 地図周辺スポットリストSPAのデモ by natsumi (CodePen.

ページ全体(新規タブ)を表示するにはこちら
CSSのみで地図周辺スポットSPAデモ

こだわってる点は、ソース上の検索結果リストはあくまでもひとつ、わざわざバルーンのソースを別で書いたりしてない!っていうところですね。マークアップ重視。
全検索結果のリストをAjaxで書き換えるのではなく、最初からhtmlソース上に記述しているので、この検索条件のURLが生成されていればインデックスされるしSEO的にもうれしい!と想像していますがそんなんでうまくいくものなのかな~

一番の問題は、たとえばGoogleMapsAPIなんかを使って、地図を表示したとして…
このピンのpositionを緯度経度、スクロールと連動させたりできるのかなぁ(´ε`;)ウーン…
そこはエンジニアさんおねがい。