geolocation + google Map Demo

html5의 geolocation의 기능을 이용하여 googleMap에 현재 자신의 위치를 확인하는 기능을 구현해봤다. 

아이폰의 기본어플인 지도에서 현재위치 확인하는 기능처럼 될 꺼라 예상했었지만

좌표 값을 받아오는 속도나 정확도가 많이 떨어진다..

option조절을 하면 더 정확해 질것 같다.

아래 샘플을 이용하여 직접 확인해 보길 바란다.

 

현재위치 :

스크립트 소스 는 아래와 같다.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> var trackerId = 0; var geocoder; var theUser = {}; var map = {}; //지도 초기화 function initialize() { alert("위치 추적 시작!"); geocoder = new google.maps.Geocoder(); if (navigator.geolocation) { var gps = navigator.geolocation; gps.getCurrentPosition(function (pos) { var latLng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude); var opts = { zoom: 17, center: latLng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), opts); theUser = new google.maps.Marker({ position: latLng, map: map, title: "You!" }); showLocation(pos); }); trackerId = gps.watchPosition(function (pos) { var latLng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude); map.setCenter(latLng); theUser.setPosition(latLng); showLocation(pos); }); } } //위치 확인 function showLocation(pos) { var latLng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude); if (geocoder) { geocoder.geocode({ 'latLng': latLng }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[1]) { document.getElementById("location").innerHTML = results[1].formatted_address; } } }); } } //트랙킹 중지 function stopTracking() { if (trackerId) { navigator.geolocation.clearWatch(trackerId); } alert("위치 추적 종료!"); } </script>