Google Maps API V3でinfoWindowのスクロールバーを表示しない

 Google Maps APIを使ったサイトで、V2からV3へのバージョンアップ対応をしていたのですが、infoWindowがちょっと厄介でした。
 Google Maps API V3のinfoWindowは、内容や地図サイズによって勝手に(自動的に)サイズを調整してくれるのですが、内容が収まり切らないと判断された場合に、スクロールバーが表示されます。
 new google.maps.InfoWindowに、オプションでサイズを渡せるので、これで大きくしてやれば良いだろう、と思ったのですが、どうもこれが利いている感じがしません。
 軽くググッてみると、InfoWindowのサイズ問題では結構苦しんでいる人が多いらしいです。
 内容量的には、スクロールバーを出さないでも表示できそうな感じなのですが、余計なことにスクロールを出してくれます。
 InfoWindowにあるdivの幅を狭くしてみると、横のスクロールバーは消えたのですが、根本的な解決ではありません(デザイン上、この幅はできるだけいじりたくなかったし、そもそもV2ではこの幅で不自然なく表示できていた)。また、縦のスクロールバーは表示されたままです。
 内容量を減らせば消せる筈ですが、それでは元も子もありません。
 jsで潜っていって強引に消してみようかと思ったのですが、Google Maps APIの生成するdivの嵐にはidもclassもついていないし、自分でInfoWindowにつけたclassから親をたどっていくことはできるものの、どう考えてもやり方として不自然です。

 で、最終的な解決策ですが、InfoWindow内のhtmlをくくっているdivに、cssでmarginを付けました。
 わたしの場合、スクロールバーを出さないでも表示しきれている量だったので、上下に5pxほど余裕をもたせると、それだけで消えてくれました。

 どうも、そもそもGoogle Maps API V3が自動的にやってくれている処理で、吹き出し内のhtmlのサイズを正しく計算できていないような気がするのですが(日本語のせい?)、まぁ今回はこれで急場をしのいでおきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする