Yahoo! JavaScriptマップAPIで表示している画像を変更させるサンプルプログラム。下の例では、クリックするたびに○と×が交互に表示されます。画像を表示させるだけの場合は、好きな画像をマーカーとして表示させるのページを。
var myMap = new Y.Map("map"); myMap.drawMap( new Y.LatLng(35.710139, 139.810833), 14, Y.LayerSetId.NORMAL ); // ○の画像 var icon_o = new Y.Icon('o.png', { iconAnchor: new Y.Point(16,16) }); // ×の画像 var icon_x = new Y.Icon('x.png', { iconAnchor: new Y.Point(16,16) }); // マーカー var myMarker = new Y.Marker( new Y.LatLng(35.710139, 139.810833), { icon: icon_o // はじめは〇 } ); myMap.addFeature(myMarker); // マーカーにクリックイベントをbind myMarker.bind('click', function(){ // 末尾の一致で一致とします if (myMarker.getDOMNode().src.match(icon_o.image + '$')) { // ○なら×を myMarker.setIcon(icon_x); } else if (myMarker.getDOMNode().src.match(icon_x.image + '$')) { // ×なら〇を myMarker.setIcon(icon_o); } else { // え? alert('Oh, my God!'); } });
どこかでトグル持ってるほうがいいのかなぁ。
デフォルトのマーカーにしたいときは、Y.Icon.DEFAULT_ICONを与えてやれば良いようです。
marker.setIcon(Y.Icon.DEFAULT_ICON);