晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

Google Maps API V3ギャラリーマップ改修

Google Maps API V3を使って作成したギャラリーマップを少し改修。

マップを挿入する<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

神戸(三宮・元町) ギャラリー

http://home2nd.html.xdomain.jp/gallery-kobe.html

夙川・苦楽園 ギャラリー マップ

http://home2nd.html.xdomain.jp/gallery-shukugawa.html

京都 ギャラリー マップ

http://home2nd.html.xdomain.jp/gallery-kyoto.html

大阪(梅田) ギャラリー マップ

http://home2nd.html.xdomain.jp/gallery-umeda.html

酒蔵【灘五郷】 西郷・御影郷・魚崎郷・西宮郷今津郷 マップ

http://home2nd.html.xdomain.jp/sakagura-nada.html

【新デザイン】

f:id:art2nd:20170630141328j:plain

【旧デザイン】

f:id:art2nd:20170630141335j:plain