HTML5+GoogleMap APIを使って現在地の取得を試してみたよ

2013 年 8 月 18 日 日曜日 by Koh(5,959 views)

GoogleMaps  

Google Mapの撮影車にであってみたい!

 

今回は、Googleが提供しているAPI(Google Maps JavaScript API v3)を使用したGoogle Mapの表示と、HTML5のGeolocation API を使用した現在地の取得を試してみました。

 

下記サンプルは、端末の位置情報を取得しますので、お試しになる場合は、GPS付きのスマートフォン、もしくはタブレット端末を使用してください。ちなみに、取得した位置情報を再利用することはありませんので、ご心配なく。

 

現在地取得ボタンを押下すると、現在地の地図表示が行われます。お試しください。

 
 

では、最後にソースを以下に添付しておきます。今回もスタイルシート部分は省いています。

 
<style>
#googleMap {
width: 100%;
height: 100%;
}
</style>

<!--
Google Maps API ライブラリーの読み込み
※APIキーは各自で取得してください。
-->
<script src="http://maps.googleapis.com/maps/api/js?key=APIキー&sensor=true"></script>

<script>
// 取得した位置情報をGoogleMapで表示
function positionMap(latitude, longitude) {
var latlng = new google.maps.LatLng(latitude, longitude);
var opt1 = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), opt1);
var opt2 = {
position: latlng
};
var marker = new google.maps.Marker(opt2);
marker.setMap(map);
}

// 位置情報の取得処理
function getPosition() {
navigator.geolocation.getCurrentPosition(getSuc,getErr);
}

// 位置情報が取得できた場合の処理
function getSuc(pos){
var latitude = pos.coords.latitude;
var longitude = pos.coords.longitude;
positionMap(latitude, longitude);
}

// 位置情報が取得できなかった場合の処理
function getErr(err){
alert("お使いの端末では現在地を取得できません。");
}

</script>
<input type="button" value="現在地取得" onclick="getPosition()">
<div id="googleMap"></div>
   





コメントは受け付けていません。


Mobile Site Link