Google Maps APIでinfoWindowのサイズがどうしても変わらない場合の対処方法

harada 202views 更新:2015年10月22日

Google Maps APIのinfoWindowを利用することで、地図に吹き出しをつけることができます。
通常のスタイル利用の場合はいいのですが、この吹き出しのスタイルをカスタマイズしようと思うとかなり骨が折れます。

infoWindowのサイズ変更ではmaxWidthなどのオプションも用意されているにはされているのですが、これがモバイルだと一定以下のサイズにならなかったり、必ずパディングが生じてしまったりと、色々起こります。

これはCSSだけでは対処できないため、jQueryを併用しての対応方法です。

jQueryでgm-style-iwの外側のclassを追加

jQuery(function ($) {
    var iwOuter = $('.gm-style-iw');
    iwOuter.parent().addClass('custom-iw');
});

追加したclassに対してcssでサイズ指定

.custom-iw {
    width: 230px !important;
}

参考: infowindowのサイズ指定Add Star
Google Maps InfoWindow width is overwritten even when set correctly

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません