ぼやき

0

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

関連記事