情報ウィンドウを表示する

　Google Mapsでは地図上に画像や文字を表示することができます。任意の画像も表示できますが、ここではふきだし型の情報ウィンドウを表示させます。このふきだし型の情報ウィンドウは標準で用意されているため特に画像などを用意することなく利用できます。情報ウィンドウを表示するためのメソッドは以下の4種類があります。

openInfoWindow()エレメントやノードを指定し開く
openInfoWindowHtml()指定されたHTML文字を指定して開く
openInfoWindowXslt()XML,XSLを利用して開く
showMapBlowup()指定位置の周辺地図を開く

　一番手軽なのは2番目のHTMLデータを情報ウィンドウに表示するものです。タグを指定しなければ普通の文字列が表示されます。（サンプルを表示する）

<!DOCTYPE html PUBLIC "-//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>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[

var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(138.73123168945312, 35.35657620196121), 6);

function dispInfo()
{
map.openInfoWindowHtml(map.getCenterLatLng(),"ここは日本で一番高い山、富士山です。");
 }
//]]>
</script>
<form>
<input type="button" value="情報ウィンドウを表示する" onClick="dispInfo()" /><br />
</form>
</body>
</html>

　情報ウィンドウを表示する際に、指定した座標からのオフセット（ずれ具合）を指定することもできます。HTML文字列の後の引数にnew GSize()で横方向と縦方向のオフセットを指定します。値はピクセルになります。地図の倍率には注意する必要があります。（サンプルを表示する）

<!DOCTYPE html PUBLIC "-//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>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[

var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(138.73123168945312, 35.35657620196121), 6);

function dispInfo()
{
map.openInfoWindowHtml(map.getCenterLatLng(),"ここは日本で一番高い山、富士山です。",new GSize(100,50));
 }
//]]>
</script>
<form>
<input type="button" value="情報ウィンドウを表示する" onClick="dispInfo()" /><br />
</form>
</body>
</html>

　上記のサンプルをWindows版のInternet Explorer 6では普通に表示されます。しかし、FirefoxやSafariでは以下の図のように文字が正しく表示されません。

●Windows版Internet Explorer 6


●MacOS X版Safari 2


●MacOS X版Firefox 1.5


　これを回避するにはdivタグなどで横幅を指定します。幅を固定したくない場合にはwhite-space: nowrapを指定する方法もあります。（サンプルを実行する）

<!DOCTYPE html PUBLIC "-//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>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[

var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(138.73123168945312, 35.35657620196121), 6);

function dispInfo()
{
map.openInfoWindowHtml(map.getCenterLatLng(),"<div style='width:280px'>ここは日本で一番高い山、富士山です。</div>",new GSize(100,50));
}
//]]>
</script>
<form>
<input type="button" value="情報ウィンドウを表示する" onClick="dispInfo()" /><br />
</form>
</body>
</html>

　情報ウィンドウを開いたり、閉じる際に処理を行わせることができます（全ての情報ウィンドウで指定できます）。これは以下のように引数に処理させる関数名を指定します。（サンプルを実行する）

<!DOCTYPE html PUBLIC "-//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>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[

var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(138.73123168945312, 35.35657620196121), 6);

function dispInfo()
{
map.openInfoWindowHtml(map.getCenterLatLng(),"<div style='width:280px'>ここは日本で一番高い山、富士山です。</div>",new GSize(100,50),infoOpen,infoClose);
}
function infoOpen()
{
alert("情報ウィンドウが開かれました");
}
function infoClose()
{
alert("情報ウィンドウを閉じます");
}
 //]]>
</script>
<form>
<input type="button" value="情報ウィンドウを表示する" onClick="dispInfo()" /><br />
</form>
</body>
</html>

　HTMLでなくテキストノードを指定する場合にはopenInfoWindow()を使います（HTMLで指定する方が楽だとは思いますが）。実際のサンプルは以下のようになります。（サンプルを実行する）

<!DOCTYPE html PUBLIC "-//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>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[

var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(138.73123168945312, 35.35657620196121), 6);

function dispInfo()
{
textNode = document.createTextNode("ここは日本で一番高い山、富士山です。");
map.openInfoWindow(map.getCenterLatLng(),textNode);
 }
//]]>
</script>
<form>
<input type="button" value="情報ウィンドウを表示する" onClick="dispInfo()" /><br />
</form>
</body>
</html>

　テキストでなく画像を表示する場合にはimgエレメントを作成する方法もあります。（サンプルを実行する）

<!DOCTYPE html PUBLIC "-//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>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[

var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(138.73123168945312, 35.35657620196121), 6);

function dispInfo()
{
imgObj = document.createElement("img");
imgObj.src = "icon.jpg";
map.openInfoWindow(map.getCenterLatLng(),imgObj);
 }
//]]>
</script>
<form>
<input type="button" value="情報ウィンドウを表示する" onClick="dispInfo()" /><br />
</form>
</body>
</html>

　エレメントを作成する以外にHTMLタグ内にimgタグを指定しても画像を表示させることができます。（サンプルを実行する）

<!DOCTYPE html PUBLIC "-//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>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[

var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(138.73123168945312, 35.35657620196121), 6);

function dispInfo()
{
map.openInfoWindowHtml(map.getCenterLatLng(),"<div style='width:280px'><img src='icon.jpg' align='left'>　画像と文字を混在させることもできます。</div>");
 }
//]]>
</script>
<form>
<input type="button" value="情報ウィンドウを表示する" onClick="dispInfo()" /><br />
</form>
</body>
</html>

　指定したポイント近辺の地図を情報ウィンドウに表示させることもできます。
この場合はshowMapBlowup()を使います*1。最初の引数（パラメータ）が座標値、次がズームレベルになります。座標値だけが必須であとは省略することができます。地図でなく衛星写真を表示したい場合には三番目の引数に表示方法を示すプロパティ（G_SATELLITE_TYPE）を指定します。

*1　Google Maps APIバージョン2の2.59以降ではshowMapBlowup()が正しく動作しないバージョンがあります（衛星写真が表示されず地図表示になる。ver 2.59, 2.60, 2.61)
<!DOCTYPE html PUBLIC "-//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>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[

var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(138.73123168945312, 35.35657620196121), 6);

function dispInfo()
{
map.showMapBlowup(new GPoint(138.73123168945312, 35.35657620196121),3,G_SATELLITE_TYPE);
 }
//]]>
</script>
<form>
<input type="button" value="情報ウィンドウを表示する" onClick="dispInfo()" />
</form>
</body>
</html>

　開いている情報ウィンドウを閉じるにはcloseInfoWindow()を使います。もし、開いていない場合に呼び出してもエラーにはなりません。（サンプルを実行する）

<!DOCTYPE html PUBLIC "-//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>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[

var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(138.73123168945312, 35.35657620196121), 6);

function dispInfo()
{
map.openInfoWindowHtml(map.getCenterLatLng(),"<div style='white-space: nowrap'><img src='icon.jpg' align='left'>　画像と文字を混在させることもできます。</div>");
}
function closeInfo()
{
map.closeInfoWindow();
 }
//]]>
</script>
<form>
<input type="button" value="情報ウィンドウを表示する" onClick="dispInfo()" />
<input type="button" value="情報ウィンドウを閉じる" onClick="closeInfo()" /><br />
</form>
</body>
</html>

　次項では地図上に表示されるマーカーについて説明します。

[第七章　7:マーカーを表示するへ]
[目次へ]

(2006.1.24)