地図蔵 ▷ Blog: Geographic Diary ▷ 2012年までの記事「jqueryでinfoWindow代用」

jqueryでinfoWindow代用

(2012年5月12日)

一般の Google Maps API では情報ウィンドウ(infoWindow)のカスタマイズはむずかしい。
公に配布されるライブラリ(例1例2例3)もあるけれど、PCで見るぶんにはデフォルトでもさしつかえない。
だがスマートフォンで見るとき、表示領域に占有する割合が相対的に大きく、操作をややこしくする。

そこで、jquery を使って infoWindow の代用を試みた。

サンプル

ナカナカ可愛らしいと思うのだけれど。

$("#infoWindow").show().html("<img src='close.png' class='close'>"+$("#infoWindow").html()).css({
marginTop:"-"+$("#infoWindow").height()/2+"px",
marginLeft:"-"+$("#infoWindow").width()/2+"px"
});

なお、このブログ部分も UserAgent で CSS を振り分けてスマホに対応した(といっても幅の指定をピクセルからパーセンテージにしただけ)。

ブロードバンドが普及した当時、ネットの世界はコンテンツが冗長に肥大化・重量化していった。が、今のモバイル隆盛によって結果的に質実・軽量の方向へ傾倒して行くものと思う。