地図とモーダル

とある学生の宿題。
WEBページでレスポンシブな地図を配置して、その地図にクリックポイントを配置、クリックしたらモーダルウィンドウが開いてそのエリアの情報が出て、その中のリンクをクリックすると外部サイトへ飛ぶという作り。

まず一つ目の関門は、レスポンシブな地図に対して座標をずらさずにクリックポイントを乗せること。

二つ目の関門は、画面中央に開くモーダルウィンドウを実装すること。

知恵を絞って必要なスニペットを検索すれば、その学生も頑張り屋さんなのでなんとかなるとは思うけど、デモサンプルと少しばかりヒントを。

本当はクリッカブルマップの座標を取得するジェネレーターとか、jQueryでレスポンシブに合わせて座標を再取得するプラグインとかあるんだけど、ここは敢えて、既存の知識と人力でカバーできるアイデアを。

頑張って作ってみてね。