HTML : Google지도에서 HTML5 GeoLocation API를 사용하는 방법 : 예제, 구현

HTML : Google지도에서 HTML5 GeoLocation API를 사용하는 방법 : 예제, 구현

 

Geolocation API를 사용하여 현재 위도 및 경도를 얻는 방법을 배우고 이 결과에서 Google Maps API에 연결하여 브라우저에 위치를 표시 할 수 있습니다.

 

 

 

The Geolocation API

Geolocation API는 방문자의 위치 정보를 얻는 데 사용되는 인터페이스를 정의합니다. 이 인터페이스에서 현재 방문자의 위도와 경도를 반환 할 수 있습니다. 위치의 일반적인 출처는 GPS 또는 IP 주소입니다. 이 API는 방문자의 현재 위치를 표시하므로 개인 정보 보호 문제가 될 수 있으므로 이 API는 방문자의 권한으로만 작동합니다.

 

 

 

Geolocation API Browser Support

지리적 위치는 다음 브라우저에서 지원됩니다.

• Google Chrome
• Firefox 3.5 and higher
• Opera 10.6 and higher
• Internet Explorer 9 and higher
• Safari 5

 

 

 

브라우저가 HTML5 GeoLocation API를 지원하는지 확인

방문자 위치를 확보하기 전에 방문자 브라우저가 Geolocation API를 지원하는지 확인해야합니다. Geolocation API를 지원하지 않으면 위치를 가져올 때 오류가 발생합니다. 따라서 다음 Javascript를 사용하여 브라우저가 Geolocation API를 지원하는지 먼저 확인하십시오.

 

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success);
} else {
  error('Geo Location is not supported');
}

 

 

 

방문자에게 현재 위치 얻기

방문자의 현재 위치를 확인하려면 네비게이터 객체를 사용해야합니다. 여기에서 지리적 위치 API에 액세스하여 getCurrentPosition 메소드를 호출 할 수 있습니다. 이것은 세 가지 매개 변수를 허용합니다.

• Error callback function
• Position options
• Success callback function

API가 방문자의 위치를 성공적으로 반환 할 때만 발생하기 때문에 Success callback function를 사용하려고합니다.

 

 

navigator.geolocation.getCurrentPosition(success);

function success(position) {
     var lat = position.coords.latitude;
     var long = position.coords.longitude;
}

 

이것이 현재 방문자의 위도와 경도를 얻는 데 필요한 전부입니다. 이제 Google Map API에 좌표를 적용하여 위치를 표시 할 수 있습니다.

 

 

 

 

Google 지도에 위치 추가

이제 위도 및 경도를 Google Maps API에 적용 할 수 있습니다. 먼저 Google Maps 자바 스크립트 파일을 페이지에 포함해야합니다.

 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

 

 

 

이제 다음 자바 스크립트 코드를 애플리케이션에 추가하여 Google지도를 ID가 mapcontainer 인 div에 추가하십시오. 이지도는 방문자의 좌표에 위치하며이 정확한 위치에 마커를 배치합니다.

 

var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

  var options = {
    zoom: 15,
    center: coords,
    mapTypeControl: false,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mapcontainer"), options);

  var marker = new google.maps.Marker({
      position: coords,
      map: map,
      title:"You are here!"
  });

 

 

 

Full HTML Code

방문자의 현재 위치지도를 표시하는 데 사용할 전체 HTML 코드는 다음과 같습니다. 브라우저가 사용자의 위치를 찾게하려면 허용 버튼을 클릭하십시오.

 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>