Geo Location APIで、現在位置を取得する
スマホを持って、Googleマップで現在位置を取得できるのは、かなり一般的になりました。Androidだと、Javaでandroid.locationパッケージを利用してもできますが、今回は、PCでwebブラウザから取得できるように、JavaScript書いてみたいと思います。
以下がソースです。
・geolocation.html
・geolocation.js
・geolocation.css
※今回の実機確認は、Androidのwebviewで行っていますが、そのActivityのソースは、今回は掲載を見送ります。
次は、JQueryを使用した画像タッチスクロールについて
書いてみたいと思います。
その前に、自PCに、SVN構築しないとな。どんどんソースが書きかわってしまう…。
// geolocation.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>geolocation API</title>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=true" type="text/javascript" charset="utf-8"></script>
<script src="js/geolocation.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/geolocation.css" type="text/css" charset="utf-8"/>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>
// geolocation.js
var map;
var infowindow = new google.maps.InfoWindow();
// 初期化。bodyのonloadでinit()を指定することで呼び出してます
function init() {
// Google Mapで利用する初期設定用の変数
var latlng = new google.maps.LatLng(39, 138);
var opts = {
// 起動時のズーム設定。これぐらいが、一般的なアプリでよく見る。
zoom : 18,
mapTypeId : google.maps.MapTypeId.ROADMAP,
center : latlng
};
// getElementById("map")の"map"は、body内の<div id="map">より
map = new google.maps.Map(document.getElementById("map"), opts);
// W3C Geolocationを使う
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(handleGeolocation, handleNoGeolocation);
} else {
alert("W3C Geolocationがありません");
}
}
// getCurrentPositionで行われる処理を記述
function handleGeolocation(position) {
// 位置情報を取得
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
showInfoWindow(latlng);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
}
// ふきだしの位置と中身を設定
function showInfoWindow(latlng) {
// 地図の中心位置を設定
map.setCenter(latlng);
}
// geolocation.css
@CHARSET "UTF-8";
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
padding: 0px;
}
div#map {
position: fixed;
z-index: 0;
width: 100%;
height: 100%;
top:0px;
left:0px;
}
