jQueryでGPSを取得して地図を表示するサンプルです。
地図はYahooのAPI(YOLP)を使っています。(ブログの画像はgoogleですけどね)
特にYOLP使っている理由はないんですが、google map 以外も使えるようになろうかなと。
JavaScriptでは「Geolocation API」というAPIを使い「navigator.geolocation」で位置情報を取得出来ます。
位置情報はこんな感じです。
position.coords.latitude:緯度
position.coords.longitude:経度
まずはHTMLです。
特になにもありませんが、位置情報取得開始用のリンクと地図表示ようのDIVを定義しておきます。
<div id="contents"> <a href="javascript:void(0);" id="gps_map">位置を取得する</a> <div id="sensarmap"><p>MAP</p></div> </div>
GPS情報取得と地図表示はこんな感じです。
$(function(){ $('#gps_map').click(function(){ //GPS情報取得を開始 navigator.geolocation.watchPosition( function(position){ var ymap = new Y.Map("sensarmap"); ymap.drawMap( new Y.LatLng(position.coords.latitude, position.coords.longitude), 15 , Y.LayerSetId.NORMAL ); var control = new Y.ZoomControl(); ymap.addControl(control); var marker = new Y.Marker(new Y.LatLng(this.lat,this.lng)); marker.bind('click', function(latlng){ alert("どりゃ"); }); ymap.addFeature(marker); } ); }); });
あまり使う機会はないかもしれまんがよかったら試してみてください。