どうなんだろう？ Google AJAX API

Google AJAX API ｊQuery JavaScript

色々と困ったことがあって解決策として、jQueryを使うことにした。
そこで、折角なのでGoogleが提供しているAJAX APIを利用してみた。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>

とりあえずjQueryの1.3（の最新版）を読み込むことにした。
Googleがお亡くなりになったり、jQueryの配布を止めない限り、OKなワケだけど…
やっぱりjQuery自体をサーバに置いておいた方が心臓にはいいような…？

デベロッパー ガイド - Google AJAX API - Google Code

ここのドキュメントを読む限り、この方法でGoogle Maps APIも読み込めるようだね。
とはいえ利用できるバージョンは2なんだね。3を使うのであれば、google.load()は使えないのか。

infowindowのサイズ指定

Google Maps API v3

昨日のエントリに久しぶりに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で、こんなふうになる。

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

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


ところが…

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

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

なんじゃこりゃー！！
どうやら長文になると、おかしなことになるらしい。
試しに「test」とかって短い一言だと、デフォルトのサイズになる。


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