استخدام KML في Google Mashup Editor
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
"فاليري خرونوسوف"، مطوّر ملفات KML،
جامعة بيرم الحكومية، روسيا
مقدمة
Google Mashup Editor (GME) هي إحدى الأدوات الأكثر انتظارًا والأكثر فائدة للمطوّرين الذين يستخدمون أسلوب المزج. تساعد GME المطوّرين في إنشاء وتعديل المكوّنات الديناميكية
في صفحات الويب، مثل الخرائط والجداول والقوائم والعناصر الأخرى، استنادًا إلى عمليات الربط بالبيانات الخارجية. ويمكن بعد ذلك تضمين هذه العناصر في صفحات الويب والمدوّنات باستخدام إطار iframe.
سيوضّح لك هذا البرنامج التعليمي كيفية دمج ملف KML في خريطة تم إنشاؤها باستخدام GME.
انطباعاتي الأولى عن Google Mashup Editor
- يتميّز هذا التطبيق ببساطته الشديدة، إذ يتضمّن واجهة واضحة ومميّزة، مثل معظم منتجات Google.
- يتضمّن فهرسًا مناسبًا للمشاريع مع مجموعة متزايدة باستمرار من أمثلة الرموز، بالإضافة إلى رمز المؤلّف.
- ويتيح تخزين موارد إضافية للمشروع بسهولة (مثل ملفات الصور).
- تتضمّن هذه الأداة برنامج تصحيح أخطاء XML سهل الاستخدام.
- ويتضمّن العديد من التطبيقات النموذجية سهلة الاستخدام.
GME for KML Developers
قبل ظهور الإنترنت، كان من الصعب عادةً مشاركة البيانات المكانية. ومع ذلك، ومع تطوّر الإنترنت، أصبحت تطبيقات الخرائط طريقة معيارية لمشاركة بيانات نظم المعلومات الجغرافية (GIS) بسهولة مع العالم. أصبح تنسيق KML معيارًا لعرض بيانات نظم المعلومات الجغرافية وتبادلها، وذلك لأنّه مضغوط وسهل التطوير ومتوافق مع تطبيقات رائجة مثل Google Earth و"خرائط Google".
حتى وقت قريب، كانت عملية إنشاء صفحات وتعديلها استنادًا إلى JavaScript تشكّل مشكلة كبيرة لمطوّري ملفات KML. وكان يتطلّب عددًا كبيرًا من الخطوات الإضافية لإنشاء مقطع ريمكس وتصحيح الأخطاء فيه. تتيح GME إنشاء تركيبة مستندة إلى KML بسرعة كبيرة من خلال بضعة مكوّنات أساسية. لا تتطلّب عملية الإنشاء معرفة
خاصة بلغتَي HTML
أو JavaScript. توفّر المشاريع النموذجية في "محرك ألعاب Google" ما يكفي للبدء.
في المثال التالي، سأستخدم ملف KML يشير إلى مجموعة الصور التي تم التقاطها خلال رحلات Pict Earth
في الولايات المتحدة.
هذه لقطة من تطبيق الويب المركّب لخرائط Pict Earth:
في ما يلي الخطوات اللازمة لدمج ملف KML في مشروع GME باستخدام Google Maps API:
الخطوة 1: اختيار ملف KML
الخطوة 2: إنشاء مشروع جديد في "خرائط Google"
الخطوة 3: إنشاء دالة لإضافة ملف KML
الخطوة 4: إضافة خريطة
الخطوة 5: اختبار الخريطة المركّبة
الخطوة 6: نشر الخريطة المركّبة
الخطوة 7: إضافة الخريطة المركّبة إلى صفحة ويب
الخطوة 8: وضعها في معرض "خرائط Google"
الخطوة 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 الذي تم اختباره في
Sandbox.
يمكننا الآن التحقّق من نص التطبيق والاطّلاع على النتيجة الأولى. يمكننا إضافة عنوان وروابط ثم إعادة الاختبار.
الخطوة 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 مع
أمثلة.
الرمز:
في ما يلي الرمز الكامل لاستخدام ملف 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 في الخريطة المركّبة من خلال إضافة 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 (حسب التوقيت العالمي المتفَّق عليه)
[null,null,["تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)"],[[["\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"]]
