<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var infoWin = new google.maps.InfoWindow(); //말풍선
window.onload = initLocation;
function initLocation(){
var myLoc = getLocation();
if(myLoc == null) return false;
myLocation(myLoc);
}
function getLocation(){
if(navigator.geolocation){ // geolocation 객체지원여부
return navigator.geolocation;
}
document.getElementById("map_show").innerHTML = "<b>위치정보 지원 안함</b>";
return null;
}
function myLocation(myLoc){
myLoc.getCurrentPosition(function(position){// getCurrentPosition() 최초 위치를 얻음
var lat = position.coords.latitude; //위도를 얻음
var lon = position.coords.longitude; //경도를 얻음
//구글맵사용
var initLoc = new google.maps.LatLng(lat, lon);
var map = new google.maps.Map(
document.getElementById("map_show"),
{
zoom: 16,
// mapTypeId:google.maps.MapTypeId.ROADMAP // 2d
mapTypeId:google.maps.MapTypeId.SATELLITE //위성사진
}
);
map.setCenter(initLoc); // 현재 위치를 지도 중앙에 표시
//말풍선
infoWin.setContent("현재 내 위치 : " + lat + "," + lon);
infoWin.setPosition(initLoc);
infoWin.open(map);
});
}
</script>
</head>
<body>
<h2> * 구글 지도 보기 * </h2>
<div id="map_show" style="width:100%; height:100%;"></div>
</body>
</html>
'HTML' 카테고리의 다른 글
| html5 - sqlDB 사용하기 (0) | 2014.02.14 |
|---|---|
| HTML5 - 파일읽기 (0) | 2014.02.14 |
| html5 - webworker (쓰레드 개념) 멀티태스킹 (0) | 2014.02.14 |
| html5 - storage (쿠키보다 큰 용량을 임의로 저장시킬 수 있는 기능) (0) | 2014.02.14 |
| html5 - mainfest ( 네트워크가 끊어졌을 경우를 대비한 작업) (0) | 2014.02.14 |