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>
この記事へのコメントはありません。