Вступление
Google Mashup Editor (GME) — один из самых долгожданных и полезных инструментов для разработчиков мэшапов. GME помогает разработчикам создавать и редактировать динамические компоненты веб-страниц, такие как карты, таблицы, списки и другие элементы, на основе связей с внешними данными. Затем эти элементы могут быть включены в веб-страницы и блоги с помощью iframe.В этом руководстве показано, как включить файл KML в карту, созданную с помощью GME.
Мои первые впечатления от Google Mashup Editor
- Он предельно прост, с чистым и четким интерфейсом, как и большинство продуктов Google.
- Имеет удобный индекс проектов с постоянно пополняющейся коллекцией примеров кода, а также авторского кода.
- Это позволяет легко хранить дополнительные ресурсы проекта (например, файлы изображений).
- Он имеет простой в использовании XML-отладчик.
- Он имеет множество простых в использовании примеров приложений.
GME для разработчиков KML
До появления Интернета пространственные данные традиционно было трудно обменивать. Однако с развитием Интернета картографические приложения стали стандартным способом простого обмена данными географических информационных систем (ГИС) со всем миром. KML становится стандартом для представления и обмена данными ГИС, поскольку он компактен, прост в разработке и поддерживается популярными приложениями, такими как Google Earth и Google Maps.
До недавнего времени процесс создания и редактирования страниц на основе JavaScript был большой проблемой для KML-разработчиков. Потребовалось большое количество дополнительных шагов для создания мэшапа и его отладки. GME позволяет очень быстро создать мэшап на основе KML из нескольких основных компонентов. Процесс создания не требует специальных знаний HTML или JavaScript. Примеров проектов GME достаточно для начала работы.
В следующем примере я буду использовать файл KML, который указывает на коллекцию фотографий, сделанных во время полетов Pict Earth USA .
Это снимок мэшапа карт Pict Earth:
Вот шаги для интеграции файла KML в проект GME с помощью API Карт Google:
Шаг 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" authentication="false" onload= " kmlPE() "></гм:страница>
Шаг 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. Опубликуйте мэшап
Задайте имя проекта, а затем опубликуйте его. Это даст вам постоянную ссылку на ваш mashup, которую вы можете использовать для включения его в веб-страницы. В моем примере это ссылка на домашнюю страницу проекта 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 , в котором подробно описан процесс создания мэшапов. Кроме того, ознакомьтесь со списком тегов для краткого описания всех тегов 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>
Что дальше?
После того как вы опубликовали свой мэшап, вы можете использовать файл KML в нем в качестве параметра для включения в другое приложение или загрузить непосредственно как карту. Например, эта страница:
http://param.googlemashups.com представляет собой мэшап GME. Вы можете напрямую сослаться на файл KML в мэшапе, добавив kml= в качестве параметра в URL-адрес, например: http://param.googlemashups.com/?kml=http://mapgadgets.googlepages.com/cta.kmlВы также можете создать гаджет из своего проекта. После того, как вы отправили его, перейдите в меню «Файл», нажмите «Отправить гаджет» и следуйте инструкциям. Это позволит вам легко добавить свое приложение на вашу персонализированную домашнюю страницу Google , на другие веб-страницы и поделиться им с другими.