最近Monaca(モナカ)という、素晴らしいプラットフォームを見つけ、
ちょっとづつですが自分のアプリを作成しております。
これほんと便利です。基本的にパソコンとモバイル端末さえあれば
誰でも開発に入る事ができます。
基本的にはiOSでもAndroidどちらも対応しているPhoneGapという
マルチプラットフォームを用いており、
html5とjavascriptでアプリ開発を行います。
なので、Monacaでアプリ開発を行えばiOSでもAndroidでも公開できちゃうといったわけです。
すごい便利。。
で、手始めにGPSで現在地を取得してGoogleMapを表示するといった
ロジックを組んでみました。
基本的には他の人が書いてあるものを参考に作ってみました。
jsファイル(js/map.js)はこんな感じです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | window.addEventListener("load", function(){ var mapDiv = document.getElementById("map"); var latitude = null; var longitude = null; // 位置情報取得オブジェクトチェック if (!navigator.geolocation){ mapDiv.innerHTML = "Geolocation 使用不可"; return; } // 位置情報取得オブジェクトオプション var option = { timeout:10000, // タイムアウト enableHighAccuracy:true // GPS利用 } // 位置情報を取得 navigator.geolocation.getCurrentPosition(resultHandler, errorHandler, option); // 位置情報取得成功時 function resultHandler(position){ latitude = position.coords.latitude; longitude = position.coords.longitude; // GoogleMapにデータを渡す var mapCenter = new google.maps.LatLng(latitude, longitude); var options = { zoom:16, // 表示倍率 center:mapCenter, // 中央位置 mapTypeId:google.maps.MapTypeId.ROADMAP, scaleControl:true // 倍率変更 }; // 地図を表示 var map = new google.maps.Map(mapDiv, options); // 現在地を表示 var marker = new google.maps.Marker({ position:mapCenter, map:map, title:"現在地"} ); map.setCenter(mapCenter); } // 位置情報取得失敗時 function errorHandler(error){ mapDiv.innerHTML = error.message; }}, true); |
css(css/map.css)はこんな感じです。
1 2 3 4 5 | html, body { height: 100%; margin: 0; padding: 0;} |
最後にhtml(map.html)はこんな感じです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html><html><head> <meta charset="utf-8"> <script src="plugins/plugin-loader.js"></script> <script src="js/map.js"></script> <link rel="stylesheet" href="plugins/plugin-loader.css"> <link rel="stylesheet" href="css/map.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <title>現在値をGoogleMapにて表示</title></head><body> <div id="map" style="height:100%"></div></body></html> |
どうでしょうか。
※”plugin-loader.js”と”plugin-loader.css”に関してはMonacaがPhoneGapのAPIを使うために必要なファイルです。(デフォルトで設定されていると思います。)
画面いっぱいに現在地マークがついたGoogleMapが表示されたと思います。
ここまで便利ですと、アプリ作成するモチベーションもだいぶ上がりますね♪
