구글 맵플릿 개발자 가이드

* 이 문서는 Google Mapplets Developer Guide 문서를 번역한 것입니다.

구글 맵플릿(Google Mapplets)은 구글 맵(Google Maps)에서 동작하는 미니 어플리케이션입니다. 이미 수 백명의 개발자들이 사진이나 날씨 정보, 주유소 가격 등을 구글 맵 위에 오버레이(overlay)하여 보여주는 맵플릿(Mapplets)들을 만들어 놓았습니다. 이런 맵플릿들은 구글 맵 디렉토리(Google Maps Directory)에서 볼 수 있습니다. (다음 그림과 같이 구글 맵 디렉토리에는 현재 1321개의 맵플릿이 등록되어 있습니다.)

맵플릿은 일종의 가젯(gadget)입니다. 맵플릿을 개발하려면 자바스크립트도 알아야 하고, 가젯 API 문서도 참조해야 합니다. 다음 비디오는 맵플릿이 구글 맵 사용자에게 어떤 유익을 줄 수 있는지 설명한 것입니다.

1. 맵플릿(Mapplets)이란?

맵플릿은 미니 웹 페이지를 감싸고 있는 XML 파일입니다. 미니 웹 페이지 안에 어떤 것(예를 들면, HTML이나 자바스크립트, 플래쉬 등의 일반 웹 페이지)도 넣을 수 있습니다. 맵플릿이 구글 맵과 통신을 하거나, 원격 웹 사이트로부터 콘텐츠를 가져 오거나, 사용자 설정을 저장할 수 있도록, 구글에서 자바스크립트 API를 제공합니다. 맵플릿은 Google Maps API와 유사합니다. 맵플릿은 Google Maps 상에서 동작하는 반면에, 기존의 Google Maps API는 다른 웹 사이트 상에 지도를 만드는 용도로 사용된다는 점이 다릅니다.

당신이 만든 맵플릿을 사용자가 실행하면 구글은 당신의 웹 서버에서 맵플릿 소스 코드를 가져 와서 구글 맵 사이트의 IFrame 안에 넣어서 서비스합니다. 보안 상의 이유로 미니 웹 페이지는 gmodules.com에서 호스팅됩니다. 당신의 사이트에서 직접 로딩하는 시간을 줄이기 위해, gmodules.com은 몇 시간 동안 맵플릿 소스 코드를 캐싱합니다. 개발 중 이런 캐싱을 방지하려면 Developer Mapplet을 설치해야 합니다.

2. 중요한 개발자 도구

맵플릿을 만들기 전에 먼저 Google Maps Directory의 개발자 도구 섹션으로 가서 다음 도구들을 설치하십시오.

• Developer Mapplet: 이것을 설치하면 당신이 실행한 각 맵플릿에 "Reload" 링크가 추가됩니다. 이 링크는 당신이 만든 맵플릿 소스 코드가 자동으로 캐싱되는 것을 방지해 줍니다. Developer Mapplet을 설치하지 않으면 아마 금방 좌절할지도 모릅니다.
• Mapplet Scratch Pad: 이것은 인터랙티브하게 맵플릿 코드를 작성하도록 도와 줍니다. 이 가이드 문서에 있는 모든 예제들은 Scratch Pad에 잘라 붙여 쓸 수 있습니다.

3. 맵플릿 만들기

일단 개발 환경이 셋업되었다면 다음은 맵플릿을 만드는 단계입니다. 맵플릿은 maps.google.com 사이트의 지도와 통신하도록 설계된 단순한 자바스크립트 코드입니다.  우선 맵플릿 "Hello World"를 만들어 봅시다. 맵플릿 기초에서 이 "Hello World" 코드를 어떻게 만드는지 자세히 설명해 놓았습니다.

다음은 'Hello World' 맵플릿 코드의 예입니다. 코드 중 빨강색으로 표시한 부분이 Maps API를 이용한 스크립트 부분입니다.

4. 맵플릿 출판하기

당신이 만든 맵플릿을 출판하기 위해서는 공개 웹 사이트에 저장해야 합니다. 그래야 구글 맵플릿 디렉토리에 출판을 할 때 이것을 참조할 수 있습니다. 만약 자신의 웹 사이트가 없다면, 다음과 같은 파일 호스팅 옵션 중 하나를 사용하면 됩니다:

• Google App Engine
• Google Project Hosting
• HTML/XML 파일을 서비스할 수 있는 다른 파일 호스팅 서비스 사용

추가로, 맵플릿을 편집하고 저장하는 용도로 Google Gadget Editor를 사용할 수 있습니다. Google Gadget Editor로 가젯을 만들어 저장할 수 있고, 이 가젯에서 사용할 데이터가 어디에 저장되어 있는지에 대한 URL을 지정할 수 있습니다.

주의: Google Project Hosting과 같은 호스팅 서비스는 자신이 만든 XML 파일의 MIME 타입을 명시적으로 text/xml로 설정해야 할지도 모릅니다. 이런 경우 Google Project Hosting에서는 아래와 같은 svn propset 명령을 사용하여 설정하면 됩니다:

