HOME > > > GoogleMaps APIでズームのコントローラーの表示がズレておかしくなった時の対処法

GoogleMaps APIでズームのコントローラーの表示がズレておかしくなった時の対処法

GoogleMapsAPI

GoogleMapsAPIでコントローラーがズレる?

GoogleMapsAPIを使った時にズームしたりコントローラーが崩れておかしい表示になってしまう時があります。
html内にGoogleMapsのみ表示させた場合は問題なく表示されているのですが、WebページでGoogleMapsのみなんてレイアウトはほぼありません。
色々ページを組んでいった時に見られる現象です。
多分、CSSとか悪さをしてるんじゃないかなぁと思っていますが、原因はよく解りません。
あぁ~どうしようと思っていたのですが、CSSの追記で解決できます。

ズレて崩れた時

GoogleMapsAPIのズームコントローラーが崩れた時はこんな感じになります。
これじゃなんだか解りませんね。

GoogleMapsAPI

CSS追記で対処する

崩れた時はCSSの追記で対処する事が出来ます。
以下のCSSをGoogleMapsAPIで指定しているclass名に追記してください。


#class名 label { width: auto; display:inline; }
#class名 img { max-width: none; }

修正完了

上記CSSを設定する事でコントローラーのズレが直ります。

GoogleMapsAPI

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket