소개
Google 매쉬업 에디터 (GME)는 오래 전부터 대기해 왔으며 매시업 개발자에게 유용한 도구 중 하나입니다. GME를 사용하면 개발자가 외부 데이터와의 연결을 기반으로 지도, 표, 목록 및 기타 요소와 같은 웹페이지에서 동적 구성요소를 만들고 수정할 수 있습니다. 그런 다음 이러한 요소를 iframe을 사용하여 웹페이지와 블로그에 포함할 수 있습니다.이 튜토리얼에서는 KML 파일을 GME로 만든 지도에 통합하는 방법을 보여줍니다.
Google 매쉬업 에디터의 첫인상
- 대부분의 Google 제품과 마찬가지로 깔끔하고 명확한 인터페이스를 통해 매우 단순합니다.
- 이 예시에는 코드 예의 숫자가 계속 증가하는 편리한 프로젝트 인덱스와 작성자 코드가 있습니다.
- 프로젝트에 추가 리소스 (예: 이미지 파일)를 쉽게 저장할 수 있습니다.
- 사용하기 쉬운 XML 디버거가 있습니다.
- 사용하기 쉬운 샘플 애플리케이션이 많이 있습니다.
KML 개발자를 위한 GME
인터넷이 등장하기 전에는 공간 데이터를 전통적으로 공유하기 어려웠습니다. 그러나 인터넷의 발전과 함께 지도 작성 애플리케이션은 지리 정보 시스템(GIS) 데이터를 전 세계와 쉽게 공유하는 표준이 되었습니다. KML은 컴팩트하고 개발이 쉬우며 Google 어스 및 Google 지도와 같은 인기 애플리케이션에서 지원되므로 GIS 데이터의 표시 및 교환의 표준이 되고 있습니다.
최근까지는 자바스크립트를 기반으로 페이지를 만들고 수정하는 프로세스가 KML 개발자에게 큰 문제였습니다. 매쉬업을 만들고 디버그하려면 수많은 추가 단계가 필요했습니다. GME를 사용하면 몇 가지 기본 구성요소에서 KML 기반 매쉬업을 매우 빠르게 만들 수 있습니다. HTML 또는 자바스크립트에 관한 특별한 지식이 없어도 만들 수 있습니다. GME 샘플 프로젝트는 시작하기에 충분한 역할을 합니다.
다음 예에서는 Pict Earth USA 항공 촬영 중에 찍은 사진 모음을 가리키는 KML 파일을 사용합니다.
아래는 Pict Earth 지도 매쉬업의 스냅샷입니다.
![Pict 어스 매쉬업 스냅샷](https://developers.google.cn/static/kml/articles/images/kmlgme1.jpg?authuser=8&hl=ko)
Google 지도 API를 사용하여 KML 파일을 GME 프로젝트에 통합하는 단계는 다음과 같습니다.
1단계: KML 파일 선택
2단계: 새 GME 프로젝트 만들기
3단계: KML을 추가할 함수 만들기
4단계: 지도 추가하기
5단계: 매시업 테스트하기
6단계: 매쉬업 게시하기{/1
1단계: KML 파일 선택
지도에 추가할 KML 파일을 선택합니다. Google 지도에서 지원되는 기능이 있는 항목은 무엇이든 가능합니다. 공개적으로 사용 가능한 서버에서 호스팅되어야 합니다.
2단계: 새 GME 프로젝트 만들기
새로운 빈 GME 프로젝트를 만듭니다.
빈 GME 프로젝트는 다음과 같이 표시됩니다.
![빈 GME 프로젝트](https://developers.google.cn/static/kml/articles/images/kmlgme2.jpg?authuser=8&hl=ko)
함수의 제목과 이름을 추가합니다.
<gm:page title="Pict Earth missions"authenticate="false" onload="KMLPE()"></gm:page>
3단계: KML을 추가할 함수 만들기
지도에 추가할 KML 파일의 경로를 사용하여 자바스크립트 함수를 만듭니다.
<script>
function kmlPE()
{
<!-- Get map -->
var myMap = google.mashups.getObjectById('map').getMap();
<!-- Get KML -->
var geoXml = new GGeoXml("http://pictearthusa.com/kml/missions.kml");
<!--Place KML on Map -->
myMap.addOverlay(geoXml);
<!--Set zoom on double click -->
myMap.enableDoubleClickZoom();
}
</script>
4단계: 지도 추가하기
지도와 매개변수를 추가합니다.
<gm:map id="map" height="400px" width="400px" lat="32.9393" lng="-117.206" zoom="9" maptypes="true"/>
5단계: 매시업을 테스트합니다.
테스트 버튼 (F4)을 누릅니다.
샌드박스에서 테스트된 Pict Earth 매시업의 이미지입니다.
![샌드박스에서 Pict 어스 매쉬업](https://developers.google.cn/static/kml/articles/images/kmlgme3.jpg?authuser=8&hl=ko)
이제 애플리케이션 텍스트를 확인하고 첫 번째 결과를 볼 수 있습니다. 제목과 링크를 추가하고 다시 테스트할 수 있습니다.
6단계: 매시업 게시하기
프로젝트 이름을 설정한 후 게시합니다. 이렇게 하면 메시업에 대한 영구 링크가 주어져서 웹페이지에 통합하는 데 사용할 수 있습니다. 이 예에서는 GME 프로젝트 홈페이지로 연결되는 링크를 제공합니다. 프로젝트의 소스 코드도 확인할 수 있습니다.
7단계: 웹페이지에 매시업 추가
iframe을 사용하여 매시업을 웹페이지에 추가합니다. 예를 들어 예시 프로젝트를 삽입하려면 다음을 추가합니다.
<iframe style="WIDTH: 439px; HEIGHT: 491px" src="http://pemissions.googlemashups.com/" frameborder="0"></iframe>
Google 애널리틱스 코드를 프로젝트에 추가하여 페이지를 보는 사용자에 관한 통계를 추적할 수도 있습니다. 다음은 추가하는 간단한 스크립트입니다.
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">uacct = "youraccountnumber";urchinTracker();</script>
8단계: GME 갤러리에 추가
GME 매쉬업 갤러리에 매시업을 게시합니다. 이렇게 하면 다른 사용자가 매시업을 볼 수 있습니다.
추가 정보:
매쉬업 제작에 대한 자세한 내용은 Google 매쉬업 에디터 시작 가이드를 확인하세요. 또한 태그 목록에서 예가 포함된 모든 gm 태그에 대한 간략한 설명을 확인하세요.
코드:
다음은 GME에서 Pict Earth KML을 사용하기 위한 전체 코드입니다.
<gm:page title="Pict Earth missions" authenticate="false" onload="kmlPE()>
<!-- Map definition -->
<gm:mapid="map" height="400px" width="400px" lat="32.9393" lng="-117.206" zoom="9" maptypes="true"/>
<script>
function kmlPE(){
<!-- Get map -->
var myMap = google.mashups.getObjectById('map').getMap();
<!-- Get KML -->
var geoXml = new GGeoXml("http://pictearthusa.com/kml/missions.kml");
<!-- Place KML on Map -->
myMap.addOverlay(geoXml);
<!-- Set zoom on double click -->
myMap.enableDoubleClickZoom();
}
</script>
</gm:page>
다음 단계
매시업을 게시한 후에는 매시업에 KML 파일을 매개변수로 사용하여 다른 애플리케이션에 포함하거나 지도로 직접 로드할 수 있습니다. 예를 들어 이 페이지의 내용은 다음과 같습니다.
http://param.googlemashups.com GME 매쉬업입니다. 다음과 같이 URL에 KML= 을 매개변수로 추가하여 KML 파일을 매쉬업에 직접 참조할 수 있습니다. http://param.googlemashups.com/?KML=http://mapgadgets.googlepages.com/cta.KML프로젝트에서 가젯을 만들 수도 있습니다. 제출한 후에는 파일 메뉴로 이동하여 가젯 제출을 클릭하고 안내를 따릅니다. 이렇게 하면 애플리케이션을 Google 맞춤 홈페이지와 다른 웹페이지에 쉽게 추가하고 다른 사용자와 공유할 수 있습니다.