Google Maps API V3を使って作成したギャラリーマップを少し改修。
後日追記:Googleの規約変更により以下の地図は表示されなくなっている。
マップを挿入する<div>の上に、ボタンなどのメニューエリア<form>が付いていると、マップ<div>の高さをheight:100%にした場合、ブラウザウインドウから上下が少しはみ出た状態になり、スマホで見る場合などマップが上にスクロールしてしまい、ボタンなどのメニューエリアが隠れて見えなくなってしまう不具合が生じていた。
ボタンなどのメニューエリア<form>を、マップを挿入する<div>に重ねて表示することで解決。
あわせて、マップ タイプ(地図、衛星写真)の切り替えに使うマップタイプコントロールの場所を左下に移動させるなど微調整。
mapTypeControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
マップタイプコントロールの配置については、以下を参照。
https://developers.google.com/maps/documentation/javascript/controls?hl=ja#ControlPositioning
神戸(三宮・元町) ギャラリー
https://ok2nd.github.io/tool/map/gallery-kobe.html
夙川・苦楽園 ギャラリー マップ
https://ok2nd.github.io/tool/map/gallery-shukugawa.html
京都 ギャラリー マップ
https://ok2nd.github.io/tool/map/gallery-kyoto.html
大阪(梅田) ギャラリー マップ
https://ok2nd.github.io/tool/map/gallery-umeda.html
酒蔵【灘五郷】 西郷・御影郷・魚崎郷・西宮郷・今津郷 マップ
https://ok2nd.github.io/tool/map/sakagura-nada.html
【新デザイン】
【旧デザイン】