코드:
결과보기 »
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>HTML5 API Geolocation</title> </head> <body> <h1>구글 맵을 통한 사용자의 위치 표시</h1> <button onclick="findLocation()">사용자의 위치 표시</button> <p id="myLocation"></p> <div id="mapLocation"></div> <script> var loc = document.getElementById("myLocation"); function findLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showYourLocation, showErrorMsg); } else { loc.innerHTML = "이 문장은 사용자의 웹 브라우저가 Geolocation API를 지원하지 않을 때 나타납니다!"; } } function showYourLocation(position) { var userLat = position.coords.latitude; var userLng = position.coords.longitude; var imgUrl = "http://maps.googleapis.com/maps/api/staticmap?center=" + userLat + "," + userLng + "&zoom=15&size=500x400&sensor=false"; document.getElementById("mapLocation").innerHTML = "<img src='"+imgUrl+"'>"; } function showErrorMsg(error) { switch(error.code) { case error.PERMISSION_DENIED: loc.innerHTML = "이 문장은 사용자가 Geolocation API의 사용 요청을 거부했을 때 나타납니다!" break; case error.POSITION_UNAVAILABLE: loc.innerHTML = "이 문장은 가져온 위치 정보를 사용할 수 없을 때 나타납니다!" break; case error.TIMEOUT: loc.innerHTML = "이 문장은 위치 정보를 가져오기 위한 요청이 허용 시간을 초과했을 때 나타납니다!" break; case error.UNKNOWN_ERROR: loc.innerHTML = "이 문장은 알 수 없는 오류가 발생했을 때 나타납니다!" break; } } </script> </body> </html>