最近Monaca(モナカ)という、素晴らしいプラットフォームを見つけ、
ちょっとづつですが自分のアプリを作成しております。
これほんと便利です。基本的にパソコンとモバイル端末さえあれば
誰でも開発に入る事ができます。
基本的にはiOSでもAndroidどちらも対応しているPhoneGapという
マルチプラットフォームを用いており、
html5とjavascriptでアプリ開発を行います。
なので、Monacaでアプリ開発を行えばiOSでもAndroidでも公開できちゃうといったわけです。
すごい便利。。
で、手始めにGPSで現在地を取得してGoogleMapを表示するといった
ロジックを組んでみました。
基本的には他の人が書いてあるものを参考に作ってみました。
jsファイル(js/map.js)はこんな感じです。
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)はこんな感じです。
html, body {
height: 100%;
margin: 0;
padding: 0;
}
最後にhtml(map.html)はこんな感じです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<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が表示されたと思います。
ここまで便利ですと、アプリ作成するモチベーションもだいぶ上がりますね♪
