استفاده از KML در Google Mashup Editor
با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
والری هرونوسوف، توسعه دهنده KML، دانشگاه ایالتی پرم، روسیه مقدمه
Google Mashup Editor (GME) یکی از ابزارهای مورد انتظار و مفید برای توسعه دهندگان mashup است. GME به توسعه دهندگان کمک می کند تا بر اساس ارتباط با داده های خارجی، اجزای پویا را در صفحات وب مانند نقشه ها، جداول، فهرست ها و سایر عناصر ایجاد و ویرایش کنند. سپس می توان این عناصر را با استفاده از iframe در صفحات وب و وبلاگ ها گنجاند.
این آموزش به شما نشان می دهد که چگونه یک فایل KML را در نقشه ایجاد شده با GME قرار دهید.
اولین برداشت من از Google Mashup Editor
- این بسیار سادگی، با رابط تمیز و متمایز، مانند اکثر محصولات Google، دارد.
- دارای یک فهرست پروژه مناسب با مجموعه ای از نمونه های کد به طور مداوم در حال افزایش و همچنین کد نویسنده است.
- این امکان ذخیره سازی آسان منابع اضافی را برای پروژه (مانند فایل های تصویری) فراهم می کند.
- دارای یک دیباگر XML با کاربری آسان است.
- این دارای تعداد زیادی از برنامه های کاربردی نمونه با استفاده آسان است.
GME برای توسعه دهندگان KML
قبل از ظهور اینترنت، اشتراک گذاری داده های مکانی به طور سنتی دشوار بود. با این حال، با توسعه اینترنت، برنامه های کاربردی نقشه برداری به یک روش استاندارد برای به اشتراک گذاری آسان داده های سیستم های اطلاعات جغرافیایی (GIS) با جهان تبدیل شد. KML در حال تبدیل شدن به استانداردی برای ارائه و تبادل داده های GIS است، زیرا فشرده است، توسعه آن آسان است و توسط برنامه های کاربردی محبوب مانند Google Earth و Google Maps پشتیبانی می شود.
تا همین اواخر، فرآیند ایجاد و ویرایش صفحات بر اساس جاوا اسکریپت یک مشکل بزرگ برای توسعه دهندگان KML بود. برای ایجاد mashup و اشکال زدایی آن به تعداد زیادی مراحل اضافی نیاز داشت. GME ایجاد یک mashup مبتنی بر KML را به سرعت از چند مؤلفه اساسی امکان پذیر می کند. فرآیند ایجاد نیازی به دانش خاصی از HTML یا جاوا اسکریپت ندارد. پروژه های نمونه GME به اندازه کافی برای شروع ارائه می کنند.
در مثال زیر، من از یک فایل KML استفاده خواهم کرد که به مجموعه عکس های گرفته شده در طول پروازهای Pict Earth ایالات متحده اشاره می کند.
این یک عکس فوری از Mashup نقشه های Pict Earth است:
در اینجا مراحل ادغام یک فایل KML در یک پروژه GME با استفاده از Google Maps API آمده است:
مرحله 1: فایل KML را انتخاب کنید مرحله 2: یک پروژه جدید GME ایجاد کنید مرحله 3: یک تابع برای افزودن KML ایجاد کنید مرحله 4: یک نقشه اضافه کنید مرحله 5: mashup را تست کنید مرحله 6: Mashup را منتشر کنید مرحله 7: mashup را به یک صفحه وب اضافه کنید مرحله 8: آن را در گالری GME قرار دهید
مرحله 1: فایل KML را انتخاب کنید
فایل KML را که می خواهید به نقشه خود اضافه کنید انتخاب کنید. این می تواند هر چیزی باشد که دارای ویژگی های پشتیبانی شده در Google Maps باشد. باید روی یک سرور در دسترس عموم میزبانی شود.
مرحله 2: یک پروژه جدید GME ایجاد کنید
یک پروژه GME خالی جدید ایجاد کنید.
این چیزی است که یک پروژه GME خالی به نظر می رسد:
یک عنوان و یک نام برای تابع خود اضافه کنید.
<gm:page title= "تصویر ماموریت های زمین" 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: mashup را تست کنید.
دکمه تست (F4) را فشار دهید.
این تصویری از ترکیب Pict Earth است که در Sandbox آزمایش شده است.
اکنون می توانیم متن برنامه را بررسی کنیم و اولین نتیجه را ببینیم. می‌توانیم یک عنوان و پیوند اضافه کنیم و دوباره آن را آزمایش کنیم.
مرحله 6: انتشار mashup
نام پروژه را تنظیم کنید و سپس آن را منتشر کنید. این به شما یک پیوند دائمی به mashup خود می دهد که می توانید از آن برای ترکیب آن در صفحات وب استفاده کنید. با استفاده از مثال من، این پیوند به صفحه اصلی پروژه GME است. همچنین می توانید کد منبع پروژه را مشاهده کنید.
مرحله 7: اضافه کردن mashup به یک صفحه وب
با استفاده از iframe، mashup را به یک صفحه وب اضافه کنید. به عنوان مثال، برای درج پروژه نمونه، این را اضافه کنید:
<iframe style="WIDTH: 439px; HEIGHT: 491px" src="http://pemissions.googlemashups.com/" frameborder="0"></iframe>
در اینجا نمونه هایی از mashup در یک صفحه وب و یک وبلاگ آورده شده است.
همچنین می‌توانید کد 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 قرار دهید.
Mashup خود را در گالری GME Mashup منتشر کنید. این به سایر کاربران اجازه می دهد تا mashup شما را مشاهده کنند.
راهنمای شروع ویرایشگر Google Mashup را بررسی کنید، که به طور مفصل روند ایجاد mashup ها را ارائه می دهد. همچنین، فهرست برچسب‌ها را برای توضیح مختصری از همه تگ‌های gm همراه با مثال بررسی کنید.
کد:
در اینجا کل کد استفاده از Pict Earth KML در 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>
بعدش چی؟
هنگامی که mashup خود را منتشر کردید، می توانید از فایل KML موجود در آن به عنوان پارامتری برای گنجاندن در برنامه دیگری استفاده کنید یا مستقیماً به عنوان نقشه بارگیری شود. به عنوان مثال، این صفحه:
http://param.googlemashups.com یک ترکیب GME است. می‌توانید با افزودن kml= به‌عنوان پارامتر در URL، مستقیماً یک فایل KML را به mashup ارجاع دهید، مانند این: http://param.googlemashups.com/?kml=http://mapgadgets.googlepages.com/cta.kml
شما همچنین می توانید یک ابزارک از پروژه خود ایجاد کنید. هنگامی که آن را ارسال کردید، به منوی فایل بروید و روی Submit Gadget کلیک کنید و دستورالعمل ها را دنبال کنید. این به شما این امکان را می دهد که به راحتی برنامه خود را به صفحه اصلی شخصی سازی شده Google خود، در سایر صفحات وب اضافه کنید و آن را با دیگران به اشتراک بگذارید.
جز در مواردی که غیر از این ذکر شده باشد،محتوای این صفحه تحت مجوز Creative Commons Attribution 4.0 License است. نمونه کدها نیز دارای مجوز Apache 2.0 License است. برای اطلاع از جزئیات، به خطمشیهای سایت Google Developers مراجعه کنید. جاوا علامت تجاری ثبتشده Oracle و/یا شرکتهای وابسته به آن است.
تاریخ آخرین بهروزرسانی 2025-07-24 بهوقت ساعت هماهنگ جهانی.
[null,null,["تاریخ آخرین بهروزرسانی 2025-07-24 بهوقت ساعت هماهنگ جهانی."],[[["\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"]]
