好きな画像をマーカーとして表示させる

Yahoo! JavaScriptマップAPIで既定のアイコンを使わずに独自の画像を表示させるサンプルプログラム。MarkerのコンストラクタのオプションのなかでiconとしてY.Iconクラスで与えてやればよさそうです。コンストラクタに画像ファイルのURLを与えてやると、デフォルトのマーカーの代わりに表示してくれます。

  var myMap = new Y.Map("map");
  myMap.drawMap(
    new Y.LatLng(35.710139, 139.810833), 
    14,
    Y.LayerSetId.NORMAL
  );

  var myMarker = new Y.Marker(
    new Y.LatLng(35.710139, 139.810833),
    {
      icon: new Y.Icon('v.png')
    }
  );
  myMap.addFeature(myMarker);

画像の下部中央がマーカーの座標になるように表示されます。それではうれしくない場合には、IconのコンストラクタにiconAnchorのオプションをY.Pointで与えましょう。

  var myMap = new Y.Map("map");
  myMap.drawMap(
    new Y.LatLng(35.710139, 139.810833), 
    14,
    Y.LayerSetId.NORMAL
  );

  var myMarker = new Y.Marker(
    new Y.LatLng(35.710139, 139.810833),
    {
      icon: new Y.Icon('x.png', {
        iconAnchor: new Y.Point(16,16) // アイコン座標のどこをマーカーの座標（緯度経度）にするか
      })
    }
  );
  myMap.addFeature(myMarker);