원문 : http://www.joinc.co.kr/modules/moniwiki/wiki.php/Site/Google/Service/GoogleMapAPI

1 구글의 개발자 포용 정책

구글은 다양한 개발자를 자신의 영역으로 끌어들이기 위한 개방정책을 사용한다. 그래서 대부분의 서비스들이 서비스를 제어할 수 있는 API를 공개적으로 제공하고 있다. 개발자는 이 API를 이용해서 구글이 선보인 서비스를 단순히 둘러보는 정도에 그치지 않고, 다양한 응용을 시도해볼 수 있다. 구글 MAP같은 경우 구글에서 서비스를 만들어내기도 전에, 구글이 제공한 API를 이용해서 자신들만의 독특한 서비스를 만들어낸 사용자들이 있다. http://HousingMaps.com 의 경우 미국 주요도시의 집값 정보를 보여주며, http://ChicagoCrime.org 는 도시내의 범죄와 범행위치를 검색하는 서비스를 제공하고 있다.

자신의 제품을 사용하거나 테스트해줄 많은 개발자들을 확보하는건 소프트웨어 회사가 성장하기 위한 가장 중요한 동력원임은 말할필요도 없을 것이다. 기존에도 개발자를 자신의 영역으로 끌어들이기 위한 노력을 해왔던건 사실이지만, 많은 제한을 둔 폐쇄적인 형태로 이루어졌었다. 구글은 정보를 완전히 공개하고 있으며, 많은 우호적인 개발자 세력을 만들어냈다. 이들 개발자는 구글매니아로 불리우는 중요 고객이기도 하다. 최근에는 국내 대형포탈들도 이러한 공개 개발자 포용정책을 펴나가는 추세다.

2 구글 Map API

구글 Map은 Ajax기 술을 사용하는 구글의 대표적인 서비스들 중 하나이다. 구글은 단순히 서비스를 제공하는데 그치지 않고 개발자의 참여를 끌어들이기 위해 API를 공개하고 있다. 구글 Map API를 이용하면 자신의 사이트에 구글 Map을 붙이고, 테스트하면서 새로운 응용을 만들 수 있다. Map API를 사용하기 위해서는 Map Key를 받아야 하는데, http://www.google.com/apis/maps 를 방문해서 Map을 사용할 URL만 명시해주면 바로 Key를 받을 수 있다. 그다음 생성된 코드를 가져다 붙이기만 하면 자신의 사이트에서 바로 구글 Map을 붙일 수 있다.

Map Key는 구글 maps 자바스크립트를 불러올때 key에 명시하면 된다.

3 구글 MAP API 분석

구글 MAP API는 JavaScript로 제어된다. 여기에서는 완전한 형태의 HTML 파일을 보여주지는 않을 것이다. 완전한 HTML 페이지를 만드는건 Map Key를 생성할 때 만들어지는 HTML 코드를 이해하는 것만으로 충분할 것이다.

3.1 기본

구글 Map을 불러오기 위한 가장 기본이 되는코드다. 서울주변을 보여준다.

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);

setCenter을 이용해서 보여줄 위치를 지정한다. 첫번째 인자는 좌표를 지정하기 위해서 사용한다. 두번째 인자는 지도의 해상도를 결정하기 위해서 사용한다. 숫자가 클 수록 더 자세한 결과를 보여준다.
simple.html 예제

3.2 Map에서의 이동

다음은 맵에서 중심을 이동하는 예제다. panTo 메서드를 이용하면 해당 중심으로 지도를 부드럽게 이동시킨다. 길찾기등의 기능구현에 유용하게 사용할 수 있을 거 같다.

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);
window.setTimeout(function() {
   map.panTo(new GLatLng(42.615527631349245, 128.353515625));
}, 2000);

animate.html 예제

3.3 Control 버튼 추가하기

맵을 확대기시커나 모드를 바꾸거나 하는등의 제어를 위한 컨트롤 버튼을 추가한다. 참고로 구글 맵은 맵, 위성, 합성의 3가지 모드를 제공한다.

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);

control.html 예제

3.4 Event Listener

event listener는 GEvent.addListener를 호출해서 생성한다. 이것은 맵에서 발생하는 이벤트를 알려준다. 아래의 예제에서 맵을 움직일 경우 변경된 좌표가 출력되는걸 확인할 수 있을 것이다.

var map = new GMap2(document.getElementById("map"));
GEvent.addListener(map, "moveend", function() {
 var center = map.getCenter();
 document.getElementById("message").innerHTML = center.toString();
});
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);

event.html 예제

3.5 정보창 열기

openInfoWindow를 이용하면 원하는 지역에 DOM정보를 출력할 수 있다. 다음은 맵중앙에 저는 여기에 살아요메시지를 출력하는 코드다.

map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);
map.openInfoWindow(map.getCenter(),
                  document.createTextNode("저는 여기에 살아요"));

infowindow.html 예제

3.6 맵에 표시하기

이번 예제는 overlay기능을 이용해서 지도에 랜덤하게 10개의 마크를 표시한다. 마크에 사용되는 이미지는 기본 이미지이며, 사용자 정의 아이콘을 만들 수도 있다. 우리나라는 아직 상세지도가 제공되지 않은 관계로 일본의 동경시를 기준으로 예제를 만들었다.

map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12);

var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();

// 랜덤 포인트를 만들고 각각의 포인트에 마킹을 한다.
for (var i = 0; i < 10; i++) {
 var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
                         southWest.lng() + lngSpan * Math.random());
 map.addOverlay(new GMarker(point));
}
// 랜덤 포인트를 만들고 이것을 연결한다.
var points = [];
for (var i = 0; i < 5; i++) {
 points.push(new GLatLng(southWest.lat() + latSpan * Math.random(),
                         southWest.lng() + lngSpan * Math.random()));
}
points.sort(function(p1, p2) {
 return p1.lng() - p2.lng();
});
map.addOverlay(new GPolyline(points));

overlay.html 예제

3.7 클릭 이벤트 제어

맵에 클릭을 할경우 이벤트를 받아서 마킹을 하는 예제다. 앞서 배웠던 addListenr메서드를 이용해서 click 이벤트를 기다리고, 클릭이 발생하면 addOverlay메서드를 이용해서 마킹을 한다.

map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12);
GEvent.addListener(map, "click", function(marker, point)
{
 if (marker)
 {
   map.removeOverlay(marker);
 } else {
   map.addOverlay(new GMarker(point));
 }
});

click.html 예제

3.8 마커에 정보 창 출력하기

10개의 마커를 랜덤하게 표시하고, 마커를 클릭하면 클릭이벤트에 대한 Listener가 작동하도록 해보자. Listener 함수는 openInfoWindowHtml메서드를 이용해서 정보창을 출력한다.

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12);
function createMarker(point, number)
{
 var marker = new GMarker(point);
 GEvent.addListener(marker, "click", function()
 {
   marker.openInfoWindowHtml("Marker #" + number + "");
 });
 return marker;
}

var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++)
{
 var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
                       southWest.lng() + lngSpan * Math.random());
 map.addOverlay(createMarker(point, i + 1));
}

markerinfo.html 예제