Webサイトに地図が載せられる『Yahoo!地図情報API』

Yahoo!地図情報APIはWebサイトに簡単に地図を乗せることが出来る、Google MapのYahoo!版のサービスです。

地図はJavaScript版とFlash版があり好きなほうを選択できます。

設置方法

Yahoo!地図情報APIはアプリケーションIDですので、まず最初にアプリケーションIDを取得してください。

head要素などでjavascriptを取得する際に、アプリケーションIDをURLに含む形で記述します。

<script type="text/javascript"   src="http://api.map.yahoo.co.jp/MapsService/js/V1/?appid=アプリケーションID"></script>

script要素で地図情報を設定します。

<script type="text/javascript">
   window.onload=function(){
   _map = new YahooMapsCtrl("html上のid", "緯度,緯度", zoom倍率);
}
</script>

実際に設定した場合は以下のような感じです。

<script type="text/javascript">
   window.onload=function(){
   _map = new YahooMapsCtrl("map", "34.68674528,135.52731222", 4);
}
</script>

経度緯度は経度緯度 検索より取得してください。

他のライブラリなどと併用して利用する際はonloadイベントを書き換える必要があります。

zoom倍率は1～10の値が指定可能で値が大きくなるほど地図が広域になります。

参考：複数のjsライブラリを利用する際にonloadを書き換える方法

body要素内にはJavaScript上で設定したidが付いている要素を設置します。

<div id="map" style="height: 600px; width: 600px"></div>

これで設置は完了です。

サンプル

航空写真を表示する

初期状態で航空写真を表示する際にはYMapMode.AEROを追加します。

<script type="text/javascript">
   window.onload=function(){
   _map = new YahooMapsCtrl("map", "34.68674528,135.52731222",4,YMapMode.AERO);
}
</script>

サンプル

ポップアップウィンドウを表示する

ポップアップウィンドウは以下のように設置します。

<script type="text/javascript">
   window.onload=function(){
   _map = new YahooMapsCtrl("map", "34.68674528,135.52731222", 4);
   _map.addIcon('任意のID', '緯度,緯度','ポップアップウィンドウの内容');
}
</script>

サンプル

アイコンを表示する

アイコンを表示する場合は以下のように設定します。

<script type="text/javascript">
   window.onload=function(){
   _map = new YahooMapsCtrl("map", "34.68674528,135.52731222", 4);
   _map.addIcon('任意のID', '緯度,緯度','', 'アイコンの種類', '噴き出しの文字');
}
</script>

アイコンの種類はL1～L5、S1～S5が設定可能です。

サンプル

関連エントリー

Googleに挑むYahoo!Japan
関連キーワードを探すキーワードアドバイスツールα
経度緯度 検索作りました。
[書評]Webユーザビリティ・デザイン-Web制作者が身につけておくべき新・100の法則
WEBサイトの横幅はどうしましょう？

スポンサードリンク

«Movable TypeでSEO対策-Feed編- | メイン | XML宣言について»