로그인
회원가입
Loading...
Loading...

Board

게시판

위치 기반 서비스 - 지오로케이션과 구글 맵 가이드

HTML5 Geolocation 기능을 이용한 위치 기반 서비스를 구현하고자 한다.


Geolocation



HTML5 navigator.geolocation는 사용자의 위도/경도 좌표를 제공하는 객체이다.

애초에 GPS 기능이 있는 모바일 디바이스를 상정하고 있기에, PC 환경에서는 정확한 정보를 보장하지 않는다.
무선 WIFI로 접속중인 노트북에서는 정확한 위치가 잡히지만, 유선 LAN으로 접속중인 PC에서는 국가/도시 수준의 정확도만 보여주는 경우등등.
사용하는 브라우저에 따라 다른 위치가 잡히기도 한다.

위치정보는 사용자의 프라이버시이기에 대부분의 브라우저에서는 정보를 허용할지에 대한 확인을 요구한다.
크롬의 경우 보안 접속(HTTPS)이 아닌경우 원천적으로 거부한다는 점은 알아두자.
참고 : https://developers.google.com/web/fundamentals/native-hardware/user-location/?hl=ko


navigator.getCurrentPosition



참고 : https://developer.mozilla.org/ko/docs/WebAPI/Using_geolocation

getCurrentPosition()의 사용은 다음과 같은 형식이다.

var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};

function success(pos) {
var crd = pos.coords;

console.log('Latitude : ' + crd.latitude);
console.log('Longitude: ' + crd.longitude);
};

function error(err) {
console.warn('ERROR(' + err.code + '): ' + err.message);
};

navigator.geolocation.getCurrentPosition(success, error, options);

첫번째 인자는 위치 정보를 성공적으로 얻었을 경우 처리할 함수
두번째 인자는 위치 정보를 실패했을경우 처리 함수
세번째 인자는 정확도와 타임아웃등의 옵션 객체를 받는다.

별도로 함수를 선언하지 않고 인라인으로 축약하면 다음처럼 쓰인다.

navigator.geolocation.getCurrentPosition(function(position) {
do_something(position.coords.latitude, position.coords.longitude);
});

모바일 디바이스에서 테스트를 해보면 지오로케이션 조회는 상황에 따라 5~10초 이상 걸리는 경우도 있다.
무한정 기다릴게 아니라면 타임아웃 설정을 통해 컨트롤 해야 한다.


Google Maps JavaScript API



참조 : https://developers.google.com/maps/documentation/javascript/geolocation?hl=ko

현재 지오로케이션 좌표를 알아냈다면 지도상에 표시를 해보자.

<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 6
});
var infoWindow = new google.maps.InfoWindow({map: map});

// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};

infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>




테스트를 위해서는 우선 API KEY가 있어야만 한다.
신청 : https://developers.google.com/maps/documentation/javascript/get-api-key?hl=ko

맵의 중앙지점과 확대수준은 맵 객체를 초기화 할때 설정이 가능하다.
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 6
});


마커 클러스터링



지도상에 자신의 위치를 표시했다면 다음 과제는 그 주변에 마커들을 표시하는 것이다.
내 주변 호텔, 커피숍, 병원 등등...

구글 맵상에 다량의 마커를 표시하는 방법으로는 마커 클러스터링을 추천한다.

참조 : https://github.com/googlemaps/js-marker-clusterer

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Marker Clustering</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>

function initMap() {

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 35.024, lng: 129.887}
});

var infoWindow = new google.maps.InfoWindow({map: map});

// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};

infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
map.setCenter(pos);
}, function() {
//alert("Location not found.");
});
} else {
//alert("Browser doesn't support Geolocation");
}

// Create an array of alphabetical characters used to label the markers.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});

// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = [
{lat: 35.137879, lng: 129.067383},
{lat: 35.541166, lng: 129.265137},
{lat: 35.505400, lng: 128.814697},
{lat: 36.191092, lng: 128.633423},
{lat: 36.035774, lng: 128.441162},
{lat: 35.277016, lng: 129.133301},
{lat: 35.188400, lng: 129.134674},
{lat: 35.449484, lng: 128.817444}
]
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyArHE1hXsBVVHAr1W1eUjLOp34W6hcybIU&callback=initMap">
</script>
</body>
</html>



내 위치 부근의 마커들을 표현하는 가장 심플한 위치 기반 서비스가 구현되었다.


기타



마커를 클릭할 경우 작동을 정의하려면 이벤트 리스너를 등록하면 된다.

참조 : https://developers.google.com/maps/documentation/javascript/events?hl=ko

내 위치와 특정 마커간의 거리및 길찾기는 기하학 라이브러리와 거리 행렬 서비스를 이용해보자.

참조 : https://developers.google.com/maps/documentation/javascript/geometry?hl=ko
참조 : https://developers.google.com/maps/documentation/javascript/distancematrix?hl=ko


-- 위치 기반 서비스 가이드 --

위치 기반 서비스 - 지오로케이션과 구글 맵 가이드
위치 기반 서비스 - 안드로이드 WebView 가이드

COMMENTS