(※画像使わずJS+CSSだけでマンガ風吹き出しのサンプル書きました →こちら)

スマホで Google maps api を使っていると標準の吹き出し(InfoWindow)が でかくて邪魔だ。

オプションで小さく出来るだろうと思って探したのだが InfoWindow にはそんなオプションは無い。

でも、標準以外の吹き出しなんてどこかで見掛けた気がするし 出来ないわけ無いと思って色々調べてやっと分かった。

Balloon をいじるのでは無くカスタム オーバーレイを使うらしい。

  • カスタム オーバーレイのAPIドキュメント
    http://code.google.com/intl/ja/apis/maps/documentation/javascript/overlays.html#CustomOverlays
  • 吹き出しのサンプル
    http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/
こいつを改造して自前の吹き出しを作ってみた。

因みにサンプルには無い吹き出しの影だが以下のサイトで作れる。 アイコンをUploadすると Google と同じ角度の影を生成してくれる。大変助かった。

  • Google map 用のアイコンの影を作ってくれるサイト
    http://www.powerhut.co.uk/googlemaps/custom_markers.php