웹페이지에 구글맵을 붙이는 것은 정말 쉽습니다.
물론 내맘대로 주무르는 수준이 되려면 많은 공부가 필요하겠지만, 간단하게 맵을 보여주는 정도는 쉽습니다. 그렇다고 하더라도 HTML과 JavaScript에 대한 기초 지식은 있어야 합니다.
우선 맵 키를 받아야 합니다.
구글맵 API는 기본적으로 해당 도메인당 하나의 키를 할당해 주고 그 키가 아니면 동작 자체가 안되게 되어 있습니다.
아래 사이트에 가서 맵 키를 받도록 합니다.
http://code.google.com/intl/ko/apis/maps/signup.html
I have read and agree with the terms and conditions 항목에 체크하고, My web site URL에 사용할 사이트의 URL을 입력한 후 Generate API Key 버튼을 누르면 끝입니다. (구글에 회원 가입이 되어 있어야 합니다.)
만일 웹서버에 올리지 않고 내 컴퓨터에서만 테스트하고 싶으면 URL에 localhost를 입력하면 됩니다.
버튼을 누르면 아래와 같은 화면이 보일 것입니다.
박스 안에 있는 ABQ 로 시작하는 암호같은 줄이 맵 API 키입니다. 따로 저장해 놓도록 하세요.
이제 키를 받았으니 맵을 불러와 보겠습니다.
일단 아래와 같이 코딩합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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=ABQIAAAA1W34ZDbeoGMOOaR0LhP6FhT2Gj4HfT1ddA4Wi_5OB3Q3pb5OOxRvZDHjd7UO8Ynv9HE1c33ElEbYXA"
type="text/javascript"></script>
<script type="text/javascript">
function GM_load() {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 8);
}
</script>
</head>
<body onload="GM_load()" onunload="GUnload()">
<div id="map" style="width:600px;height:400px"></div>
</body>
</html>
코드 중 빨간 색으로 된 부분을 아까 받아놓은 API 키로 바꿔주면 됩니다.
실행시켜 보겠습니다. 예제 보기
정말 간단하지만 설명을 덧붙이자면...
<body onload="GM_load()" onunload="GUnload()">
=>웹페이지가 load될 때 GM_load() 함수를 곧바로 실행시키고, 페이지가 unload되면 GUnload() 함수를 실행시키란 뜻입니다.
특히 GUnload를 넣지 않으면 메모리 때문에 문제가 생길 수 있으니 반드시 추가하도록 합니다.
GM_load 함수는 아주 간단한 함수입니다.
var map = new GMap2(document.getElementById("map"));
map이라는 이름으로 GMap2의 객체를 생성하고,
물론 내맘대로 주무르는 수준이 되려면 많은 공부가 필요하겠지만, 간단하게 맵을 보여주는 정도는 쉽습니다. 그렇다고 하더라도 HTML과 JavaScript에 대한 기초 지식은 있어야 합니다.
우선 맵 키를 받아야 합니다.
구글맵 API는 기본적으로 해당 도메인당 하나의 키를 할당해 주고 그 키가 아니면 동작 자체가 안되게 되어 있습니다.
아래 사이트에 가서 맵 키를 받도록 합니다.
http://code.google.com/intl/ko/apis/maps/signup.html
I have read and agree with the terms and conditions 항목에 체크하고, My web site URL에 사용할 사이트의 URL을 입력한 후 Generate API Key 버튼을 누르면 끝입니다. (구글에 회원 가입이 되어 있어야 합니다.)
만일 웹서버에 올리지 않고 내 컴퓨터에서만 테스트하고 싶으면 URL에 localhost를 입력하면 됩니다.
버튼을 누르면 아래와 같은 화면이 보일 것입니다.
박스 안에 있는 ABQ 로 시작하는 암호같은 줄이 맵 API 키입니다. 따로 저장해 놓도록 하세요.
이제 키를 받았으니 맵을 불러와 보겠습니다.
일단 아래와 같이 코딩합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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=ABQIAAAA1W34ZDbeoGMOOaR0LhP6FhT2Gj4HfT1ddA4Wi_5OB3Q3pb5OOxRvZDHjd7UO8Ynv9HE1c33ElEbYXA"
type="text/javascript"></script>
<script type="text/javascript">
function GM_load() {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 8);
}
</script>
</head>
<body onload="GM_load()" onunload="GUnload()">
<div id="map" style="width:600px;height:400px"></div>
</body>
</html>
코드 중 빨간 색으로 된 부분을 아까 받아놓은 API 키로 바꿔주면 됩니다.
실행시켜 보겠습니다. 예제 보기
정말 간단하지만 설명을 덧붙이자면...
<body onload="GM_load()" onunload="GUnload()">
=>웹페이지가 load될 때 GM_load() 함수를 곧바로 실행시키고, 페이지가 unload되면 GUnload() 함수를 실행시키란 뜻입니다.
특히 GUnload를 넣지 않으면 메모리 때문에 문제가 생길 수 있으니 반드시 추가하도록 합니다.
GM_load 함수는 아주 간단한 함수입니다.
var map = new GMap2(document.getElementById("map"));
map이라는 이름으로 GMap2의 객체를 생성하고,
map.setCenter(new GLatLng(36.615527, 127.353515), 12);
지도의 중심 좌표를 36.615527, 127.353515로 설정하고 지도 확대 배율은 12로 설정했습니다.
확대 배율은 1~15까지며 숫자가 클수록 확대됩니다.
이 간단한 몇줄만으로 웹페이지에 구글맵을 붙일수 있다니, 놀랍지 않습니까.
지도의 중심 좌표를 36.615527, 127.353515로 설정하고 지도 확대 배율은 12로 설정했습니다.
확대 배율은 1~15까지며 숫자가 클수록 확대됩니다.
이 간단한 몇줄만으로 웹페이지에 구글맵을 붙일수 있다니, 놀랍지 않습니까.
