소개
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 지도 매쉬업의 스냅샷입니다.
Google 지도 API를 사용하여 KML 파일을 GME 프로젝트에 통합하는 단계는 다음과 같습니다.
1단계: KML 파일 선택
2단계: 새 GME 프로젝트 만들기
3단계: KML을 추가할 함수 만들기
4단계: 지도 추가하기
5단계: 매시업 테스트하기
6단계: 매쉬업 게시하기{/1
1단계: KML 파일 선택
지도에 추가할 KML 파일을 선택합니다. Google 지도에서 지원되는 기능이 있는 항목은 무엇이든 가능합니다. 공개적으로 사용 가능한 서버에서 호스팅되어야 합니다.
2단계: 새 GME 프로젝트 만들기
새로운 빈 GME 프로젝트를 만듭니다.
빈 GME 프로젝트는 다음과 같이 표시됩니다.
함수의 제목과 이름을 추가합니다.
<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 매시업의 이미지입니다.
이제 애플리케이션 텍스트를 확인하고 첫 번째 결과를 볼 수 있습니다. 제목과 링크를 추가하고 다시 테스트할 수 있습니다.
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 맞춤 홈페이지와 다른 웹페이지에 쉽게 추가하고 다른 사용자와 공유할 수 있습니다.