구글은 자바스크립트와 html을 이용해 사용할 수 있다. html문서를 새로 하나 만들어 보자.
구글맵을 사용하기 위해서는 아래 코드를 반드시 넣어 줘야 한다.
[CODE type=javascript]
<script src="http://maps.google.com/maps?file=api&v=2&key=구글맵에서받은자신의키를넣는다" type="text/javascript">
</script>
[/HTML][/CODE]
이렇게 해줘야만, 구글맵에서 제공하는 객체들을 사용할 수가 있다.(너무 당연한가^^ㅋ)
그리고, html body안에 맵을 뿌려줄 영역을 만들어 줘야 한다.
[CODE type=javascript]
<div id="gmap" style="width:400px; height:200px;"></div>
[/HTML][/CODE]
gmap라는 div안에 현재는 아무런 내용이 없지만, 자바스크립트로 구글맵 API를 사용하면 동적으로 div안의 영역에 맵이 생성된다.
이제 실제 구글맵 API를 사용하는 자바스크립트 함수를 하나 만들자
[CODE type=javascript]
<SCRIPT LANGUAGE="JavaScript">
<!--
function displayGMap()
{
var divGMap = document.getElementById('gmap');
var map = new GMap2(divGMap);
map.setCenter( new GLatLng(37.570229,126.978178), 13);
map.setMapType(G_SATELLITE_MAP);
}
//-->
</SCRIPT>
[/HTML][/CODE]
코드가 간단해 설명이 필요 할지 모르겠다.
document의 getElementById 메소드를 이용해 아까 만든 div영역 객체를 얻고,
GMap2라는 객체를 만들면서 생성자 파라미터로 넘긴다.
구글맵의 기본은 이 GMap2라는 객체로서 이 위에 콘트롤을 올린 다든지, 모드를 바꾼다 든지 하는 작업을 하면서 구글맵에서 제공하는 서비스 처럼 만들어 가는 것이다.
GMap2의 setCenter메소트의 파라미터로 GLatLng객체와 확대 비율을 넘긴다.
GLatLng객체는 생성자에서 위경도를 받아 바로 생성 했다.
예제에서 사용한 위경도는 광화문으로 이렇게 위경도를 알기 위해서는
http://maps.google.com/
에 들어가서 직접 찾아 가야 한다. 원하는 위치를 찾았으면,
오른쪽 상단의 Link to this page를 클릭하면 주소창에 위경도가 표시된다.
좀 무식한 방법이지만, 알맵의 위 경도와는 틀려서 이런 방법으로 위 경도를 찾았다.
GMap2의 setMapType메소드로 구글맵을 표시해 주는 모드를 바꾸는 것이다.
구글맵은 Map, Satellite, Hybrid 이렇게 세가지 모드를 지원한다.
Map는 간단한 그래픽으로 지도가 나타나는데, 불행이도 미국 지역만을 지원한다.
예제에서는 한국 맵을 보기 위해 위성사진 모드인 Satellite모드로 바꾸었다.
이제 이 함수를 부르는 부분을 넣자.
[CODE type=javascript]
<BODY onload="displayGMap();">
[/HTML][/CODE]
간단히 이렇게 body테그의 onload함수로 불렀다.
전체 소스를 보자
[CODE type=javascript]
<HTML>
<HEAD>
<scriptsrc="http://maps.google.com/maps?file=api&v=2&key=구글맵에서받은자신의키를넣는다" type="text/javascript">
</script>
<SCRIPT LANGUAGE="JavaScript">
<!--
function displayGMap()
{
var divGMap = document.getElementById('gmap');
var map = new GMap2(divGMap);
map.setCenter( new GLatLng(37.570229,126.978178), 13);
map.setMapType(G_SATELLITE_MAP);
}
//-->
</SCRIPT>
</HEAD>
<BODY onload="displayGMap();">
<div id="gmap" style="width:400px; height:300px;"></div>
</BODY>
</HTML>
[/HTML][/CODE]
코드가 정말 간단하다.
이렇게 간단한 코드만으로 구글맵의 기능을 사용할 수 있는 것이다.
구글맵을 사용하기 위해서는 아래 코드를 반드시 넣어 줘야 한다.
[CODE type=javascript]
<script src="http://maps.google.com/maps?file=api&v=2&key=구글맵에서받은자신의키를넣는다" type="text/javascript">
</script>
[/HTML][/CODE]
이렇게 해줘야만, 구글맵에서 제공하는 객체들을 사용할 수가 있다.(너무 당연한가^^ㅋ)
그리고, html body안에 맵을 뿌려줄 영역을 만들어 줘야 한다.
[CODE type=javascript]
<div id="gmap" style="width:400px; height:200px;"></div>
[/HTML][/CODE]
gmap라는 div안에 현재는 아무런 내용이 없지만, 자바스크립트로 구글맵 API를 사용하면 동적으로 div안의 영역에 맵이 생성된다.
이제 실제 구글맵 API를 사용하는 자바스크립트 함수를 하나 만들자
[CODE type=javascript]
<SCRIPT LANGUAGE="JavaScript">
<!--
function displayGMap()
{
var divGMap = document.getElementById('gmap');
var map = new GMap2(divGMap);
map.setCenter( new GLatLng(37.570229,126.978178), 13);
map.setMapType(G_SATELLITE_MAP);
}
//-->
</SCRIPT>
[/HTML][/CODE]
코드가 간단해 설명이 필요 할지 모르겠다.
document의 getElementById 메소드를 이용해 아까 만든 div영역 객체를 얻고,
GMap2라는 객체를 만들면서 생성자 파라미터로 넘긴다.
구글맵의 기본은 이 GMap2라는 객체로서 이 위에 콘트롤을 올린 다든지, 모드를 바꾼다 든지 하는 작업을 하면서 구글맵에서 제공하는 서비스 처럼 만들어 가는 것이다.
GMap2의 setCenter메소트의 파라미터로 GLatLng객체와 확대 비율을 넘긴다.
GLatLng객체는 생성자에서 위경도를 받아 바로 생성 했다.
예제에서 사용한 위경도는 광화문으로 이렇게 위경도를 알기 위해서는
http://maps.google.com/
에 들어가서 직접 찾아 가야 한다. 원하는 위치를 찾았으면,
오른쪽 상단의 Link to this page를 클릭하면 주소창에 위경도가 표시된다.
좀 무식한 방법이지만, 알맵의 위 경도와는 틀려서 이런 방법으로 위 경도를 찾았다.
GMap2의 setMapType메소드로 구글맵을 표시해 주는 모드를 바꾸는 것이다.
구글맵은 Map, Satellite, Hybrid 이렇게 세가지 모드를 지원한다.
Map는 간단한 그래픽으로 지도가 나타나는데, 불행이도 미국 지역만을 지원한다.
예제에서는 한국 맵을 보기 위해 위성사진 모드인 Satellite모드로 바꾸었다.
이제 이 함수를 부르는 부분을 넣자.
[CODE type=javascript]
<BODY onload="displayGMap();">
[/HTML][/CODE]
간단히 이렇게 body테그의 onload함수로 불렀다.
전체 소스를 보자
[CODE type=javascript]
<HTML>
<HEAD>
<scriptsrc="http://maps.google.com/maps?file=api&v=2&key=구글맵에서받은자신의키를넣는다" type="text/javascript">
</script>
<SCRIPT LANGUAGE="JavaScript">
<!--
function displayGMap()
{
var divGMap = document.getElementById('gmap');
var map = new GMap2(divGMap);
map.setCenter( new GLatLng(37.570229,126.978178), 13);
map.setMapType(G_SATELLITE_MAP);
}
//-->
</SCRIPT>
</HEAD>
<BODY onload="displayGMap();">
<div id="gmap" style="width:400px; height:300px;"></div>
</BODY>
</HTML>
[/HTML][/CODE]
코드가 정말 간단하다.
이렇게 간단한 코드만으로 구글맵의 기능을 사용할 수 있는 것이다.
반응형
'Dev > Google Map' 카테고리의 다른 글
| 6. 구글맵 API를 이용한 간단한 예제 (0) | 2006.05.23 |
|---|---|
| 5. 맵에 마크 하기 & 이벤트 처리 (0) | 2006.05.22 |
| 4. 콘트롤을 올려보자. (0) | 2006.05.22 |
| 2. 인증키를 받자. (0) | 2006.05.22 |
| 1. 구글 맵 API란? (1) | 2006.05.22 |