שימוש ב-KML ב-Google Mashup Editor

ולרי הורנסוב, מפתח KML, אוניברסיטת פרם, רוסיה

מבוא

Google Mashup Editor (GME) הוא אחד מהכלים המיושנים והמועילים ביותר למפתחים למיזוג תכנים. GME עוזר למפתחים ליצור ולערוך רכיבים דינמיים בדפי אינטרנט, כמו מפות, טבלאות, רשימות ורכיבים אחרים, על סמך חיבורים עם נתונים חיצוניים. לאחר מכן תוכלו לכלול את הרכיבים האלה בדפי אינטרנט ובבלוגים באמצעות iframe.

במדריך הזה תלמדו איך לשלב קובץ KML במפה שנוצרה באמצעות GME.


החשיפות הראשונות שלי ב-Google Mashup Editor

  • הוא כולל פשטות מוחלטת, עם ממשק נקי וייחודי, כמו רוב המוצרים של Google.
  • יש לו אינדקס פרויקטים נוח עם אוסף דוגמאות גדל והולך וגדל, וכן את הקוד של המחבר.
  • כך אפשר לאחסן בקלות משאבים נוספים בפרויקט (כמו קובצי תמונות).
  • זהו כלי לניפוי באגים נוח לשימוש ב-XML.
  • הוא כולל אפליקציות לדוגמה רבות וקלות לשימוש.

GME למפתחי KML

לפני תחילת האינטרנט, היה קשה לשתף נתונים מרחביים. עם זאת, בעקבות התפתחות האינטרנט, אפליקציות מיפוי הפכו לדרך רגילה לשתף עם העולם נתונים של מערכות מידע גיאוגרפי (GIS). KML הוא תקן להצגה ולהחלפה של נתוני GIS כי הוא קומפקטי וקל לפיתוח, והוא נתמך על ידי אפליקציות פופולריות כמו Google Earth ומפות Google.


עד לאחרונה, תהליך היצירה והעריכה של דפים על סמך JavaScript היה בעיה גדולה למפתחי KML. היה צורך במספר גדול של שלבים נוספים כדי ליצור mashup וניפוי באגים. בעזרת GME אפשר ליצור mashup המבוסס על KML במהירות רבה, מתוך מספר רכיבים בסיסיים. לתהליך היצירה לא נדרש ידע מיוחד ב-HTML או ב-JavaScript. הפרויקטים לדוגמה ב-GME מספקים את כל מה שצריך כדי להתחיל.

בדוגמה הבאה, אשתמש בקובץ KML שמצביע על אוסף התמונות שצולמו בטיסות Pit Earth.


זוהי תמונת מצב של המיזוג של מפות Pict Earth:
תמונה של תמהיל ה-Earth משולב

כדי לשלב קובץ KML בפרויקט GME באמצעות ה-API של מפות Google:


שלב 1: בחירת קובץ ה-KML
שלב 2: יצירה של פרויקט GME חדש
שלב 3: יצירת פונקציה להוספת ה-KML
שלב 4: הוספת מפה
שלב 5: בדיקת ה-Mashup
שלב 1: פרסום המכונה 1 the1{/1 1

שלב 1: בחירת קובץ ה-KML

בחרו את קובץ ה-KML שתרצו להוסיף למפה. ניתן להשתמש בכל תכונה שיש לה תמיכה בתכונות במפות Google. הוא צריך להתארח בשרת זמין לציבור.


שלב 2: יצירת פרויקט GME חדש

יצירת פרויקט GME ריק חדש.

כך נראה פרויקט GME ריק:

פרויקט GME ריק

קראו לפונקציה באמצעות שם וכותרת.

<gm:page title="Pict Earth missions" verification="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: בודקים את ה-mashup.

לוחצים על לחצן הבדיקה (F4).

זוהי תמונה של השילוב של Pict Earth שנבדק בארגז החול.

פיתוח תמונות משולבות של Earth ב-Sandbox

עכשיו נוכל לאמת את הטקסט של האפליקציה ולראות את התוצאה הראשונה. אנחנו יכולים להוסיף כותרת וקישורים ולבדוק אותם שוב.


שלב 6: פרסום של השילוב

מגדירים את שם הפרויקט ומפרסמים אותו. כך תקבלו קישור קבוע ל-mashup שלכם, ותוכלו להשתמש בו כדי לשלב אותו בדפי אינטרנט. בדוגמה הזו, זהו הקישור אל דף הבית של פרויקט GME. תוכלו גם לראות קוד מקור של הפרויקט.


שלב 7: הוסיפו את ה-mashup לדף אינטרנט

הוספת ה-mashup לדף אינטרנט באמצעות 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>


פרסם את ה-mashup שלך ב-GME Mashup Gallery. זה יאפשר למשתמשים אחרים לראות את ה-mashup שלך.



לקבלת מידע נוסף:

תוכלו להיעזר במדריך לתחילת העבודה ב-Google Mashup Editor, שמציג בפירוט את תהליך היצירה של 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 ל-mashup על ידי הוספת KML= כפרמטר בכתובת האתר. כך עושים זאת:

http://param.googlemashups.com/?KML=http://mapgadgets.googlepages.com/cta.KML

אתם יכולים גם ליצור גאדג'ט מהפרויקט. לאחר שליחתה, עוברים אל תפריט הקובץ, לוחצים על 'שליחת גאדג'ט' ופועלים לפי ההוראות. כך תוכלו להוסיף בקלות את האפליקציה לדף הבית המותאם אישית של Google, לדפי אינטרנט אחרים ולשתף אותה עם אחרים.