command$ svn propset svn:mime-type text/xml filename.xml

5. 맵플릿을 설치하고 실행하기

맵플릿을 실행하기 전에 Google Maps Directory로 가서 자신이 만든 맵플릿을 설치해야 합니다. 아래 페이지의 상단에 보면 "Google 지도 콘텐츠 검색" 버튼 옆에 "URL로 추가" 링크가 있습니다. 이 링크를 클릭하십시오.

그리고 다음 페이지에서 자신이 만든 맵플릿 URL을 입력하고, "추가" 버튼을 클릭합니다. 이 후 Google Maps로 돌아 오면 My Maps 탭 아래에 이 맵플릿이 보일 것입니다.

6. 맵플릿을 다른 사람에게 공유하기

맵플릿을 공유하는 가장 간단한 방법은 다음과 같은 URL을 사용하는 것입니다. 이 URL은 다른 사람들이 당신이 만든 맵플릿을 즉시 실행할 수 있게 해 줍니다:

http://maps.google.com/maps/mpl&url=<당신이 만든 맵플릿 URL>

예를 들면, 맵플릿의 소스 코드의 위치가 http://www.google.com/mapfiles/mapplets/distance/distance.xml라면 다음 URL을 사용하면 공유됩니다:

http://maps.google.com/maps/mpl&url=http://www.google.com/mapfiles/mapplets/distance/distance.xml

아래 그림은 내지도에 'Hello World'와 '거리측정도구' 맵플릿을 추가한 예입니다.

7. 맵플릿을 디렉토리에 등록하기
 
당신이 만든 맵플릿을 Google Maps Directory에 추가하고자 한다면, 이 제출 서식을 사용하십시오. 우리의 목표는 사용자에게 유용하고 재미있는 고품질의 맵플릿으로 이 디렉토리를 채우는 것입니다. 제출된 모든 것을 등록할 수는 없지만 가능한 한 많은 것을 디렉토리에 포함하겠습니다.

맵플릿을 제출했다면 다른 사람들이 이 맵플릿을 자신의 'My Maps' 패널에서 바로 넣을 수 있게 다음 URL을 사용하십시오:

http://maps.google.com/gadgets/directory?synd=mpl&url=<당신이 만든 맵플릿 URL>

사용자가 위 URL을 클릭하면 이 맵플릿을 설치할지 물어보는 페이지가 뜹니다. 예를 들면, 당신이 만든 맵플릿의 소스 코드의 위치가 http://www.google.com/mapfiles/mapplets/distance/distance.xml라면, 다음 URL을 사용하여 공유하면 됩니다.

http://maps.google.com/gadgets/directory?synd=mpl&url=http://www.google.com/mapfiles/mapplets/distance/distance.xml

8. 맵플릿은 표준적인 Maps API와 어떻게 다른가?

지도를 조작하기 위한 API는 표준적인 Google Maps API에서 파생하였습니다. 대부분의 API가 Google Maps API와 동일합니다. 그러나 다음과 같은 몇 가지 차이점이 있습니다.

(1) 더 단순한 초기화

<Require feature="sharedmap"/>을 사용하면 자바스크립트 라이브러리를 수동으로 로딩하거나 API 키를 전달할 필요가 없이 API를 자동으로 초기화합니다. 위 코드가 메인 지도에 대한 참조를 항상 반환하기 때문에 GMap2 클래스의 생성자에 <div>를 전달할 필요가 없습니다.

사용자가 당신이 만든 맵플릿을 로드했다면, 이 사용자는 Google Maps와 호환되는 브라우저를 사용하고 있다고 가정해도 됩니다. 따라서 GBrowserIsCompatible 체크도 필요 없을 뿐더러 이것은 맵플릿에서 지원되지도 않는 기능입니다.

Google Maps API에서는 setCenter() 메서드를 이용하여 지도의 위치를 초기화해 주어야 합니다. 그러나 맵플릿에서는 이미 초기화된 지도를 가지고 있으므로 이런 위치 지정은 필요 없습니다.

(2) 표준이 아닌 동작은 불허

Google Maps의 표준적인 동작을 변경하는 맵플릿은 허용하지 않습니다. 이를 위해 드래깅를 끄는 기능, 더블 클릭 줌 기능 등의 메서드를 제거했습니다.

(3) 지도와 통신은 비동기

맵플릿과 Google Maps 사이트 간의 통신은 비동기적 통신입니다. 따라서 어떤 메서드들은 표준 Google Maps API와 같은 기능의 메서드일지라도 실제로는 다르게 동작합니다. 예를 들면, 지도를 수정하는 setCenter()나 addOverlay()와 같은 동작은 Maps API와 같지면, 지도로부터 반환 값을 얻는 동작은 콜백 함수가 필요합니다. 맵플릿에서는 이런 경우 Maps API 메서드들의 이름에 Async라는 단어를 덧붙여 놓았습니다. 이런 메서드들의 반환 값은 콜백 함수의 인자로 전달이 됩니다.

