Google Mapsの情報ウィンドウが崩れる

Pocket

スタイルシートやjavascriptを使ったページのデバッグって大変ですよね?

Google MapsをWordPressで表示したら Google Maps の一部が崩れました・・・
同じように悩んでいる方いると思いますので書いておきます

WordPressではiNoveのテーマは使っています
スタイリッシュで好きなんですよね
しかし、Google Mapsの情報ウィンドウがiNoveテーマを使うと崩れることを確認!

崩れるのは、情報ウィンドウです
吹き出し右側上下の丸くなっている縁が表示されない
左側はきちんと表示される

吹き出し下部の鋭角になっている部分が階段状になっている

念のため、調べてみると同じように悩んでいる人を発見
しかし、解決してなさそうなので自分でどうにかする

まずはGoogle Maps表示に使用しているプラグインの不具合か切り分け。
Google Maps v3 ShortcodeをGoogle Maps v3 Shortcodeに変更
やはり表示が崩れる

ブラウザもいくつか試す
やはり表示が崩れる

次にテーマiNoveからblocksに変更してみる
表示が崩れない!

ということで、スタイルシート的不具合を確信

スタイルシートの問題ということで、FireFoxとFireBugでデバッグ開始する

わかったこと
情報ウィンドウは情報ウィンドウの鋭角部分や縁の丸みはpngファイルで実現している
リクエストが少なくなるように
一つのpngに情報ウィンドウの各パーツが詰め込まれている
表示する部分は上位のdivで制御

崩れるのはposition: absoluteかつrightでマイナスを指定してる部分

FireBugでスタイルシートの継承を見た
エレメント上位のスタイルである style.css には下のように設定がありました

.post .content img {
	max-width: 600px;
}

これをコメントアウト
すると問題なく動いた!

1件のコメント

  1. ピンバック:Google mapのふきだし修正 - wordpressのまとめ

コメントを残す