2013. 12. 21. 11:34ㆍ구글강좌
웹페이지에 Google maps API을 사용하여 googlemap으로 표시하기
<!DOCTYPE html>
// 이 문서의 type이 html이라고 선언합니다.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
// 메타 태그는 페이지에 대한 정보를 제어하는 태그이며, viewport 태그는 페이지의 크기의 확대와 축소에 관여하는데 initial-scale=1.0은 원래 크기 그대로 표시하라는 의미이다. 그리고 user-scalable = no는 사용자가 임의로 확대/축소를 할 수 없게 한다는 뜻이다.
<style type="text/css">
html { height : 100% }
body { height : 100%; margin: 0; padding: 0 }
#map_canvas { height : 100% }
</style>
// CSS 태그는 페이지의 스타일에 관여하는데 html과 body가 차지하는 크기로 gooogle maps가 들어갈 컨테이너인 map_canvas가 페이지에서 차지하는 크기를 표시해준다.
<script type = "text/javascript"
src = "http://maps.googleapis.com/maps/api/js?sensor=true">
</script>
// 위의 주소는 Google maps API의 링크로 해당 링크에 있는 API의 모든 정의와 함수들을 불러와 사용할 수 있다. 링크의 sensor=true 부분은 현재 사용자의 위치를 sensor을 불러오겠다는 의미이다.
<script type = "text/javascript">
function initialize(){
var latlng = new google.maps.LatLng(37.5240220, 126.9265940);
var myOptions = {
zoom: 14,
center:latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
// Google maps API의 객체 안에 변수값들을 설정함으로서 Map을 초기화한다. initialize()라는 함수를 만들어 초기화하였으며 google.maps.LatLng는 좌표 변수 type이다. 이 type으로 latlng라는 변수를 생성한다.
myOptions라는 배열에 지도의 확대 정도(zoom), 지도의 중심 좌표(center), 지도의 형식에 관한 정보(mapTypeid)를 저장하여 맵의 설정 정보로 활용가능하게 한다.
mapTypeid는 ROADMAP(일반 2D 지도), SATELLITE(위성 사진), HYBRID(위성 사진과 도로명 등의 지명 표시), TERRAIN(등고선과 물의 흐름 표시)의 네 가지 종류가 있다. 이 설정 정보들을 초기화 한 후 아래와 같이 google.maps.Map type의 변수인 map을 위의 map_canvas 컨테이너와 위의 설정배열로 선언하면 된다.
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
// 초기화 함수를 실행하면서 body 안의 map_canvas 컨테이너의 크기를 지정해준다.
</body>
</html>
'구글강좌' 카테고리의 다른 글
| 안드로이드 사용자들을 위한 구글러앱 다운로드받기 (0) | 2013.12.22 |
|---|---|
| 구글맵에 오버레이을 넣어 영역표시하기 (0) | 2013.12.21 |
| [퍼온글] 구글맵과 퓨젼테이블 영문자료 (0) | 2013.12.21 |
| 네이버맵 api을 통해 지도만들기(키 값만들기중심으로) (0) | 2013.12.20 |
| 웹브라우저창에서 다음맵과 구글맵 확인하기(구글코리아을 중심으로) (0) | 2013.12.20 |