שימוש ב-KML ב-Google Mashup Editor
קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
ולרי חרונוסוב (Valery Hronusov), מפתח KML,
אוניברסיטת פרם סטייט, רוסיה
מבוא
Google Mashup Editor (GME) הוא אחד הכלים המועילים ביותר למפתחי מאשאפים, והוא היה צפוי כבר זמן רב. GME עוזר למפתחים ליצור ולערוך רכיבים דינמיים
בדפי אינטרנט, כמו מפות, טבלאות, רשימות ורכיבים אחרים, על סמך חיבורים לנתונים חיצוניים. אחר כך אפשר לכלול את הרכיבים האלה בדפי אינטרנט ובבלוגים באמצעות iframe.
במדריך הזה נסביר איך לשלב קובץ KML במפה שנוצרה באמצעות GME.
התרשמות ראשונית מ-Google Mashup Editor
- הוא פשוט מאוד, עם ממשק נקי וברור, כמו רוב מוצרי Google.
- יש בו אינדקס פרויקטים נוח עם אוסף הולך וגדל של דוגמאות קוד, וגם קוד המחבר.
- היא מאפשרת לאחסן בקלות משאבים נוספים בפרויקט (כמו קובצי תמונות).
- יש בו כלי לניפוי באגים ב-XML שקל לשימוש.
- יש בו הרבה אפליקציות לדוגמה שקל להשתמש בהן.
GME for KML Developers
לפני שהאינטרנט נכנס לחיינו, היה קשה לשתף נתונים מרחביים. עם זאת, עם התפתחות האינטרנט, אפליקציות מיפוי הפכו לדרך סטנדרטית לשיתוף קל של נתונים של מערכות מידע גיאוגרפי (GIS) עם העולם. פורמט KML הופך לסטנדרט להצגה ולהחלפה של נתונים של מערכות מידע גיאוגרפי (GIS) כי הוא קומפקטי, קל לפיתוח ונתמך על ידי אפליקציות פופולריות כמו Google Earth ו-Google Maps.
עד לאחרונה, תהליך היצירה והעריכה של דפים שמבוססים על JavaScript היה בעייתי מאוד למפתחי KML. נדרשו הרבה שלבים נוספים כדי ליצור מיקס ולנפות באגים. GME מאפשר ליצור במהירות רבה מאש-אפ מבוסס-KML מכמה רכיבים בסיסיים. תהליך היצירה לא דורש ידע מיוחד ב-HTML או ב-JavaScript. פרויקטי הדוגמה של GME מספקים מספיק מידע כדי להתחיל.
בדוגמה הבאה, אשתמש בקובץ KML שמפנה אל אוסף התמונות שצולמו במהלך טיסות של Pict Earth USA.
זו תמונה של מיזוג המפות של Pict Earth:
כדי לשלב קובץ KML בפרויקט GME באמצעות Google Maps API, צריך לבצע את השלבים הבאים:
שלב 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
יוצרים פונקציית JavaScript עם הנתיב לקובץ ה-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 Analytics לפרויקט, כדי לעקוב אחרי נתונים סטטיסטיים לגבי מי שצופה בדף. הנה סקריפט פשוט להוספה:
<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 Mashup Editor, שבו מוסבר בפירוט איך ליצור מאשאפים. כדאי גם לעיין ברשימת התגים כדי לקבל תיאור קצר של כל תגי gm עם דוגמאות.
קוד:
זהו הקוד המלא לשימוש ב-KML של Pict Earth ב-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>
מה השלב הבא?
אחרי שמפרסמים את המאשאפ, אפשר להשתמש בקובץ ה-KML שבו כפרמטר שיכלל באפליקציה אחרת, או לטעון אותו ישירות כמפה. לדוגמה, הדף הזה:
http://param.googlemashups.com
הוא שילוב של GME. אפשר להפנות ישירות לקובץ KML ב-mashup על ידי הוספת kml= כפרמטר בכתובת ה-URL, כך:
http://param.googlemashups.com/?kml=http://mapgadgets.googlepages.com/cta.kml
אפשר גם ליצור גאדג'ט מהפרויקט. אחרי ששולחים אותו, עוברים לתפריט הקובץ, לוחצים על 'שליחת הגאדג'ט' ופועלים לפי ההוראות. כך תוכלו להוסיף בקלות את האפליקציה לדף הבית המותאם אישית שלכם ב-Google, לדפי אינטרנט אחרים ולשתף אותה עם אחרים.
אלא אם צוין אחרת, התוכן של דף זה הוא ברישיון Creative Commons Attribution 4.0 ודוגמאות הקוד הן ברישיון Apache 2.0. לפרטים, ניתן לעיין במדיניות האתר Google Developers. Java הוא סימן מסחרי רשום של חברת 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"]]
