GoogleMapがHTML5で崩れる件
HTML5は、スマートフォンサイト、
一般的なレスポンシブ対応でもよく使いますが、
ビューポートや、各種CSSなどの適応後に、
Google Mapで地図拡大などの
コントロール表示が崩れることがあります。
( スケールとかバルーンの窓枠の崩れ etc… )
レスポンシブでは、
テキストの折り返しだけでなく、
画像など imgの最大表示幅を % 設定で
伸縮させるコードを置いたりするのですが、
これが、コンフリクトするんですね。
( G-Mapと合わせてはじめて発生する経験値 )
■ G-Mapの img / max-width を解放してやります。
#gmap img {
max-width: none;
}
■ あわせてコードのV3mapバージョンを外しておくと、
コントロール表示が自動最新になっていたりします。
( 3.9 とか 3.10 とか書かない )
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true または false">