owtext; FONT-FAMILY: Verdana">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
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
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&v=2&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
|
Propriedade |
... |
