Hatena::ブログ(Diary)

American Life in the Summertime

2010-06-29

infowindowのサイズ指定

| 14:09 | infowindowのサイズ指定を含むブックマーク

昨日のエントリに久しぶりにGoogle Maps API v3のことを書いたんで、あれこれ見てたんだけど…


英語のリファレンスと日本語のリファレンスに差異があるのね。

日本語のリファレンスには、infowindowにsizeというプロパティがあるのに、英語版じゃmaxWidthしかない。


…っつーか、そもそもこのサイズ関係のプロパティって、動作が意味不明。

どうやらみんな同じようなことを思ってるようで、Googleグループでも色々と議論されているようです。


it seems no matter what i use for maxWidth for the infowindow it's

always at least 200px wide.

This is a problem for mobile phone that have small screens. Is there a

way to get around this?

Question about maxwidth for infowindow - Google Maps JavaScript API v3 | Google グループ

「いっつも200px幅になっちゃうんだけど。ケータイとかだと画面が小さいし、問題じゃね?」って訊いてるのに、

Yes. Write your own infowindow style code, perhaps using simpler graphics.

Question about maxwidth for infowindow - Google Maps JavaScript API v3 | Google グループ

「スタイルを書いて、同じような画像を使え」とかって返答はどうよ?

一応、その回答に書かれていたリンクをたどると、どうもmaxWidthはある程度の大きさを指定しないと意味がないらしいということが判る。

There are certain minimum dimensions for the standard info window. If

you set {maxWidth: 1}, you get an info window with content div of

199px width and 247px total width.

Google グループ

maxWidthに1を指定しても、一定サイズのinfowindowが表示されるらしい。

一応、ブラウザをキャプチャして画像編集ソフトでサイズをだいたい測ってみたらそんなもんだった(吹き出しの三角部分も含めて)。


どうしてもって人は自分でカスタマイズするか、ライブラリを導入するしかなさそう。

カスタムinfowindow

jQueryを使うパターン

InfoBoxというライブラリがあるらしい


infowindow = new google.maps.InfoWindow({
    content: 'あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお'
});

maxWidthを指定しないで、こういうカンジで長々と文字列をセットしてみると、どうやら地図のdivの横幅を考慮して文字列を折り返してくれる。divの横幅は500pxで、こんなふうになる。

f:id:u87:20100629141523j:image


infowindow = new google.maps.InfoWindow({
    content: 'あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお'
    , maxWidth: 300
});

maxWidthを設定すると、こんなふう。

f:id:u87:20100629141522j:image


ところが…

infowindow = new google.maps.InfoWindow({
    content: 'あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお'
    , maxWidth: 1
});

試しに「1」を設定すると…

f:id:u87:20100629141109j:image

なんじゃこりゃー!!

どうやら長文になると、おかしなことになるらしい。

試しに「test」とかって短い一言だと、デフォルトのサイズになる。


ちなみに英数のみをcontentに設定する場合、スペースとかがなくて折り返せないと、吹き出しにスクロールバーが表示されるので、注意が必要…かも。

ハムハム 2010/07/16 19:59 このエントリにあった「InfoBoxというライブラリがあるらしい」のリンクをたどって、
情報ウィンドウのカスタマイズが実現可能になりました!
v3での実現方法が見つからなかったので助かりました!
どうもありがとうございます!!