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

 情報ウィンドウを表示するにはshowSmartWindow()を使います。最初のパラメータが表示する地図上の位置になります。二番目のパラメータが情報ウィンドウ内に表示する文字列になります。標準テキストだけでなくHTMLも指定することができます。(実際のサンプルを実行する)


<html>
<head>
<title>sample</title>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=2.0&appid=openspaceYS"></script>
</head>
<body>
<div id="mapContainer" style="width:600px;height:600px"></div>
<script type="text/javascript"><!--
myPoint = new YGeoPoint(29, -97);
map = new YMap(document.getElementById("mapContainer"));
map.drawZoomAndCenter(myPoint, 3);
aHTML = "まだ、<b>日本の地図</b>は表示できないようです"
map.showSmartWindow(myPoint, aHTML);
// --></script>
</body>
</html>

 最初から情報ウィンドウが表示されている事は少ないでしょう。どちからと言えばマーカーをクリックしたら情報ウィンドウが表示される方が一般的です。この場合には先にマーカーを作成します。そのマーカーに対してYEventでイベントを設定します。以下のサンプルではマーカーがクリックされたら情報ウィンドウを表示する関数openInfoWindowを呼び出しています。(実際のサンプルを実行する)

<html>
<head>
<title>sample</title>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=2.0&appid=openspaceYS"></script>
</head>
<body>
<div id="mapContainer" style="width:600px;height:600px"></div>
<script type="text/javascript"><!--
myPoint = new YGeoPoint(29, -97);
map = new YMap(document.getElementById("mapContainer"));
map.drawZoomAndCenter(myPoint, 3);
marker = new YMarker(myPoint);
marker.addLabel("!?");
YEvent.Capture(marker, EventsList.MouseClick, openInfoWindow);
map.addOverlay(marker);
function openInfoWindow()
{
var txt = "マーカークリックで情報ウィンドウを表示できます";
marker.openSmartWindow(txt);
}
// --></script>
</body>
</html>

[目次へ]

(2006.3.1)