トイレのうず

Google Mapsの情報ウィンドウの縦スクロールバーが邪魔!

当記事はアフィリエイト広告を掲載しています。

HTB や静岡朝日テレビなどで水曜どうでしょうの「原付日本列島制覇」が放送されているからか、原付日本列島制覇のルートを Google Maps で示したページのビュー数が上がっています。それで久しぶりに自分でマップを表示させてみたら醜い! セリフを表示した吹き出し(情報ウィンドウ: infoWindow )になぜか縦スクロールバーが表示されています。
水曜どうでしょう 2011 新作ルートマップ 4 日目/原付日本列島制覇

Google Maps 情報ウィンドウに縦スクロールバーが表示される

調べてみると日本語でそのような不具合が出る模様。
解決方法を調べてみると、コメントを書く時に <div> で囲んでマージンをつけろとのこと。
→ digitalbox : Google Maps の吹き出し( infoWindow )内のスクロールバーを消す

大量の情報ウィンドウにいちいち設定するのも面倒なので、試行錯誤してたら以下のコードを CSS に書き加えたら縦スクロールバーが消えました。

/*Google Maps 情報ウィンドウの縦スクロール防止*/
.gm-style-iw{
	white-space: nowrap;
}
Google Maps 情報ウィンドウに縦スクロールバー対策後

CSS で自動的な改行を禁止しているので、情報ウィンドウ内の文章が長い場合は上手く表示されないと思います。原付日本列島制覇のルートマップは短いセンテンスだから問題ないけれど長い文章を表示する人はマネしないでください。

関連記事

Google Maps API をいじっています
Web制作
thumbnail
IE6 にて縦スクロールバーが 2 本出てたのを修正
Web制作
thumbnail
サイト改造中
Web制作お知らせ
thumbnail
サイト移転をクローラに知らせるために
Web制作
thumbnail
【検証】 Apache ログを詳しく見てみる 〜 WordPress を Yahoo! ブログ検索させる方法 その 4 〜
WordPressWeb制作
thumbnail
CSS 画像置換失敗
Web制作
thumbnail