[Google Maps API v3 강좌 #1] 지도불러오기

기초중의 기초, Hello World! 지도를 불러오는 방법에 대해 알아보겠습니다.
구글 맵 API를 불러와서 화면에 표시하는 가장 기초적인 자바스크립트 코드입니다.

hello_world

위의 그림과 같이 웹페이지에 구글 지도가 표시되게 됩니다.

<!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가 차지하는 크기, 그리고 Google maps가 들어갈 컨테이너인 map_canvas가 페이지에서 차지하는 크기를 기술하고 있다.

<script type = “text/javascript” src = “http://maps.googleapis.com/maps/api/js?sensor=true“></script>

// 위의 주소는 Google maps API의 링크이다. 이렇게 하면 저 링크에 있는 API의 모든 정의와 함수들을 불러와 사용할 수 있게 된다. 링크의 sensor=true 부분은 현재 사용자의 위치를 센싱하겠다 말겠다를 선언하는 부분이다. 위의 예시에서는 true라고 표시하여 현재 사용자의 위치를 불러들인다고 선언하였다.

<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>

——————————————————————————————-