Google Mapで表示する情報ウィンドウのデザインをカスタマイズする

kentomurata 423views 更新:2016年6月14日

Google Map APIで地図上に表示する情報ウィンドウのデザインのカスタマイズは、マーカーの場合とは少し異なります。 マーカーのようにアイコンを指定することはできないようです。

// 情報ウィンドウの中身の設定
var infoWindowOption = {
    position : position, // 座標(マーカーに紐付ける場合は必要なし)
    content : "<div id='infoWindow'>ウィンドウ内に表示するテキスト<br>" + 
              "<img src='画像のパス'><div> // ウィンドウ内に画像を追加できる
};

// ウィンドウのサイズや文字色の変更
#infoWindow {
  width: 200px;
  height: 200px;
}
#infoWindow span{
  color: blue;
}

// 情報ウィンドウ生成
var infoWindow = new google.maps.InfoWindow(infoWindowOption);

// ウィンドウを開く
infoWindow.open(map,marker); // マーカーに紐づけない場合は第2引数は必要なし

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

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

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