YOLP(地図)

JavaScript版地図

リクエストURL
JavaScript
http://map.yahooapis.jp/MapsService/js/V1/
このWeb APIは古いバージョンのため、2014年5月31日をもって廃止いたします。新しいYOLP地図APIへの移行をお願いいたします。Yahoo! JavaScriptマップAPI、もしくはYahoo!スタティックマップAPIをご利用ください。

ウェブページへ地図を埋め込む方法など、基本機能を説明します。

サンプルコード

以下のサンプルコードをコピーするだけで、ウェブページへ地図を埋め込めます。

<html>
<head>
<script type="text/javascript" 
   src="http://map.yahooapis.jp/MapsService/js/V1/?appid=YahooDemo">
</script>
<script type="text/javascript">
   window.onload=function(){
   _map = new YahooMapsCtrl("map", "35.40.39.980,139.46.13.730", 2);
}
</script>
<title>Yahoo!地図 サンプル</title>
</head>
<body>
<div id="map" style="height: 600px; width: 600px"></div>
</body>
</html>


APIのインクルード

本サービスを利用するためには、Yahoo!地図Web APIのJavaScriptファイルをインクルードする必要があります。以下の例では、サンプル用のappidを使っています。appidの詳細はこちらをご覧ください

<html>
<head>
<script type="text/javascript" 
   src="http://map.yahooapis.jp/MapsService/js/V1/?appid=YahooDemo">
</script>
</head>
<body>
...
...
</body>
</html>


地図の埋め込み

HTMLのなかの地図を埋め込みたい場所に、以下の例のようにdivタグで指定します。idには任意の文字列が使用できます。なお、地図の大きさはスタイルシート内で指定します。

<html>
<head>
<script type="text/javascript" 
   src="http://map.yahooapis.jp/MapsService/js/V1/?appid=YahooDemo">
</script>
</head>
<body>
<div id="map" style="height: 600px; width: 600px"></div>
...
</body>
</html>


地図を表示する

window.onloadのタイミングで、YahooMapsCtrlオブジェクトを生成します。YahooMapsCtrlの引数は以下のとおりです。

パラメータ 説明
id 地図を表示するHTML ElementのID
pos 初期表示位置(ホーム位置)の緯度経度(文字列またはYLLPointクラス)を指定します。
layer 初期表示位置(ホーム位置)の縮尺を指定します。縮尺は1~10の数値で値が大きくなるほど広域になります。デフォルト値は3です。地図は、縮尺が3以上で全国全域をカバーしています。
mode 初期表示位置(ホーム位置)の地図の種類を指定します。地図の種類は、YMapMode定数で指定します。デフォルト値はYMapMode.MAPです。

サンプルコードは以下のとおりです。

<script type="text/javascript">
   window.onload=function(){
      _map = new YahooMapsCtrl("map", "35.40.39.980,139.46.13.730", 2);
   }
</script>


地図を操作する

地図は、マウスドラッグによるスクロールやマウスホイールによる縮尺切り替えの操作が可能です。また、地図を操作するためのボタン(ナビゲーションアイコン)が地図上に表示されます。ナビゲーションアイコンは、左上から順に

  • より詳細な縮尺に切り替える
  • より広域な縮尺に切り替える
  • 地図に切り替える
  • 航空写真に切り替える
  • 初期表示位置と縮尺に戻る

となっています。



アイコン・吹き出し表示

以下の例では、地図上の指定した位置にアイコンを表示します。また、アイコンをマウスオーバーすると吹き出しが表示されます。

<script type="text/javascript">
    var popup='<a href="http://www.yahoo.co.jp/" target="_blank">Yahoo! Japan</a>';
    _map.addIcon('hills', '35.39.26.180,139.43.56.868', popup, 'L1', '六本木ヒルズ');
</script>

1行目では、吹き出しの内容を指定しています。このようにHTMLを直接記述することが可能です。

2行目では、指定した位置にアイコンを表示するために、addIconメソッドを呼び出しています。addIconメソッドの引数は以下になります。

  • 第1引数は任意の文字列が使用可能なIDを指定します。
  • 第2引数はアイコンを表示する位置を緯度経度で指定します。
  • 第3引数は吹き出しの内容を指定します。
  • 第4引数はアイコンの種類、すなわちカテゴリIDを指定します。
  • 第5引数はアイコンに表示するラベル文字列を指定します。ラベル文字列は省略可能です。

吹き出しの表示方法は、setEnableClickPopup(value) で変更可能です。アイコンをクリックして吹き出しを表示したい場合は、value=trueとします。アイコンにマウスカーソルを合わせたとき(マウスオーバー)に吹き出しを表示したい場合は、value=falseとします。デフォルトはマウスオーバーで吹き出し表示となります。



イベントを追加する

以下の例では、地図上でクリックした位置の緯度経度をダイアログ上に表示します。

<script type="text/javascript">
   ...
   _map.addEvent(YEventType.MAP_CLICK,function(p){alert(p)});
   ...
</script>


緯度経度文字列

緯度経度文字列で使用できる書式は以下のとおりです。

  • 度.分.秒形式(35.39.26.180,139.43.56.868)
  • 度/分/秒形式(35/39/26.180,139/43/56.868)
  • 度形式(35.657272,139.732463)

なお、緯度経度で使用する測地系は、日本測地系(Tokyo97)になります。