Avançar para a área de conteúdo

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

Na primeira vez que você efetua sign in no developerWorks, um perfil é criado para você. Informações selecionadas do seu perfil developerWorks são exibidas ao público, mas você pode editá-las a qualquer momento. Seu primeiro nome, sobrenome (a menos que escolha ocultá-los), e seu nome de exibição acompanharão o conteúdo que postar.

Todas as informações enviadas são seguras.

  • Fechar [x]

Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

Todas as informações enviadas são seguras.

  • Fechar [x]

Selecione um idioma:

  • Fechar [x]
  • Fechar [x]

Customize uma Página de Resultados do Google Maps com Google Mapplets

Crie uma Solução do Lado do Servidor e Cliente Utilizando RSS, XSLT, PHP, KML e JavaScript

Jake Miles, Senior Developer, Conde Nast
Photo of Jacob Miles
Jake Miles é um oficial de ligação técnico senior na Twistage, Inc que trabalha atualmente com aplicativos Facebook, Myspace e OpenSocial utilizando Java, PHP, Adobe Flex e JavaScript. Ele trabalha como desenvolvedor profissional há 10 anos e é um estudante ávido e curioso desde os 10 anos. Ele também leciona como voluntário.
Dave Wegman, CTO, Twistage
David Wegman é CTO na Twistage, um provedor de vídeos on-line. Além de codificação e gravação técnica, ele gosta de estudos sobre a usabilidade dos sistemas de software e de refatoração de código. Ele vive e trabalha em São Francisco.

Resumo:  Um Google Mapplet é um aplicativo executado dentro de uma página de resultados do Google Maps e permite que você inclua suas próprias informações customizadas, além do comportamento da página e do mapa. Neste tutorial, você vai gravar um Google Mapplet que utiliza o RSS feed Yahoo Weather para exibir a previsão do tempo local no Google Maps. Para demonstrar diferentes técnicas durante o uso da API do Google Mapplets, você vai implementar duas soluções. A primeira é no lado do cliente e utiliza RSS e JavaScript. A segunda é no lado do servidor e utiliza XSLT, PHP, KML e JavaScript.

Data:  21/Out/2008
Nível:  Intermediário

Atividade:  4443 visualizações
Comentários:  

Antes de Iniciar

Este tutorial destina-se a desenvolvedores de aplicativo da Web interessados em incluir informações customizadas e comportamento em uma página de resultado do Google Maps. É recomendado estar familiarizado com PHP, JavaScript e XSLT.

Sobre Este Tutorial

Acrônimos Usados Frequentemente

  • Ajax: Asynchronous JavaScript + XML
  • API: interface de programação de aplicativos
  • DOM: Document Object Model
  • HTML: Linguagem de Marcação de Hipertexto
  • HTTP: Hyper Text Transfer Protocol
  • KML: Keyhole Markup Language
  • PHP: PHP Hypertext Preprocessor
  • RSS: Really Simple Syndication
  • URL: Localizador Uniforme de Recursos
  • W3C: World Wide Web Consortium
  • XHTML: Extensible Hypertext Markup Language
  • XML: Linguagem de Marcação Extensível
  • XSL: Extensible Stylesheet Language
  • XSLT: Transformações XSL

Neste tutorial, você vai construir um Google Mapplet que exiba a previsão do tempo local utilizando RSS feed Yahoo Weather. Você vai chamar um serviço geocodificador reverso (consulte Pré-requisitos para obter um link) utilizando um pedido Ajax dentro da API do Google Mapplets, que converte as coordenadas atuais do Google Map em um CEP.

Você vai implementar duas soluções: uma que chama o serviço de estações do Yahoo do JavaScript e exibe a previsão do tempo na barra lateral, e outra que chama seu próprio servidor da Web remoto para uma sobreposição de KML a ser colocada no mapa. Seu servidor da Web remoto, executando PHP 5.2, vai utilizar o módulo XSL para aplicar folhas de estilo XSLT no RSS XML retornado do Yahoo. Você implementará duas folhas de estilo: uma que converta os dados de RSS do Yahoo em uma estrutura de dados mais simples, para demonstrar o isolamento de sua camada de apresentação (KML) da estrutura de dados externa, e outra para converter a estrutura de dados local mais simples em uma sobreposição de KML. Por fim, você vai aplicar a sobreposição no Google Map.

Voltar para parte superior

Pré-requisitos

Você vai precisar das seguintes ferramentas para prosseguir com este tutorial:

  • O desenvolvimento de um Google Mapplet requer que você o mantenha em um servidor da Web público para que o Google possa ler o Mapplet em seu cache para renderizar a página de resultados do Google Maps. Além disso, você precisa acessar um servidor da Web público para este tutorial. Apache Web Server Versão 2.2 é um servidor da Web que vai funcionar. Consulte Recursos para obter informações sobre definição e configuração.
  • PHP Versão 5.2.6.
  • O serviço geocodificador reverso de geonames.org.
  • Um navegador da Web com JavaScript ativado.
  • Seu editor de linguagem de programação favorito.

1 de 11 | Próximo

Comentários

Voltar para parte superior

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Software livre
ArticleID=387086
TutorialTitle=Customize uma Página de Resultados do Google Maps com Google Mapplets
publish-date=10212008
author1-email=jacob.miles@gmail.com
author1-email-cc=
author2-email=dwegman@twistage.com
author2-email-cc=

Índice

1 de 11 | Próximo

Tags

Help
Use o campo de pesquisa para encontrar todos os tipos de conteúdo no My developerWorks com essa tag.

Use a barra de rolagem para ver mais ou menos tags.

Tags populares mostra as principais tags para esta zona de conteúdo em particular (por exemplo, Java technology, Linux, WebSphere).

Minhas tags mostra suas tags para esta zona de conteúdo em particular (por exemplo, Java technology, Linux, WebSphere).

Use o campo de pesquisa para localizar todos os tipos de conteúdo no Meu developerWorks com essa tag. Tags populares mostra as tags principais para essa zona de conteúdo particular (por exemplo, tecnologia Java, Linux, WebSphere). My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere). Minhas tags mostra as suas tags para essa zona de conteúdo em particular (por exemplo, tecnologia Java, Linux, WebSphere).

 

Compartilhe esta página:

  • Fechar [x]

Siga o developerWorks:

  • Fechar [x]