SNOWFLAKES DRAWING PAPER
[HTML5] Geolocation 본문
<!doctype html>
<html>
<head>
<title>Geolocation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" >
<!-- Google Map -->
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function onInit() {
if (navigator.geolocation)
{
var geo = navigator.geolocation;
geo.getCurrentPosition(successCallbackFunc,errorCallbackFunc);
}
else {
alert("이 브라우저는 위치정보를 제공하지 않습니다.");
}
}
function successCallbackFunc(pos) {
var lat = pos.coords.latitude;
var lng = pos.coords.longitude;
///alert( lat + "\r\n" + lng);
var canvas = document.querySelector("#canvas");
var opt = {};
opt.zoom = 17,
opt.center = new google.maps.LatLng(lat,lng);
opt.mapTypeId = google.maps.MapTypeId.ROADMAP;
opt.mapTypeControl = true;
opt.navigationControlOptions = {style:google.maps.NavigationControlStyle.SMALL}
var map = new google.maps.Map( canvas, opt );
var marker = new google.maps.Marker(
{
position:new google.maps.LatLng(lat,lng),
map:map
});
}
function errorCallbackFunc(err) {
alert(err.message);
}
</script>
</head>
<body onload="onInit()">
<div id="canvas" style="position:absolute;left;0px,top:0px;width:100%;height:100%"></div>
</body>
</html>
'개발 > HTML5/CSS3' 카테고리의 다른 글
| [HTML5] 모바일 사이트에서 onorientationchange 구현 (0) | 2015.01.25 |
|---|---|
| [CSS3] 기본 버튼 스타일 (0) | 2015.01.22 |
| [HTML5] 로컬 저장소 (localStorage) 사용 (0) | 2015.01.22 |
| [HTML5] Video Player Control (0) | 2015.01.03 |
| [HTML5] 캔버스 지원 여부 확인 (0) | 2011.11.01 |
