구글맵 API 이용하기. 2. basic 예제

이제 API KEY 까지 받았으니, 한번 웹페이지에 구글맵을 띄워 바야 하지 않겠는가?

('후니'는 메가패스를 이용하는 관계로 메가패스에서 제공하는 20Mb의 기본 공간에 테스트를 진행하였으니,

알아서들 하시길 호홓)

일단 엄청 간단한 소스를 만들어서 내 홈계정에 올려서 테스트를 해보자.

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAEMxD5KuM40jmb4GJnPTkJRS7xOUxO1Ufu-uozDqsHa5hmERu-xQqyZ1M1nyRpJvaLV__GNN29EB0hQ"
type="text/javascript"></script>
<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}

</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>

링크에 가서 함 봐라. 정말 간단하게 웹페이지에 들어가지 않는가...

참고로 거긴 Califonia 의 Palo Alto라는 곳이라고 설명되어있다. 그게 어딘지원,...

그럼 소스를 한번 뜯어 먹어보자

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>

여기 까지 모르는 분들은 그냥.... 알아서들 하라. 나도 모르겠다. --;

여기도 어려운건 없다고 본다. 스크립트 소스지정하는 부분이지만, 일단 주의할 점은 파란색 부분의 키값을 이미 받아놓은 것으로 대체하기함 하면된다.

...생략하자.

function load() {

드디어 함수 하나가 나왔다. 로드라는 함수네...

함수명은 맘대로 해도 되지만, 직관적일수록 나중을 위해선 좋겠지...

이넘은 나중의 GUnload 와 쓰여서 이넘이 저질러놓은 메모리공간을 GUload 가 release 해준다.

if (GBrowserIsCompatible()) {

if문을 모르는 사람은 없을 거고...

GBrowserIsCompatible()이라는 게 눈에 띈다.

이넘이 뭐냐하면, 간단하게 현재의 브라우져에 MAP API가 사용되었는지 아닌지를 결정하는 함수이다.

boolen 을 리턴하기 때문에, if문안에서 조건을 형성하게 된다.

즉, 현재 브라우져에서 MAP API 라이브러리를 서포트한다면, true 를 리턴시킨다.

일단, MAP API를 지원하므로 if문이 동작하고,
var map = new GMap2(document.getElementById("map"));

map 이란 변수를 GMap2 라는 클래스 타입으로 만든다. GMap2는 가장 중요한 함수중하나다.

GMap2는 맵을 만드는 클래스당. 형식은 GMap2(container,opts?)를 따르며, opts 가 없을 경우에는 defalts set으로 G_DEFAULT_MAP_TYPES가 지정이 된다.

타입은 3가지로 나타나는데, 사용할수 있는건, G_NORMAL_MAP(일반모드),

G_SATELLITE_MAP(위성모드),G_HYBRID_MAP(하이브리드,짬뽕~~모드닷)

이렇게 3가지가 있다. 디폴트는 3가지중 미리정한것으로 한다.

document.getElementById(id) 이넘은 자바스크립트함수중 하나로, id에 해당하는 html에서 id에 해당하는 객체의 컨트롤을 할수 있당. 뒤에 이부분이 나온당.

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

좀전에 map 이란 변수를 만들었으니, 이넘을 컨트롤 하는 부분인데...

setCenter(center,zoom?,type?)은 GMap2()클래스에서 Map State 를 수정할수 있는 부분인데, 중심의 좌표를 세팅하는 방법이다. zoom과 type 은 생략 가능하다.

GLatLng(lay,lng,unbound?)는 좌표를 가리키를 클래스이당. 위도,경도,순이며, unbound 가 true 이면, 수는 pass 되지만, false 일경우 위도는 -90 ~ 90도, 경도는 -180 ~ 180 를 가지게 된다.

}
}

</script>

함수는 끝났다.
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>

여기서도 볼건 없고, body tag 에서 onload 시 load()함수를 실행하고, onunload 시 GUnload()함수를 실행하게 된다. div tag을 두어서, 스타일을 지정했다.

너무나도 간단하게, 구글맵을 웹에 등록시킬수 있지않은가???

구글.... 놀랍다 ㅋㅋ

미로속에 갇힌 뇌