Yahoo!地図のAPI(14) -V3のサンプルコード-

今まで"Yahoo!地図"のAPIに関してはV1(バージョン1)でテストし、V2(バージョン2)になっても機能が増えただけで書き方は変わってなかったので放置していたが、V3が今までと違うということで機能の違いやソースの違いについて調べることした。

まず、一般的に利用されるJavaScriptでの地図機能に関してはV3よりレイヤーの概念が入ったり、吹き出しやマーカーなど既存機能に細かな調整が加えられている。

V2で提供されていたFlash版がV3により無くなったが、携帯電話などJavaScritpが使えない環境で地図APIを利用する「スタティックマップ」に入れ替わった。


肝心なコーディングの方だが、関数名が変わっている他に、オプションの指定も違うのが別物と考えた方がいいだろう。
しかし、地図の表示やマーカーの指定など書き方は類似しているのでゼロから勉強する必要はなさそうだ。

下記が公式サイトにあったサンプルソースと、それを実行した画像だ。


<html>
<head>
<script type="text/javascript" charset="utf-8"
src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=【appid】"></script>
<script type="text/javascript">
window.onload = function() {
var ymap = new Y.Map("map");
ymap.drawMap( new Y.LatLng(35.662484, 139.734222), 13 , Y.LayerSetId.NORMAL );
}
</script>
</head>
<body>
<div id="map" style="width:600px; height:600px"></div>
</body>
</html>



 バージョン3地図


ちなみに、下記のソースはV2のサンプルソースで過去の記事にも掲載したものだ。
->Yahoo!地図情報のAPI -YahooAPI-

APIを読み込むURLからして違うのだが、大よそ地図を呼び出して座標指定するなどには変わりが無い。


<html>
<head>
<script type="text/javascript"
src="http://api.map.yahoo.co.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というとやはり"Google Map"のほうが利用率が高く利用例も多いのに対し、"Yahoo!地図"を利用しているサイトをほぼ見ることがないほどどこで利用されているのかが不明で、クライアントが選択する際にはやはり実例の多い"Google Map"が選ばれる傾向にある。

また、今まで利用してきたAPIが使えなくなることがあるので仕事で導入するにはやや不向きな点があるのは否めない。

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント

この記事へのトラックバック