GoogleMapAPIでよく使っていたinfoWindow。
マーカーをクリックすると表示されるアレです。その仕様が変更されて、なんやら上に無駄な空白が表示されるようになって数ヶ月。

そろそろなんとかしなきゃなあと調べたので、メモ。

JavaScript API 3.57 バージョンより、
InfoWindow にヘッダ（headerContent）が追加され、
InfoWindow 内にタイトルとコンテンツをそれぞれ設定できるようになりました。

https://developers.google.com/maps/documentation/javascript/infowindows
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

で、どうするかですが、

対策1：

今までは、infoWindowの中身を設定するとき、

content: 'ホゲホゲ'

って記載していたんですけど、
それだと空白のヘッダ部分が表示されてなんだか見た目変なので、

headerContent: 'ホゲホゲ'

とする。

対策2：

オプションに、ヘッダを表示させないための

headerDisabled:true

を追加する。ちなみにCloseボタンも非表示になってしまいますが・・・

とりあえず対策1で凌ぎます。

例えば、ウェブサイトでプルダウンを変更した際に、値によって文字の色を変えたい時などに用います。

こんなselectを用意します。

<select id="selectColor">
<option data-color="#000" value="1">黒</option>
<option data-color="#F00" value="2">赤</option>
<option data-color="#00F" value="3">青</option>
</select>

次にJQueryで

$(document).on( 'change', '#selectColor', function(){
    $(this).css( 'color', $(this).find('option:selected').data('color') );
} );

選択しているoptionは、「option:selected」で取得できます。

たまに忘れちゃうので、メモ。

二つ以上のイベントで同じ処理を行いたい時の書き方。レスポンシブ・ウェブ・デザインで、CSSで対応が面倒な場合に使うので。

$(window).on( 'load resize', function(){
　//何らかの処理
}