JavaScript

Yahoo!地図にコントロール追加

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>

 

この記事を書いている人
株式会社ディープ

名前ダッチ

メールアドレスadachi@deep-deep.jp

Twitterはこちら >>

関連記事

最近の記事

  1. レンタルサーバ:おすすめの共用サーバ
  2. アフィリエイト
  3. VPSサーバー
  4. ブログのネタ探し
  5. プログラミング
  6. SSLとは
  7. 常時SSL通信設定後にやっておくべきこと
  8. 常時SSL通信設定方法
  9. htaccessとは
  10. WordPress

Twitter

ダッチ@職業ブロガー兼プログラマー
@gatsu0000

  • リモートやってみて分かったこと。 会社って意外と仕事に集中できていなかった。 当たり前か。会社って、別に落ち着ける空間じゃないですからね。
    about 4日 ago via Twitter Web App

アーカイブ

PAGE TOP