Monacaによるハイブリッドアプリ(HTML5+Javascript&cordova)で、
・自分の位置を取り出す
・その位置をGoogleMapで表示する
・住所を入力し、GoogleのジオコーディングのAPIを使って緯度経度を出して、
・その位置をGoogleMapで表示する
っていうの、結構大変だったので、まとめてソースを書いておく
スマホでなくても役立つかも・・・(自分の位置以外は同じだから)
はじめの、navigator.geolocation.getCurrentPositionで位置を取得している
位置が取れると、onPosSuccessにいき、ここのdispmapで、GoogleMapに表示している
住所を入力されてmapBtnがクリックされると、onMapBtnへいき、ここでAJAXを使って
GoogleのジオコーディングAPIを呼び出し、JSONで緯度経度を受け取り、成功時、
dispmapで、GoogleMapに表示している
「GOOGLEのAPIキー」のところには、取得したGoogleのAPIキーが入るけど、
そこにはまりどころがある・・・が、今回は省略。別の機会に書きます。
【参考サイト】
・ http://docs.monaca.mobi/2.9/ja/sampleapp/tips/gps/
・ http://www.ajaxtower.jp/googlemaps/charset/index6.html
・ http://mashupawards.tumblr.com/post/96679326096/matechblogmonaca%E6%89%8B%E8%BB%BD%E3%81%ABmashup%E3%82%92%E3%81%AF%E3%81%98%E3%82%81%E3%82%88%E3%81%86monaca%E3%81%A8google
・自分の位置を取り出す
・その位置をGoogleMapで表示する
・住所を入力し、GoogleのジオコーディングのAPIを使って緯度経度を出して、
・その位置をGoogleMapで表示する
っていうの、結構大変だったので、まとめてソースを書いておく
スマホでなくても役立つかも・・・(自分の位置以外は同じだから)
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="components/loader.css"> <script src="components/loader.js"></script> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=GOOGLEのAPIキー&sensor=false"></script> <script> $(function(){ $("#mapBtn").on("click",onMapBtn); // 現在位置をとりだす var option = { frequency: 5000, timeout: 6000 }; navigator.geolocation.getCurrentPosition(onPosSuccess, onPosError, option); }); function onPosSuccess(position) { dispmap(position.coords.latitude,position.coords.longitude); } function dispmap(lat,lng){ $("#mypos").html("緯度:" + lat + "<BR/>" +"経度:" + lng); //地図に設定 var latlng = new google.maps.LatLng(lat,lng); var opts = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), opts); } function onPosError(msg) { alert(msg); } function onMapBtn() { var baseurl = "http://maps.google.com/maps/api/geocode/json"; var mydata = {}; mydata['address']=$("#chkpos").val(); mydata['sensor']='false'; $.ajax({ type: "GET", url: baseurl, dataType:"json", data:mydata, success: function(msg){ dispmap(msg.results[0].geometry.location.lat,msg.results[0].geometry.location.lng); }, error: function(XMLHttpRequest, textStatus, errorThrown){ msg=""; msg=msg+" status:"+XMLHttpRequest.status; msg=msg+" statusText:"+XMLHttpRequest.statusText; msg=msg+" textStatus:"+textStatus; msg=msg+" errorThrown:"+errorThrown; alert(msg); } }); } </script> </head> <body> <div>場所<INPUT TYPE=TEXT id=chkpos name=chkpos/><button id="mapBtn">検索</button></div> <div id="mypos"> </div> <div id="map_canvas" align="center" style="width:330px;height:330px;background-color:#99cc00;">地図</div> <button id="retBtn" onclick="window.open('index.html','_self');">戻る</button> </body> </html> |
はじめの、navigator.geolocation.getCurrentPositionで位置を取得している
位置が取れると、onPosSuccessにいき、ここのdispmapで、GoogleMapに表示している
住所を入力されてmapBtnがクリックされると、onMapBtnへいき、ここでAJAXを使って
GoogleのジオコーディングAPIを呼び出し、JSONで緯度経度を受け取り、成功時、
dispmapで、GoogleMapに表示している
「GOOGLEのAPIキー」のところには、取得したGoogleのAPIキーが入るけど、
そこにはまりどころがある・・・が、今回は省略。別の機会に書きます。
【参考サイト】
・ http://docs.monaca.mobi/2.9/ja/sampleapp/tips/gps/
・ http://www.ajaxtower.jp/googlemaps/charset/index6.html
・ http://mashupawards.tumblr.com/post/96679326096/matechblogmonaca%E6%89%8B%E8%BB%BD%E3%81%ABmashup%E3%82%92%E3%81%AF%E3%81%98%E3%82%81%E3%82%88%E3%81%86monaca%E3%81%A8google