2014/03/11

簡単にGoogle Mapの情報ウィンドウをカスタマイズする方法

簡単にGoogle Mapの情報ウィンドウをカスタマイズする方法

前回、Google Mapのマーカーを自由にカスタマイズする方法をご紹介しました。いつもとは違うマーカーに変えるだけでも注目度は上がります。

そこで今回は情報ウィンドウのカスタマイズ方法をご紹介します。画像の差し込みやウィンドウ自体の見た目のカスタマイズも自由に出来ますので、サイトデザインに合わせたり、ロゴを挿入してみたり、注目度はさらに上がります。

目次

情報ウィンドウを表示させるには

Google Mapの簡単な表示方法は,コピペで簡単!Google Mapをサイトに表示する方法を参照してください

情報ウィンドウを表示するには,以下の様にオプションを指定後,ウィンドウを生成し,ウィンドウを開きます.

var infoWindowOption = {
    position : position, //座標
    content : "ウィンドウ内に表示する文字列"
};

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

これで,通常使用するウィンドウを表示することが出来ます.

情報ウィンドウをカスタマイズするには

上記の方法では文字だけなので印象としては少し弱いですね.

そこで,オプションのcontentにHTMLを使用し,IDやクラス名を付与して入力することで,スタイルの変更や画像の挿入などが行えるようになります.

例として,以下のようにオプションとCSSを変更し,ウィンドウサイズの変更と文字色の変更,画像の挿入を行なってみたいと思います.

var infoWindowOption = {
    position : position, // 座標
    content : "<div id='infoWindow'>ウィンドウ内に表示する文字列<br>" +
              "<span>文字色の変更</span><br>" +
              "<img src='画像のパス'><div>
};

ウィンドウのサイズや文字色の変更などのスタイルの変更は,以下のように普段通りのCSSの記述と同様です.

#infoWindow {
  width: 200px;
  height: 200px;
}

#infoWindow span{
  color: blue;
}

まとめ

少し手を加えるだけで簡単に見た目を変更できることがお分かりいただけたかと思います.

少し手を加えるだけで印象を強くしたり,視認性を上げたりすることが出来るので,
文字だけでは印象が弱いと感じたら,ぜひ使ってみてください.