地図上の特定の位置にマーカーを表示することができます。マーカー内には、簡単な文字（１文字程度）を表示することができます。マーカーはYMkarker()を使います。パラメータには位置情報を指定します。この位置情報はYGeoPoint()で作成したオブジェクトになります。マーカー内に表示する文字はaddLabel()のパラメータに指定します。標準のテキストだけでなくHTMLを指定することができます。
マーカーを地図上に表示するにはaddOverlay()を使います。パラメータは表示したいマーカーオブジェクトを指定します。以下のサンプルは標準のマーカーを表示しマーカー内に!?と表示します。（実際の
サンプルを実行する）
<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("!?");
map.addOverlay(marker);
// --></script>
</body>
</html>
標準のマーカーではなく、カスタムマーカーを表示することもできます。YImage()でマーカー画像オブジェクトを作成します。srcプロパティに表示するカスタムマーカーのURLを指定します。カスタムマーカーはYMarker()の二番目のパラメータにYImage()で作成した画像オブジェクトを指定します。表示する際には標準のマーカーを表示する場合と同じaddOverlay()を使います。（実際の
サンプルを実行する）
<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);
pImage = new YImage();
pImage.src = "custom.gif";
marker = new YMarker(myPoint, pImage);
map.addOverlay(marker);
// --></script>
</body>
</html>
[
第15章 情報ウィンドウを表示するへ]
[
目次へ]
(2006.2.28)