예를 들면, Maps API에서는 다음과 같이 쓰지만:

var zoom = map.getZoom(); 
alert("Current zoom level is " + zoom); 
alert("This happens after you see the zoom level message");

맵플릿에서는 다음과 같이 씁니다:

map.getZoomAsync(function(zoom) { 
    alert("Current zoom level is " + zoom); 
}); 
alert("This might happen before or after you see the above message");

가끔 비동기 요청을 여러 개를 한꺼번에 수행할 필요가 있을 때는 각각을 순차적 또는 중첩해서 실행하기 보다는 한 번의 호출로 여러 개의 요청을 하는 GAsync()라는 맵플릿에서 제공하는 유틸리티 함수를 사용하십시오. GAsync()를 사용하려면 이 함수에 객체 인자와 호출하려는 메서드들을 따옴표로 친 인자들, 그리고 마지막 콜백 함수를 인자로 전달합니다:

GAsync(map, 'getZoom', 'getCenter', function(zoom,center) { 
    // code here 
}

하나 이상의 객체에 대해서 요청들을 실행하려면 추가적인 객체 바로 다음에 따옴표 친 메서드들을 함께 넘기면 됩니다:

GAsync(map, 'getZoom', 'getCenter', marker, 'getPoint', 
    function(zoom,center,point) { 
    // code here 
}

(4) 보안 우려 사항 및 정보창 위생

맵플릿은 gmodules.com에서 호스팅하는 iframe 내에서 동작하므로 맵플릿에서 구글 사용자 쿠키에 접근할 수 없으며, Google Maps 사이트의 자바스크립트를 깨뜨릴 수 없습니다. 그러나 지도 위에 디스플레이되는 모든 것들과 지도 자체는 maps.google.com 도메인에서 호스팅되므로 맵플릿에서 정보창에 디스플레이를 요청하면, 지도 위에 그리기 전에 정보창의 위생 점검을 하여 유해한 것들을 제거합니다. 정보창 내에 자바스크립트는 허용하지 않고, HTML 태그와 CSS만 허용합니다.

더우기, 새로운 지도 컨트롤이나 맵 타입을 추가하는 동작은 지도 내에서 실행되는 제 3 자의 자바스크립트가 필요하므로 지금은 허용하지 않습니다.

(5) 원격 데이터에 대한 요청은 구글에 의해 프락시됨

맵플릿은 구글에 의해 운영되는 서버 상에 위치한 gmodules.com으로부터 서비스됩니다. 브라우저의 보안 모델은 gmodules.com에 있는 자바스크립트가 다른 도메인에 데이터를 요청하는 것을 금지합니다. 따라서 당신이 만든 맵플릿에서 GDownloadUrl(또는 GXml)을 이용하여 당신의 서버에서 데이터를 가져 올 수 없습니다.

대신에, 가젯 API를 이용하여 아래와 같이 호출을 하면, gmodules.com 상에 동작하는 프락시를 통해 콘텐츠를 가져올 수 있습니다:

• _IG_FetchContent(url, callback) : 지정된 URL의 콘텐츠를 텍스트로 반환합니다. HTML이나 평이한 텍스트 콘텐츠를 가져오려면 이 함수를 이용하십시오.
• _IG_FetchXmlContent(url, callback) : 지정된 URL의 XML 콘텐츠를 DOM 객체로 반환합니다. 파싱이 필요한 XML 콘텐츠를 가져오려면 이 함수를 이용하십시오.

위 메서드들은 다음과 같이 GDownloadUrl이나 GXml과는 다른 방식으로 동작을 합니다:

• _IG_FetchContent와 _IG_FetchXmlContent 호출은 인터넷의 어떤 웹 사이트로부터도 데이터를 가져올 수 있습니다.
• _IG_FetchXmlContent는 GXml보다 더 엄격하여, XML 파일이 <?xml version="1.0" encoding="UTF-8"?>로 시작해야 합니다.
• _IG_FetchContent과 _IG_FetchXmlContent 호출은 당신의 서버의 부하를 줄이기 위해서 콘텐츠를 자동으로 캐싱합니다. 캐싱 지속 시간 또는 캐싱 끄기를 어떻게 하는지에 대한 정보를 보려면 가젯 API 문서의 'Refreshing the Cache' 섹션을 참고하십시오.

(6) 기존 Maps API을 이용한 매시업을 매플릿으로 변환하는 방법

만약 당신이 Google Maps API를 이용한 기존 사이트를 맵플릿으로 바꾸기를 원하면 '기존 Maps API을 이용한 매시업을 매플릿으로 변환하는 방법'을 참고하세요.

맵플릿 프로그래밍 기초를 계속 보려면 여기를 클릭하세요.

- 강가딘

---

If you like this article, please subscribe to this blog to get latest posts or leave a comment here.