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


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

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

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

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

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

スポンサードリンク

菜摘

Web制作がメインですがときどきフライヤーデザインやCDラベルなどDTP系もやってます。 デザイナーだったはずがhtml/cssコーディングに目覚めた。 黒い画面は相変わらず怖い。 javascriptはこのごろちょっと頑張ってるよ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です