Google Mashup Editor에서 KML 사용하기
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
발레리 흐로누소프, KML 개발자,
페름 주립대학교, 러시아
소개
Google
매시업 에디터 (GME)는 매시업 개발자가 가장 오랫동안 기다려 온 유용한 도구 중 하나입니다. GME는 개발자가 외부 데이터와의 연결을 기반으로 지도, 표, 목록, 기타 요소와 같은 웹페이지의 동적 구성요소를 만들고 수정하는 데 도움이 됩니다. 그런 다음 이러한 요소를 iframe을 사용하여 웹페이지와 블로그에 포함할 수 있습니다.
이 튜토리얼에서는 GME로 만든 지도에 KML 파일을 통합하는 방법을 보여줍니다.
Google Mashup Editor에 대한 첫인상
- 대부분의 Google 제품과 마찬가지로 깔끔하고 명확한 인터페이스로 최대한 단순하게 설계되었습니다.
- 코드 예시가 계속 증가하는 컬렉션과 저자의 코드가 포함된 편리한 프로젝트 색인이 있습니다.
- 이를 통해 이미지 파일과 같은 추가 리소스를 프로젝트에 쉽게 저장할 수 있습니다.
- 사용하기 쉬운 XML 디버거가 있습니다.
- 사용하기 쉬운 샘플 애플리케이션이 많이 있습니다.
KML 개발자를 위한 GME
인터넷이 등장하기 전에는 공간 데이터를 공유하기가 어려웠습니다. 하지만 인터넷이 발전하면서 매핑 애플리케이션은 지리 정보 시스템(GIS) 데이터를 전 세계와 쉽게 공유하는 표준 방법이 되었습니다. KML은 간결하고 개발하기 쉬우며 Google 어스 및 Google 지도와 같은 인기 애플리케이션에서 지원되므로 GIS 데이터의 표시 및 교환을 위한 표준이 되고 있습니다.
최근까지 JavaScript를 기반으로 페이지를
만들고 수정하는 과정은 KML 개발자에게 큰 문제였습니다. 매시업을 만들고 디버그하려면 많은 추가 단계가 필요했습니다. GME를 사용하면 몇 가지 기본 구성요소로 KML 기반 매시업을 매우 빠르게 만들 수 있습니다. 생성 프로세스에는 HTML이나 JavaScript에 대한 특별한 지식이 필요하지 않습니다. GME 샘플 프로젝트는 시작하기에 충분한 정보를 제공합니다.
다음 예에서는 Pict Earth USA 비행 중에 촬영한 사진 모음을 가리키는 KML 파일을 사용합니다.
다음은 Pict Earth 지도 매시업의 스냅샷입니다.
Google Maps API를 사용하여 KML 파일을 GME 프로젝트에 통합하는 단계는 다음과 같습니다.
1단계: KML 파일 선택
2단계: 새 GME 프로젝트 만들기
3단계: KML을 추가하는 함수 만들기
4단계: 지도 추가
5단계: 매시업 테스트
6단계: 매시업 게시
7단계: 웹페이지에 매시업 추가
8단계: GME 갤러리에 넣기
1단계: KML 파일 선택
지도에 추가할 KML 파일을 선택합니다. Google 지도에서 지원되는 기능이 있는 모든 항목이 될 수 있습니다. 공개적으로 사용 가능한 서버에서 호스팅되어야 합니다.
2단계: 새 GME 프로젝트 만들기
새 빈 GME 프로젝트를 만듭니다.
빈 GME 프로젝트는 다음과 같습니다.
함수의 제목과 이름을 추가합니다.
<gm:page
title="Pict Earth
missions" authenticate="false"
onload="kmlPE()">
</gm:page>
3단계: KML을 추가하는 함수 만들기
지도에 추가할 KML 파일의 경로를 사용하여 JavaScript 함수를 만듭니다.
<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
프로젝트에서 가젯을 만들 수도 있습니다. 제출한 후 파일 메뉴로 이동하여 'Submit Gadget'(가젯 제출)을 클릭하고 안내를 따릅니다. 이를 통해 Google 개인 맞춤 홈페이지, 다른 웹페이지에 애플리케이션을 쉽게 추가하고 다른 사용자와 공유할 수 있습니다.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2025-07-27(UTC)
[null,null,["최종 업데이트: 2025-07-27(UTC)"],[[["\u003cp\u003eThis tutorial demonstrates how to integrate a KML file into a Google Mashup Editor (GME) project using the Google Maps API.\u003c/p\u003e\n"],["\u003cp\u003eGME simplifies the process of creating and editing KML-based mashups, enabling developers to build dynamic map components without extensive HTML or JavaScript knowledge.\u003c/p\u003e\n"],["\u003cp\u003eThe tutorial provides a step-by-step guide, covering selecting a KML file, creating a GME project, adding a map, testing, publishing, and embedding the mashup into web pages.\u003c/p\u003e\n"],["\u003cp\u003eUsers can further enhance their mashups by adding Google Analytics tracking and submitting them to the GME Mashup Gallery for wider visibility.\u003c/p\u003e\n"],["\u003cp\u003ePublished mashups can be parameterized to dynamically load different KML files and can be converted into Gadgets for integration into Google Personalized Home Page and other web pages.\u003c/p\u003e\n"]]],[],null,["# Using KML in Google Mashup Editor\n\n*Valery Hronusov, KML Developer,\nPerm State University, Russia* \n\nIntroduction\n------------\n\n[Google\nMashup Editor](http://editor.googlemashups.com/ \"Google Mashup Editor\") (GME) is one of the most long-awaited and useful tools for mashup developers. GME helps developers create and edit dynamic components in Web pages, such as maps, tables, lists, and other elements, based on connections with external data. These elements can be then be included in Web pages and blogs using an iframe. \n\nThis tutorial will show you how to incorporate a KML file into a Map created with GME. \n\n\u003cbr /\u003e\n\n### My first impressions of Google Mashup Editor\n\n- It has the utmost simplicity, with a clean and distinct interface, like the majority of Google products.\n- It has a convenient project index with a constantly increasing collection of code examples, as well as the author's code.\n- It allows for the easy storage of additional resources to the project (such as image files).\n- It has an easy-to-use XML debugger.\n- It has lots of easy-to-use sample applications.\n\n\u003cbr /\u003e\n\n### GME for KML Developers\n\nBefore the advent of the Internet, spatial data\nwas traditionally difficult to share. However, with\nthe development of the Internet, mapping applications became a standard\nway of easily sharing Geographic Information Systems\n(GIS) data with the world. KML is becoming a standard for the\npresentation and interchange of GIS data because it is compact, easy to\ndevelop, and is supported by popular applications such as Google Earth\nand\nGoogle Maps.\n\n\nUntil recently, the process of creating and editing pages\nbased\non\nJavaScript was a large problem for KML developers. It required a large\nnumber of\nadditional steps to create a mashup and debug it. GME makes\nit\npossible to create a KML-based mashup very rapidly\nout of a few basic\ncomponents. The process of creation does not require special\nknowledge of HTML\nor JavaScript. The GME sample projects provide enough to get\nstarted.\n\n\nIn the following example, I'll be using a KML file that points\nto the\ncollection of the photographs taken during\n[Pict Earth\nUSA](http://pictearth.com/missions.html \"Pict Earth USA\") flights.\n\nThis is a snapshot of the Pict Earth maps mashup: \n\n### Here are the steps to integrate a KML file into a GME project using the\nGoogle Maps API:\n\n\u003cbr /\u003e\n\n[Step 1: Select the KML file](#Step1) \n[Step 2: Create a new GME project](#Step2) \n[Step 3: Create a function to add the KML](#Step3) \n[Step 4: Add a map](#Step4) \n[Step 5: Test the mashup](#Step5) \n[Step 6: Publish the mashup](#Step6) \n[Step 7: Add the mashup to a web page](#Step7) \n[Step 8: Put it in the GME gallery](#Step8) \n\n### Step 1: Select the KML file\n\nSelect\nthe KML file you would like to add to your Map. This can be anything\nthat has features supported in Google Maps. It must be hosted on a\npublicly available server.\n\n### Step 2: Create a New\nGME Project\n\nCreate a new blank GME project.\n\nThis is what a blank GME project looks like: \n\nAdd a\ntitle and a name for your function.\n\\\u003cgm:page title=**\"Pict Earth\nmissions\"** authenticate=\"false\" **onload=**\"**kmlPE()**\"\\\u003e \n\\\u003c/gm:page\\\u003e \n\n### Step 3: Create\na function to add the KML\n\n\nCreate a JavaScript function with the path to the KML file to be added\nto the Map. \n\n```gdscript\n\u003cscript\u003e\n function kmlPE()\n {\n \u003c!-- Get map --\u003e\n var myMap = google.mashups.getObjectById('map').getMap();\n \u003c!-- Get KML --\u003e\n var geoXml = new GGeoXml(\"http://pictearthusa.com/kml/missions.kml\");\n \u003c!--Place KML on Map --\u003e\n myMap.addOverlay(geoXml);\n \u003c!--Set zoom on double click --\u003e\n myMap.enableDoubleClickZoom();\n }\n\u003c/script\u003e\n```\n\n### Step 4: Add a Map\n\nAdd map and parameters.\n\n```actionscript-3\n\u003cgm:map id=\"map\" height=\"400px\" width=\"400px\" lat=\"32.9393\" lng=\"-117.206\" zoom=\"9\" maptypes=\"true\"/\u003e\n```\n\n### Step 5: Test the mashup.\n\nPress the Test button (F4).\n\nThis is an image of the Pict Earth mashup tested in the\nSandbox. \n\nNow we can verify the text of application and see the first result. We\ncan add a\ntitle and links and test it again.\n\n### Step 6: Publish the mashup\n\nSet the name of the project, and then publish it. This will give you a\npermanent link to your mashup, which you can use to incorporate it into\nweb pages. Using my example, this is the link to the GME project\n[home page](http://pemissions.googlemashups.com/ \"home page\"). You\ncan also see\n[source\ncode](http://pemissions.googlemashups.com/index.gml \"Source code\") of project.\n\n### Step 7: Add the mashup\nto a web page\n\nAdd the mashup to a web page using an iframe. For instance, to insert\nthe example project, add this:\n\n```css+lasso\n\u003ciframe style=\"WIDTH: 439px; HEIGHT: 491px\" src=\"http://pemissions.googlemashups.com/\" frameborder=\"0\"\u003e\u003c/iframe\u003e\n```\n\nHere are examples of the mashup in a web [page](http://spreadsheetsgis.googlepages.com/pe \"page\")\nand a [blog](http://gisplanet.blogspot.com/2007/07/pict-earth-usa-missions.html \"blog\").\n\nYou can also add your [Google\nAnalytics](http://analytics.google.com/ \"Google Analytics\") code to the project, which will allow you to track\nstatistics about who is viewing your page. Here's the simple script to\nadd it:\n\n```carbon\n\u003cscript src=\"http://www.google-analytics.com/urchin.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003euacct = \"youraccountnumber\";urchinTracker();\u003c/script\u003e\n```\n\n\u003cbr /\u003e\n\n### Step 8: Put it in the\nGME Gallery\n\nPublish your mashup to the [GME Mashup Gallery](http://gallery.googlemashups.com/).\nThis will\nallow other users to view your mashup.\n\n\u003cbr /\u003e\n\n### For more information:\n\nCheck out the\n[Google\nMashup Editor Getting Started Guide](http://editor.googlemashups.com/docs/gettingstarted.html \"Google Mashup Editor Getting Started Guide\"), which presents in\ndetail the\nprocess of creating mashups. Also, check out\nthe [list\nof tags](http://editor.googlemashups.com/docs/reference.html \"list of tags\") for a brief description of all gm tags with\n[examples](http://editor.googlemashups.com/docs/samples.html \"examples\").\n\n\u003cbr /\u003e\n\n### Code:\n\nHere is\nthe whole code for using the Pict Earth KML in GME: \n\n```gdscript\n\u003cgm:page title=\"Pict Earth missions\" authenticate=\"false\" onload=\"kmlPE()\u003e\n\n\u003c!-- Map definition --\u003e\n\u003cgm:mapid=\"map\" height=\"400px\" width=\"400px\" lat=\"32.9393\" lng=\"-117.206\" zoom=\"9\" maptypes=\"true\"/\u003e\n\n\u003cscript\u003e\n function kmlPE(){\n\n \u003c!-- Get map --\u003e\n var myMap = google.mashups.getObjectById('map').getMap();\n\n \u003c!-- Get KML --\u003e\n var geoXml = new GGeoXml(\"http://pictearthusa.com/kml/missions.kml\");\n\n \u003c!-- Place KML on Map --\u003e\n myMap.addOverlay(geoXml);\n\n \u003c!-- Set zoom on double click --\u003e\n myMap.enableDoubleClickZoom();\n }\n\u003c/script\u003e\n\u003c/gm:page\u003e\n```\n\n### What's next?\n\nOnce you've published your mashup, you can use the KML file\nin it as a\nparameter to include in another application, or loaded directly as a\nmap. For\ninstance, this page:\n[http://param.googlemashups.com](http://param.googlemashups.com/?kml=http://pictearthusa.com/kml/missions.kml \"http://param.googlemashups.com/?kml=http://pictearthusa.com/kml/missions.kml\")\n\n\u003cbr /\u003e\n\nis a GME mashup. You can directly reference a KML file to the mashup by adding kml= as a parameter in the URL, like this:\n\n\u003cbr /\u003e\n\n\u003chttp://param.googlemashups.com/?kml=http://mapgadgets.googlepages.com/cta.kml\u003e \n\nYou can also create a [Gadget](http://www.google.com/apis/gadgets/) from your project. Once you've submitted it, go to the file menu and click on Submit Gadget, and follow the directions. This will allow you to easily add your application to your [Google personalized home page](http://www.google.com/ig), on other web pages, and to share it with others.\n\n\u003cbr /\u003e"]]
