JavaScript版地図

サンプルコード

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

APIのインクルード

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

地図の埋め込み

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

地図を表示する

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

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

地図を操作する

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

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

となっています。

アイコン・吹き出し表示

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

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

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

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

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

イベントを追加する

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

緯度経度文字列

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

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

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