Introdução
O Google Mashup Editor (GME) é uma das ferramentas mais esperadas e úteis para desenvolvedores de mashup. O GME ajuda os desenvolvedores a criar e editar componentes dinâmicos em páginas da Web, como mapas, tabelas, listas e outros elementos, com base em conexões com dados externos. Esses elementos podem ser incluídos em páginas da Web e blogs usando um iframe.Neste tutorial, mostramos como incorporar um arquivo KML a um mapa criado com o GME.
Minhas primeiras impressões do Editor de mashup do Google
- Ele tem a máxima simplicidade, com uma interface limpa e distinta, como a maioria dos produtos do Google.
- Ele tem um índice de projeto conveniente com um conjunto em constante crescimento de exemplos de código, além do código do autor.
- Isso facilita o armazenamento de recursos adicionais no projeto, como arquivos de imagem.
- Ele tem um depurador XML fácil de usar.
- Ele tem muitos aplicativos de exemplo fáceis de usar.
GME para desenvolvedores KML
Antes do advento da Internet, era difícil compartilhar dados espaciais. No entanto, com o desenvolvimento da Internet, os aplicativos de mapeamento se tornaram uma maneira padrão de compartilhar facilmente dados do Sistema de Informações Geográficas (SIG) com o mundo. O KML está se tornando o padrão para a apresentação e o intercâmbio de dados de SIG porque é compacto, fácil de desenvolver e é suportado por aplicativos populares como o Google Earth e o Google Maps.
Até recentemente, o processo de criação e edição de páginas com base em JavaScript era um grande problema para os desenvolvedores de KML. São necessárias várias etapas adicionais para criar um mashup e depurá-lo. Com o GME, é possível criar um mashup baseado em KML com muita rapidez em alguns componentes básicos. O processo de criação não exige conhecimento especial de HTML ou JavaScript. Os projetos de amostra do GME oferecem o suficiente para começar.
No exemplo a seguir, vou usar um arquivo KML que aponta para o conjunto de fotos tiradas durante os voos do Pict Earth EUA.
Este é um resumo do mashup dos mapas do Pict Earth:
Veja as etapas para integrar um arquivo KML em um projeto do GME usando a API Google Maps:
Etapa 1: selecionar o arquivo KML
Etapa 2: criar um novo projeto GME
Etapa 3: criar uma função para adicionar o KML
Etapa 4: adicionar um mapa
Etapa 5: testar o mashup
Publicar o mashup
18
18
1-8:
Etapa 1: selecionar o arquivo KML
Selecione o arquivo KML que você quer adicionar ao mapa. Pode ser qualquer coisa que tenha recursos compatíveis com o Google Maps. Ele precisa ser hospedado em um servidor disponível publicamente.
Etapa 2: criar um novo projeto do GME
Crie um novo projeto do GME em branco.
Um projeto do GME em branco vai ficar assim:
Adicione um título e um nome à função.
<gm:page title="Pict Earth missões" autenticado="false" onload="kmlPE()"></gm:page>
Etapa 3: criar uma função para adicionar o KML
Crie uma função JavaScript com o caminho para o arquivo KML que será adicionado ao 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>
Etapa 4: adicionar um mapa
Adicionar mapa e parâmetros
<gm:map id="map" height="400px" width="400px" lat="32.9393" lng="-117.206" zoom="9" maptypes="true"/>
Etapa 5: testar o mashup.
Pressione o botão "Testar" (F4).
Esta é uma imagem do mashup do Pict Earth testado no sandbox.
Agora, podemos verificar o texto do aplicativo e ver o primeiro resultado. Podemos adicionar um título e links e testá-lo novamente.
Etapa 6: publicar o mashup
Defina o nome do projeto e publique-o. Isso fornece um link permanente para seu mashup, que pode ser usado para incorporá-lo em páginas da Web. Usando meu exemplo, este é o link para a página inicial do projeto GME. Também é possível ver o código-fonte do projeto.
Etapa 7: adicionar o mashup a uma página da Web
Adicionar o mashup a uma página da Web usando um iframe. Por exemplo, para inserir o projeto de exemplo, adicione o seguinte:
<iframe style="WIDTH: 439px; HEIGHT: 491px" src="http://pemissions.googlemashups.com/" frameborder="0"></iframe>
Veja alguns exemplos do mashup em uma página e um blog da Web.
Você também pode adicionar o código do Google Analytics ao projeto para acompanhar estatísticas sobre quem está visualizando a página. Veja abaixo o script simples para adicioná-lo:
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">uacct = "youraccountnumber";urchinTracker();</script>
Etapa 8: colocá-lo na Galeria do GME
Publique seu mashup na Galeria de mashup do GME. Isso vai permitir que outros usuários vejam seu mashup.
Para mais informações:
Confira o Guia de primeiros passos do editor de mashup do Google, que apresenta em detalhes o processo de criação de mashups. Além disso, consulte a lista de tags para ver uma breve descrição de todas as tags gm com exemplos.
Código:
Veja todo o código para usar o KML do Pict Earth no 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>
A seguir
Depois de publicar o mashup, você pode usá-lo como um parâmetro para incluir em outro aplicativo ou carregado diretamente como um mapa. Por exemplo, esta página:
http://param.googlemashups.com (link em inglês) é um mashup do GME. Você pode fazer referência direta a um arquivo KML ao mashup adicionando kml= como parâmetro no URL, desta forma: http://param.googlemashups.com/?kml=http://map gadgets.googlepages.com/cta.kmlVocê também pode criar um widget no seu projeto. Depois do envio, acesse o menu "Arquivo", clique em "Enviar gadget" e siga as instruções. Isso permite que você adicione facilmente seu aplicativo à página inicial personalizada do Google, em outras páginas da Web, e o compartilhe com outras pessoas.