Artigo .net Magazine 53 - Utilizando o Google Maps

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (0)  (0)

Mostraremos a criação de um controle Web de mapas do Google.

Esse artigo faz parte da revista .NET Magazine edição 53. Clique aqui para ler todos os artigos desta edição

Boa idéia - Web

Utilizando o Google Maps

Exiba mapas do Google em suas próprias aplicações ASP.NET

 

Nesse artigo veremos

·         API do Google Maps;

·         Criação de web custom control;

·         Criação de website.

Qual a finalidade

·         Mostrar a criação de um controle Web de mapas do Google.

Quais situações utilizam esses recursos?

·         Em websites que pretendam exibir mapas com interatividade.

 

Resumo do DevMan

Aqui veremos a criação de um controle personalizado ASP.NET para exibir mapas do Google Maps em seus próprios Web Sites.

        

Tenho trabalhado há quase dois anos com aplicações de mapas, e nesta pequena experiência tive oportunidade de aprender muito sobre algumas engines de mapas existentes no mercado. E é com absoluta certeza que afirmo o Google Maps como uma das melhores existentes, entre as open-source e as proprietárias.

Neste artigo vamos usar o .NET Framework 3.5 e as versões Express do Visual Studio 2008, o Visual C# 2008 Express Edition para criarmos nosso Web Custom Control e o Visual Web Developer 2008 Express Edition para criarmos uma aplicação que usará nosso controle.

O foco principal do nosso artigo será basicamente o Web Custom Control, um controle ASP.NET personalizado, onde vamos encapsular o tratamento do engine do Google Maps. Assim, ficará mais simples embutir e reaproveitar a funcionalidade de exibição de mapas, localização e todos os demais recursos em nossas aplicações ASP.NET.

 

Como funciona o Google Maps?

Muita gente ainda não ouviu falar em Google Maps (por incrível que pareça) e para muitos é apenas mais um site do Google que mostra mapas, traça rotas e faz mais algumas “coisinhas” legais. Mas vou mostrar uma visão geral de como funciona o Google Maps e do que ele é capaz (e do que não é).

Existe um site para usuários comuns usufruírem dos poderes do Google Maps, com várias funcionalidades interessantes: http://maps.google.com/ e este com certeza é o mais conhecido. Ou seja, a utilização é feita diretamente no browser no site do Google. Porém o Google disponibilizou uma API em JavaScript para o desenvolvedor colocar em sua aplicação também as mesmas funcionalidades! É isso mesmo, você pode embutir o engine do Google Maps em suas próprias aplicações. E para facilitar, faremos isso através de um Web Custom Control. Sempre que você precisar de uma mapa, basta colocar o controle na página.

Este é o primeiro ponto a entender: existe uma API em JavaScript, e toda interação com o Google Maps é feita no lado do cliente. Isso é bom, pois garante o funcionamento com qualquer tecnologia do lado do servidor: ASP, ASP.NET, PHP e outras. E é ruim, pois requer do programador um conhecimento bem maior em JavaScript. A API do Google Maps é disponibilizada no endereço: http://code.google.com/apis/maps/ e é neste endereço onde encontraremos quase tudo que precisaremos de documentação para seguir adiante usando o Google Maps.

Até agora nenhum segredo, mas como nem tudo é “belo” na vida, o Google Maps tem algumas restrições quanto a sua licença (veja em http://code.google.com/apis/maps/terms.html) e também exige que o programador se registre e obtenha uma chave para poder usar a API. Mas não se preocupe, é tudo gratuito. Para aplicações corporativas o Google tem uma solução mais completa (e não é gratuita) chamada Google Maps Premier, veja em : http://www.google.com/enterprise/maps/. Para fazer seu registro e obter sua chave gratuita acesse: http://code.google.com/apis/maps/signup.html e lembre que é gerada uma chave por domínio.

Para quem nunca usou o Google Maps, veja na Listagem 1 o código de uma página simples (HTML) com um mapa padrão:

 

Listagem 1. Exemplo simples Google Maps gerado pelo Google ao assinar o serviço

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <title>Google Maps JavaScript API Example</title>

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABCKDEFGHIJKLMNOPQRSTUVXZ"

      type="text/javascript"></script>

    <script type="text/javascript">

    //<![CDATA[

    function load() {

      if (GBrowserIsCompatible()) {

        var map = new GMap2(document.getElementById("map"));

        map.setCenter(new GLatLng(37.4419, -122.1419), 13);

      }

    }

    //]]>

    </script>

  </head>

  <body onload="load()" onunload="GUnload()">

    <div id="map" style="width: 500px; height: 300px"></div>

  </body>

</html>

 

Planejando nosso Web Custom Control

Antes de colocarmos a mão na massa, vamos pensar um pouco em como será nosso controle, que cara ele terá e quais funcionalidades e propriedades ele disponibilizará. A Figura 1 mostra um protótipo para representar como deverá ficar nosso controle depois de pronto.

 

Figura 1. Protótipo mostrando como o controle ficará depois de pronto

 

Como mostrado no protótipo, nosso controle terá uma Toolbar que disponibilizará as funcionalidades disponíveis no controle, como zoom, localizar etc. Para propriedades que criaremos em nosso controle poderemos primeiramente tomar como base a documentação do objeto que representa o mapa no JavaScript, ou seja, a classe GMap2 (http://code.google.com/apis/maps/documentation/reference.html#GMap2).

 

Precisamos também pensar quais propriedades a nossa toolbar necessita. Com base nas propriedades que o Google Maps nos disponibiliza em JavaScript vamos criando propriedades no lado do servidor para acessá-las. Ou seja, para cada propriedade/parâmetro disponibilizado em JavaScript pela classe do Google Maps, precisamos criar uma propriedade em nossa Web Custom Control. Em uma aplicação real você analisará e escolherá quais funcionalidades são úteis para sua aplicação. Para o protótipo escolhi as propriedades da Tabela 1. Você pode usar sua imaginação e criar várias outras propriedades ampliando o poder e a flexibilidade do seu controle.

 

Propriedade

"

A exibição deste artigo foi interrompida :(
Este post está disponível para assinantes MVP

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?