• 小
  • 中
  • 大

情報ウィンドウの作成


地図上やマーカーなどをクリックした時にその地点に関する情報を表示するために使用されるのが情報ウィンドウです。下のような形で地図上で表示されます。

表示例 情報ウィンドウ


情報ウィンドウを表示させる為の準備として、はじめに情報ウィンドウを表すInfoWindowクラスのオブジェクトを作成します。コンストラクタ関数は次のように定義されています。


InfoWindow(opts?:InfoWindowOptions)
指定されたオプションを使用して情報ウィンドウを作成します。
情報ウィンドウは、オプションでの指定に応じて、地図上の特別な位置やマーカーの上
に配置することができます。
地図の自動移動が無効にでない限り、情報ウィンドウを開くと、情報ウィンドウが
地図内に表示されるように地図が移動します。
情報ウィンドウを作成した後、openを呼び出し地図上に表示させる必要があります。
ユーザーは情報ウィンドウの閉じるボタンをクリックして地図から情報ウィンドウ
を削除できます。またはデベロッパーが close() を呼び出しても同じことです。

オプションである1番目の引数には情報ウィンドウに表示するテキストや位置などを決める為に使用するInfoWindowOptionsオブジェクトを指定します。引数を省略した場合は用意されているmethodなどを使って設定して下さい。

次のように記述します。
var infowindow1 = new google.maps.InfoWindow();
var infowindow2 = new google.maps.InfoWindow({
content: 'string',
});

1つ目は引数を省略したもの。2つ目はInfoWindowOptionsオブジェクトにcontent プロパティを指定したものです。

InfoWindowOptionsオブジェクト

情報ウィンドウは情報を表示するためなので情報ウィンドウ内に表示するコンテンツを指定する必要があります。また情報ウィンドウを表示する座標も指定しなければなりません。

情報ウィンドウに必要な設定を記述するために使用するオブジェクトInfoWindowOptionsがです。このオブジェクトの仕様は次のようになっています。

プロパティタイプ説明
contentstring | Node情報ウィンドウで表示するコンテンツ。これは HTML 要素、プレーン テキストの文字列、あるいは HTML を含む文字列を指定できます。情報ウィンドウのサイズはコンテンツに応じて調整されます。コンテンツのサイズを明示的に設定するには、コンテンツをそのサイズの HTML 要素となるように設定します。
disableAutoPanboolean情報ウィンドウを開くときの地図の自動移動を無効にします。デフォルトでは、情報ウィンドウを開いたときにウィンドウ全体が表示されるように地図が移動します。
maxWidthnumber情報ウィンドウの最大幅(コンテンツの幅に非依存)。この値は、呼び出しの前に設定します。コンテンツを変更するときに最大幅を変更するには、close、setOptions を呼び出してから、これを開きます。
pixelOffsetSize情報ウィンドウが固定されている地理的座標の地図上の地点を基準とした、情報ウィンドウの先端までのピクセル単位でのオフセット値。アンカーを持つ情報ウィンドウを開くときは、pixelOffset はアンカーが結び付けられている領域の上-中央の位置から計算します。
positionnumberすべての情報ウィンドウが zIndex 順に表示され、高い値の情報ウィンドウは低い値の情報ウィンドウより前に表示されます。デフォルトでは、情報ウィンドウは緯度に従って表示され、低い緯度の情報が高い緯度の情報ウィンドウより前に表示されます。情報ウィンドウは常にマーカーの前に表示されます。

必須となっているプロパティはありませんが、「content」プロパティに対して情報ウィンドウで表示するコンテンツは指定して置く必要があります。

また情報ウィンドウをマーカーなどのアンカーと呼ばれるものに対して設定する場合を除いて「positon」プロパティに対して情報ウィンドウを表示する座標を指定する必要があります。

次のようにオブジェクトを作成します。
var latlng = new google.maps.LatLng(35.658704,139.745408);
var Iwopts = {
content: 'Hello',
positon: latlng
};

作成したオブジェクトリテラルを引数に指定してInfoWindowクラスのオブジェクトを作成します。
var latlng = new google.maps.LatLng(35.658704,139.745408);
var Iwopts = {
content: 'Hello',
positon: latlng
};
var infowindow = new google.maps.InfoWindow(Iwopts);

これで表示するコンテンツと座標が設定された情報ウィンドウが作成されました。

InfoWindowOptionsオブジェクトの再設定

InfoWindowクラスのオブジェクトを作成する時にInfoWindowOptionsオブジェクトを指定しましたが、InfoWindowクラスのオブジェクトを作成した後で、改めて別のInfoWindowOptionsオブジェクトを設定することもできます。

再度設定を行うにはInfoWindow クラスで用意されている「setOptions」methodを使います。

setOptions(options:InfoWindowOptions)

引数に再設定したいInfoWindowOptionsオブジェクトを指定します。
var latlng = new google.maps.LatLng(35.658704,139.745408);
var Iwopts = {
content: 'Hello',
positon: latlng
};
var infowindow = new google.maps.InfoWindow(Iwopts);
var Iwopts1 = {
content: 'Good-bye',
};
infowindow.setOptions(Iwopts1);

情報ウィンドウは作成するだけでは表示されません。表示するには情報ウィンドウを開く必要があります。

サンプルコード

サンプル.js


var map;

function initialize() {
var latlng = new google.maps.LatLng(35.658704,139.745408);
var opts = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map
(document.getElementById("map_canvas"), opts);
var infowindow = new google.maps.InfoWindow({
content: '東京タワー',
position: latlng
});
infowindow.open(map);
}

サンプル.html
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps v3 JavaScript API サンプル</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="サンプル.js" type="text/javascript"></script>
</head>
<body onload="initialize()">
<p>Google Maps v3 APIを使ったサンプル。</p>
<div id="map_canvas" style="width:500px; height:300px"></div>
</body>
</html>


表示例 情報ウィンドウの作成


Google Maps サンプル > 情報ウィンドウの作成