JavaScriptマップAPIの読み込み
次に、ロジックを書くにあたり必要なファイルを<script>タグで読み込みます。まず当然ながらJavaScriptマップAPI、それにコードを簡潔にするためにjQueryを利用します。jQueryは今回はjQuery自身がCDNで配布している最新バージョンを使用します。JavaScriptマップAPIの＜あなたのアプリケーションID＞の部分はご自分で取得されたアプリケーションIDに書き換えてください。
</body>
<script src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=＜あなたのアプリケーションID＞"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</html>
地図を初期化する
いよいよロジックを書いていきます。まずは地図を初期化します。
JavaScriptマップAPIのY.Mapは、任意のブロック要素のIDを引数に取ってその要素の中に地図ビューを自動的に構築してくれます。ビューで記述した<div id="map">の"map"を引数に渡します。
また、iPhoneではピンチ操作で拡大・縮小ができますが、Androidでは対応していない端末もあるので、拡大・縮小を切り替えるためのコントロール（GUI）であるY.ZoomControlを追加します。
最後に、適当な位置を指定してY.MapのdrawMapメソッドを呼び出せば地図が表示されます。drawMapに限らずJavaScriptマップAPIの位置を指定するメソッドの多くは緯度経度を扱うY.LatLngを引数に取ることが多いです。なお、14は地図の縮尺値、Y.LayerSetId.NORMALは地図の種類を指定しています。
<script>
jQuery(document).ready(function($){
var map = new Y.Map("map");
map.addControl(new Y.ZoomControl());
map.drawMap(new Y.LatLng(34.6812,135.2022), 14, Y.LayerSetId.NORMAL);
});
</script>
現在位置を取得する
次に、現在位置の取得です。
スマホのブラウザのJavaScriptで現在位置を取得するためにはGeolocation APIを利用します。navigator.geolocationオブジェクトが存在すればGeolocation APIは有効です。
Geolocation APIには位置取得のためのメソッドとしてgetCurrentPositionとwatchPositionの2つがありますが、ここではgetCurrentPositionメソッドを使用します。
getCurrentPositionの引数には成功時のコールバックを指定し、コールバックには取得した現在位置の情報がPositionオブジェクトとして渡されます。そのオブジェクトのcoords.latitudeとcoords.longitudeに緯度経度が格納されているので、その値を使ってY.LatLngオブジェクトを新しく生成します。その位置を引数に、「最寄りのマクドナルドを探せ」というsearchNearestMcDonaldメソッドを呼び出すことにします。
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(pos){
var latlng = new Y.LatLng(pos.coords.latitude,pos.coords.longitude);
searchNearestMcDonald(latlng);
});
}
Geolocation APIの詳しい仕様についてはhttp://www.w3.org/TR/geolocation-API/などを参考にしてください。
