Introducción
Google Mashup Editor (GME) es una de las herramientas más esperadas y útiles para los desarrolladores de mashup. GME ayuda a los desarrolladores a crear y editar componentes dinámicos en páginas web, como mapas, tablas, listas y otros elementos, en función de las conexiones con datos externos. Estos elementos se pueden incluir en páginas web y blogs mediante un iframe.En este instructivo, se explica cómo incorporar un archivo KML en un mapa creado con GME.
Mis primeras impresiones de Google Mashup Editor
- Tiene la máxima sencillez, con una interfaz limpia y distintiva, como la mayoría de los productos de Google.
- Tiene un índice de proyecto conveniente con una colección de ejemplos de código en constante aumento, así como el código del autor.
- Permite el almacenamiento fácil de recursos adicionales para el proyecto (como archivos de imagen).
- Tiene un depurador XML fácil de usar.
- Tiene muchas aplicaciones de muestra fáciles de usar.
GME para desarrolladores de KML
Antes de la llegada de Internet, era difícil compartir los datos espaciales. Sin embargo, con el desarrollo de Internet, las aplicaciones de mapas se convirtieron en una forma estándar de compartir fácilmente datos de sistemas de información geográfica (GIS) con el mundo. KML se está convirtiendo en un estándar para la presentación y el intercambio de datos GIS, ya que es compacto, fácil de desarrollar y es compatible con aplicaciones populares como Google Earth y Google Maps.
Hasta hace poco tiempo, el proceso de creación y edición de páginas basadas en JavaScript era un gran problema para los desarrolladores de KML. Se requerían una gran cantidad de pasos adicionales para crear un mashup y depurarlo. GME permite crear un mashup basado en KML muy rápidamente a partir de algunos componentes básicos. El proceso de creación no requiere conocimientos especiales de HTML o JavaScript. Los proyectos de muestra de GME proporcionan lo suficiente para comenzar.
En el siguiente ejemplo, se usa un archivo KML que apunta a la colección de las fotografías tomadas durante los vuelos de Pict Earth, EE.UU.
Este es un resumen del mashup de mapas de Pict Earth:
A continuación, se indican los pasos que debes seguir para integrar un archivo KML a un proyecto de GME mediante la API de Google Maps:
Paso 1: Selecciona el archivo KML
Paso 2: Crea un nuevo proyecto de GME
Paso 3: Crea una función para agregar la KML
Paso 4: Agrega un mapa
Paso 5: Prueba la mashup
Paso 1: Selecciona el archivo KML
Selecciona el archivo KML que deseas agregar a tu mapa. Puede ser cualquier elemento que tenga elementos compatibles con Google Maps. Debe estar alojado en un servidor disponible de forma pública.
Paso 2: Crea un nuevo proyecto de GME
Crea un nuevo proyecto de GME en blanco.
Así se ve un proyecto de GME en blanco:
Agrega un título y un nombre para tu función.
<gm:page title="misiones de Earth Pic"authenticate="false" onload="kmlPE()"></gm:page>
Paso 3: Crea una función para agregar el archivo KML
Crea una función de JavaScript con la ruta al archivo KML que se agregará al mapa.
<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>
Paso 4: Agrega un mapa
Agrega un mapa y parámetros.
<gm:map id="map" height="400px" width="400px" lat="32.9393" lng="-117.206" zoom="9" maptypes="true"/>
Paso 5: Pruebe el mashup.
Presiona el botón Test (F4).
Esta es una imagen del mashup de Pict Earth que se probó en la zona de pruebas.
Ahora podemos verificar el texto de la aplicación y ver el primer resultado. Podemos agregar un título y vínculos, y volver a probarlo.
Paso 6: Publica el mashup
Establece el nombre del proyecto y, luego, publícalo. Esto te dará un vínculo permanente a tu mashup, que puedes usar para incorporarlo en páginas web. En mi ejemplo, este es el vínculo a la página principal del proyecto de GME. También puedes ver el código fuente del proyecto.
Paso 7: Agrega el mashup a una página web
Agrega el mashup a una página web mediante un iframe. Por ejemplo, para insertar el proyecto de ejemplo, agrega lo siguiente:
<iframe style="WIDTH: 439px; HEIGHT: 491px" src="http://pemissions.googlemashups.com/" frameborder="0"></iframe>
Estos son algunos ejemplos del mashup en una página web y un blog.
También puedes agregar tu código de Google Analytics al proyecto, lo que te permitirá realizar un seguimiento de las estadísticas sobre quién ve tu página. Esta es una secuencia de comandos simple para agregarla:
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">uacct = "youraccountnumber";urchinTracker();</script>
Paso 8: Colocarlo en la Galería de GME
Publica tu mashup en la Galería de Mashup de GME. Esto permitirá que otros usuarios vean tu mashup.
Para obtener más información, siga estas sugerencias:
Consulta la Guía de introducción del editor de masas de Google, que presenta en detalle el proceso de creación de mashups. También puedes consultar la lista de etiquetas para obtener una breve descripción de todas las etiquetas de GCM con ejemplos.
Código:
Este es el código completo para usar el KML de Pict Earth en 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>
¿Qué sigue?
Una vez que hayas publicado tu mashup, puedes usar el archivo KML como parámetro para incluirlo en otra aplicación o cargarlo directamente como un mapa. Por ejemplo, en esta página:
http://param.googlemashups.comj es un mashup de GME. Puedes hacer referencia directamente a un archivo KML al mashup. Para ello, agrega kml= como parámetro en la URL, de esta manera: http://param.googlemashups.com/?kml=http://mapgadgets.googlepages.com/cta.kmlTambién puedes crear un Gadget desde tu proyecto. Una vez que la hayas enviado, ve al menú Archivo, haz clic en Enviar gadget y sigue las instrucciones. Esto le permitirá agregar fácilmente su aplicación a su página principal personalizada de Google, en otras páginas web, y compartirla con otros.