Googleとの比較で学ぶYahoo!マップAPIの使い方 (1/3)

2012年03月19日　11時00分更新

文●古籏一浩

ツイートする

　Yahoo! JAPANが提供している地図サービス「Yahoo! Open Local Platform（YOLP）」の「JavaScriptマップAPI」（以降は「Yahoo!マップ」と表記します）について、前回に続きGoogle Maps APIと比較しながら解説します。基本的な地図の表示、マーカーやクリックイベントの設定方法は前回紹介しましたので、今回は、地図の移動やズームレベルの変更方法、地図上への多角形の描画方法を解説します。

地図を移動させる

　最初に、指定した緯度・経度の場所に地図を移動させてみましょう。地図の移動は、GoogleマップもYahoo!マップもマップオブジェクトのpanTo()メソッドを使い、移動先の緯度・経度を示すオブジェクトを引数に指定します。

　Yahoo!マップの場合は、panTo()メソッドの第2引数にアニメーションフラグを指定できます。trueならアニメーションしながら地図がスクロールし、falseならすぐに表示が切り替わります。

　サンプル10がGoogleマップ、サンプル11がYahoo!マップです。

Googleマップの場合。5秒後に渋谷駅まで地図が移動する

Yahoo!マップの場合。5秒後に渋谷駅まで地図が移動する

■サンプル10[HTML]

<!DOCTYPE html><html>   <head>   <metacharset="utf-8">     <title>グーグルマップで地図の中心を変更する</title>    <scriptsrc="http://maps.googleapis.com/maps/api/js?sensor=false"></script>    <scripttype="text/javascript"src="js/sample.js"></script>  </head>  <body>    <h1>グーグルマップで地図の中心を変更する</h1>    <divid="myMap"style="width:600px;height:400px;"></div>  </body></html>

■サンプル10[sample.js]

window.onload =function(){  var lat =35.692507;  // 新宿駅の緯度  var lng =139.700346;// 新宿駅の経度  map =new google.maps.Map(    document.getElementById("myMap"),{      zoom :13, // ズームレベルは13      center :new google.maps.LatLng(lat, lng),      mapTypeId : google.maps.MapTypeId.ROADMAP// 通常の地図を表示    }  );  // 5秒後に渋谷駅に移動  setTimeout(function(){    map.panTo(new google.maps.LatLng(35.658412,139.701633));  },5*1000);}

■サンプル11[HTML]

<!DOCTYPE html><html>   <head>   <metacharset="utf-8">     <title>ヤフーマップで地図の中心を変更する</title>    <scripttype="text/javascript"src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=●●●"></script>    <scripttype="text/javascript"src="js/sample.js"></script>  </head>  <body>    <h1>ヤフーマップで地図の中心を変更する</h1>    <divid="myMap"style="width:600px;height:400px;"></div>    <divid="mapPos"></div>  </body></html>

■サンプル11[sample.js]

window.onload =function(){  var lat =35.692507;  // 新宿駅の緯度  var lng =139.700346;// 新宿駅の経度  map =new Y.Map("myMap");  map.drawMap(    new Y.LatLng(lat, lng),    13, // ズームレベルは13    Y.LayerSetId.NORMAL // 通常の地図を表示  );  // 地図の種類を切り換えるコントローラーを表示  map.addControl(new Y.LayerSetControl());  // ズームコントローラーを表示  map.addControl(new Y.SliderZoomControlVertical());  // ドラッグしたら地図の中心の緯度経度を表示  setTimeout(function(){    map.panTo(new Y.LatLng(35.658412,139.701633),true);  },5*1000);}