Sử dụng KML trong Google Mashup Editor
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Valery Hronusov, Nhà phát triển KML, Đại học Perm State, Nga
Giới thiệu
Google Mashup Editor (GME) là một trong những công cụ hữu ích và được chờ đợi nhất đối với các nhà phát triển ứng dụng kết hợp. GME giúp nhà phát triển tạo và chỉnh sửa các thành phần động trong trang web, chẳng hạn như bản đồ, bảng, danh sách và các phần tử khác, dựa trên các mối kết nối với dữ liệu bên ngoài. Sau đó, bạn có thể thêm các phần tử này vào các trang web và blog bằng cách sử dụng iframe.
Hướng dẫn này sẽ hướng dẫn bạn cách kết hợp một tệp KML vào một Bản đồ được tạo bằng GME.
Ấn tượng đầu tiên của tôi về Google Mashup Editor
- Ứng dụng này có giao diện đơn giản, rõ ràng và riêng biệt, giống như hầu hết các sản phẩm của Google.
- Thư viện này có một chỉ mục dự án thuận tiện với một bộ sưu tập các ví dụ về mã không ngừng tăng lên, cũng như mã của tác giả.
- Thư mục này giúp bạn dễ dàng lưu trữ các tài nguyên bổ sung cho dự án (chẳng hạn như tệp hình ảnh).
- Công cụ này có trình gỡ lỗi XML dễ sử dụng.
- Nền tảng này có nhiều ứng dụng mẫu dễ sử dụng.
GME dành cho nhà phát triển KML
Trước khi có Internet, dữ liệu không gian thường khó chia sẻ. Tuy nhiên, với sự phát triển của Internet, các ứng dụng lập bản đồ đã trở thành một phương thức tiêu chuẩn để dễ dàng chia sẻ dữ liệu Hệ thống thông tin địa lý (GIS) với thế giới. KML đang trở thành một tiêu chuẩn để trình bày và trao đổi dữ liệu GIS vì có kích thước nhỏ gọn, dễ phát triển và được hỗ trợ bởi các ứng dụng phổ biến như Google Earth và Google Maps.
Cho đến gần đây, quy trình tạo và chỉnh sửa các trang dựa trên JavaScript là một vấn đề lớn đối với các nhà phát triển KML. Bạn cần thực hiện thêm nhiều bước để tạo và gỡ lỗi một bản kết hợp. GME cho phép tạo một ứng dụng kết hợp dựa trên KML rất nhanh chóng từ một số thành phần cơ bản. Quá trình tạo không yêu cầu kiến thức đặc biệt về HTML hoặc JavaScript. Các dự án mẫu GME cung cấp đủ thông tin để bạn bắt đầu.
Trong ví dụ sau, tôi sẽ sử dụng một tệp KML trỏ đến bộ sưu tập ảnh chụp trong các chuyến bay Pict Earth USA.
Đây là ảnh chụp nhanh ứng dụng kết hợp dữ liệu bản đồ Pict Earth:
Sau đây là các bước để tích hợp tệp KML vào một dự án GME bằng Google Maps API:
Bước 1: Chọn tệp KML
Bước 2: Tạo một dự án GME mới
Bước 3: Tạo một hàm để thêm KML
Bước 4: Thêm bản đồ
Bước 5: Kiểm thử bản kết hợp
Bước 6: Xuất bản bản kết hợp
Bước 7: Thêm bản kết hợp vào một trang web
Bước 8: Đưa bản kết hợp vào thư viện GME
Bước 1: Chọn tệp KML
Chọn tệp KML mà bạn muốn thêm vào Bản đồ. Đây có thể là bất cứ thứ gì có các tính năng được hỗ trợ trong Google Maps. Tệp này phải được lưu trữ trên một máy chủ công khai.
Bước 2: Tạo một dự án GME mới
Tạo một dự án GME trống mới.
Đây là giao diện của một dự án GME trống:
Thêm tiêu đề và tên cho hàm của bạn.
<gm:page
title="Pict Earth
missions" authenticate="false"
onload="kmlPE()">
</gm:page>
Bước 3: Tạo một hàm để thêm KML
Tạo một hàm JavaScript có đường dẫn đến tệp KML cần thêm vào Bản đồ.
<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>
Bước 4: Thêm bản đồ
Thêm bản đồ và các tham số.
<gm:map id="map" height="400px" width="400px" lat="32.9393" lng="-117.206" zoom="9" maptypes="true"/>
Bước 5: Kiểm thử bản kết hợp.
Nhấn nút Kiểm thử (F4).
Đây là hình ảnh về bản kết hợp Pict Earth được thử nghiệm trong Hộp cát.
Giờ đây, chúng ta có thể xác minh văn bản của ứng dụng và xem kết quả đầu tiên. Chúng ta có thể thêm tiêu đề và đường liên kết rồi kiểm tra lại.
Bước 6: Xuất bản bản kết hợp
Đặt tên cho dự án rồi xuất bản dự án đó. Thao tác này sẽ tạo cho bạn một đường liên kết cố định đến bản kết hợp. Bạn có thể dùng đường liên kết này để đưa bản kết hợp vào các trang web. Theo ví dụ của tôi, đây là đường liên kết đến trang chủ của dự án GME. Bạn cũng có thể xem mã nguồn của dự án.
Bước 7: Thêm bản kết hợp vào một trang web
Thêm bản kết hợp vào một trang web bằng iframe. Ví dụ: để chèn dự án mẫu, hãy thêm nội dung sau:
<iframe style="WIDTH: 439px; HEIGHT: 491px" src="http://pemissions.googlemashups.com/" frameborder="0"></iframe>
Sau đây là ví dụ về bản kết hợp trong một trang web và một blog.
Bạn cũng có thể thêm mã Google Analytics vào dự án. Mã này sẽ cho phép bạn theo dõi số liệu thống kê về những người đang xem trang của bạn. Sau đây là tập lệnh đơn giản để thêm:
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">uacct = "youraccountnumber";urchinTracker();</script>
Bước 8: Đưa vào Thư viện GME
Xuất bản bản kết hợp của bạn lên Thư viện bản kết hợp của GME.
Thao tác này sẽ cho phép những người dùng khác xem bản kết hợp của bạn.
Hãy xem Hướng dẫn bắt đầu sử dụng Google Mashup Editor. Hướng dẫn này trình bày chi tiết quy trình tạo các ứng dụng kết hợp. Ngoài ra, hãy xem danh sách thẻ để biết nội dung mô tả ngắn về tất cả các thẻ gm kèm theo ví dụ.
Mã:
Sau đây là toàn bộ mã để sử dụng KML của Pict Earth trong GME:
<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>
Tiếp theo là gì?
Sau khi xuất bản bản kết hợp, bạn có thể sử dụng tệp KML trong đó làm một tham số để đưa vào một ứng dụng khác hoặc tải trực tiếp dưới dạng bản đồ. Ví dụ: trang này:
http://param.googlemashups.com
là một ứng dụng kết hợp dữ liệu GME. Bạn có thể tham chiếu trực tiếp một tệp KML đến ứng dụng kết hợp dữ liệu bằng cách thêm kml= làm tham số trong URL, như sau:
http://param.googlemashups.com/?kml=http://mapgadgets.googlepages.com/cta.kml
Bạn cũng có thể tạo một Tiện ích trong dự án của mình. Sau khi bạn gửi tệp, hãy chuyển đến trình đơn tệp rồi nhấp vào Gửi tiện ích và làm theo hướng dẫn. Nhờ đó, bạn có thể dễ dàng thêm ứng dụng của mình vào trang chủ được cá nhân hoá trên Google, trên các trang web khác và chia sẻ ứng dụng đó với người khác.
Trừ phi có lưu ý khác, nội dung của trang này được cấp phép theo Giấy phép ghi nhận tác giả 4.0 của Creative Commons và các mẫu mã lập trình được cấp phép theo Giấy phép Apache 2.0. Để biết thông tin chi tiết, vui lòng tham khảo Chính sách trang web của Google Developers. Java là nhãn hiệu đã đăng ký của Oracle và/hoặc các đơn vị liên kết với Oracle.
Cập nhật lần gần đây nhất: 2025-07-27 UTC.
[null,null,["Cập nhật lần gần đây nhất: 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"]]
