Web APIを使って、
Yahoo!地図にいくつかのコントロールを追加してみました！
例えば、
「Y.LayerSetControl」をセットすれば、
レイヤセット（[地図][写真][地下街]）の切り替えボタンを表示してくれます。
また、
「Y.SliderZoomControlVertical」をセットすれば、縦向きの「ズームコントローラー」、
「Y.SliderZoomControlHorizontal」をセットすれば、横向きの「ズームコントローラー」
を
「Y.HomeControl」は初期の位置にホームアイコンを、
「Y.CenterMarkControl」は中心位置を
表示してくれます。
あと、
「Y.CenterMarkControl」をセットしておけば、
地図の検索ボックスなんかも表示してくれます！！
ソースはこんな感じです↓
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=アプリケーションID" type="text/javascript" charset="UTF-8" ></script>
<script language="JavaScript">
window.onload = function(){
var map = new Y.Map("map_canvas");
var latlng = new Y.LatLng(35.681382, 139.766084) //東京駅
//コントロールの追加
map.addControl(new Y.LayerSetControl());
map.addControl(new Y.SliderZoomControlVertical());
map.addControl(new Y.HomeControl());
map.addControl(new Y.CenterMarkControl());
map.addControl(new Y.SearchControl());
//地図を表示
map.drawMap(latlng, 15);
}
</script>
</head>
<body>
<div id="map_canvas" style="width:100%;height:400px;"></div>
</body>
</html>
この記事へのコメントはありません。