2009년 4월 26일 일요일

Google Map API 사용하기


구글맵 API는 워낙 잘 만들어 졌고, 설명도 잘 되어 있어 굳이 이렇게 설명할 필요도 없지만 간단하게 정리를 해둔다는 차원에서 기술한다.

1. 먼저 code.google.com에 접속한다. 구글의 공개 api는 여기서 접근이 가능하다. 구글 맵은 AJAX API 카테고리에 포함되어 있으므로 AJAX API 를 선택한다.




















첫번째에 Google 지도 API가 위치해 있다. 이를 선택하면



Google 지도 API 홈페이지가 표시된다.




















Map API 를 자신의 홈페이지에 사용하기 위해선 먼저 Google Maps API Key를 먼저 발급받아야 된다. 아래쪽 페이지에 삽입된 지도의 윈도우에 표시된 'Sign up' 링크를 클릭한다.





















그림과 같이 API Key를 발급받는 페이지가 표시된다. 여기서 맨 아래쪽에 보면 자신이 사용하고자 하는 페이지의 주소를 적어주고 체크 박스를 체크하고 'Generate API Key' 버튼을 누른다.




























친절하게도 단순히 KEY와 사용하는 웹 주소와 Javascript Maps API 예제와 Maps API 플래시 예제 및 웹서비스에 사용할때의 예를 표시해주고 있다.

이것을 자신의 웹 페이지 Copy&Paste 해서 사용하면 된다.

여기서 Javascript Maps API 의 예제코드를 선택해서 복사해 둔다.


이제 간단한 "hello world!" 페이지를 만들어 보자.

1. 먼저 Google Maps Api Key 를 명시한다.

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script>

2.Map API를 로딩한다.

<script type="text/javascript">
google.load("maps", "2");
</script>


3. 맵 객체를 생성한 후 중심 좌표를 설정하는 초기화 작업을 수행한다.

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script>
<script type="text/javascript">
google.load("maps", "2.x");

// Call this function when the page has been loaded
function initialize() {
var map = new google.maps.Map2(document.getElementById("map"));
map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
}
google.setOnLoadCallback(initialize);
</script>



























4. 전체 코드는 아래와 같다.

<!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 content="yes" name="apple-mobile-web-app-capable" />
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="javascript/functions.js" type="text/javascript"></script>

<title>Hello, World!</title>
<meta content="Google Maps API 예제" name="description" />

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAFXPJCgVoGSh1DdTiIZJvyhQmQlLuQ6m5PcQF3pInRAJcnkib3xTlDJAfzlKR1X6bp3W0lI17_QfbZw"></script>
<script type="text/javascript">
  google.load("maps", "2.x");
  
  // Call this function when the page has been loaded
  function initialize() {
    var map = new google.maps.Map2(document.getElementById("map"));
    map.setCenter(new google.maps.LatLng(37.333832, 126.732782), 13);
  }
  google.setOnLoadCallback(initialize);
</script>
</head>
<body onunload="GUnload()">
<!-- Top Nav menu -->
<div id="topbar">
<div id="title">Hello, World!</div>
<div id="leftnav">
 <a href="index.html"><img alt="home" src="images/home.png" /></a>
</div>
</div>
<!-- 맵 표시 -->
<div id="map" style="height:400px"></div>
<?php 
include("footer.html");
?>
</body>
</html>
작성자: 카오스웍스 시간: 오후 7:29
피드 구독하기: 댓글 (Atom)