Este artigo destina-se a mostrar como utilizar a API do Google Maps integrada a um site ASP.NET, para que possamos exibir a localização de endereços diretamente na nossa página.
Primeiros passos
O primeiro passo é fazer um cadastro no próprio google para obter uma chave de acesso ao Maps. Isso pode ser feito aqui.
Já tendo sua chave de acesso, pegaremos agora o Subgurim, uma biblioteca freeware para acesso à API dos mapas do Google. Faça o Download e extraia na pasta Projects do Visual Studio.
Crie um novo projeto de ASP.NET webforms, e dê a ele o nome que preferir. Em seguida, no Solution Explorer, clique com o botão direito em References, e vá em Add Reference. Clique na aba Browse, navegue até a pasta onde foi extraída a DLL do Subgurim, e adicione-a ao projeto. Após isso, abra seu web.config e adicione a chave que você obteve:
...
<appSettings>
<add key="googlemaps.subgurim.net" value="ClaveDeGoogle" />
</appSettings>
...
</configuration>
Aqui cabe citar algo curioso: Eu modifiquei o nome da chave, de “googlemaps.subgurim.net” para apenas “googlemaps”, e ao executar a página nos ambientes de teste e produção, obtive uma mensagem de erro dizendo que a chave estava sendo utilizada em outro site, embora estivesse rodando normalmente na minha máquina de desenvolvimento. Provavelmente há alguma dependência forte dentro da biblioteca com relação ao nome do atributo. Sugiro que deixem exatamente este nome.
Mãos à obra
Vamos supor que temos uma empresa, cuja matriz fica em Porto Alegre, com filiais em Curitiba e São Paulo. Queremos exibir nosso endereço no mapa, assim que o cliente selecionar a filial que deseja em um DropDownList. O mapa será inicialmente carregado com o endereço da matriz. Criaremos um DropDownlist cujo Value é o endereço da empresa, e o texto exibido é composto por cidade e estado. Note que é preciso registrar o assembly, logo após a diretiva inicial da página. O código do seu arquivo ASPX deve ficar assim:
<%@ register assembly="GMaps" namespace="Subgurim.Controles" tagprefix="maps" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat=server ID="smanager"/>
<div><asp:UpdatePanel ID="upanel" runat=server>
<ContentTemplate>
<asp:Label ID="lbl1" Text="Selecione a filial: " Visible=true runat=server/>
<asp:DropDownList ID="cboEnderecos" runat="server" AutoPostBack=true
onselectedindexchanged="cboEnderecos_SelectedIndexChanged">
<asp:ListItem Value="Avenida Ipiranga, 600, Partenon, Porto Alegre - Rio Grande do Sul, Brasil">Matriz - Porto Alegre - RS</asp:ListItem>
<asp:ListItem Value="Avenida Paulista, 1000, Consolação, São Paulo, Brasil">Filial São Paulo - SP</asp:ListItem>
<asp:ListItem Value="Praça Rui Barbosa,100 Centro, Curitiba - Paraná, Brasil">Filial Curitiba - PR</asp:ListItem>
</asp:DropDownList>
<maps:GMap ID="GoogleMaps"
runat="server"/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Adicionei aqui um UpdatePanel, para dar a impressão de atualização automática, e um ScriptManager para gerenciá-lo. Utilizaremos as propriedades Value de cada um dos itens da DropDownlist como parâmetro para obter o mapa do Google. Dessa forma, o usuário não terá de digitar o endereço para obter a localização no mapa, pois é a nossa intenção automatizar tudo. Reproduza o código abaixo, no seu arquivo CS de code-behind:
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Subgurim.Controles;
using System.Configuration;
namespace TesteComMapas {
public partial class _Default : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
this.ExibirMapa();
}
protected void cboEnderecos_SelectedIndexChanged(object sender, EventArgs e) {
this.ExibirMapa();
}
protected void ExibirMapa() {
//Adicionando nossa chave ao mapa
GoogleMaps.Key = ConfigurationSettings.AppSettings["googlemaps.subgurim.net"];
// Habilitando o zoom no mapa
GoogleMaps.enableHookMouseWheelToZoom = true;
//Obtendo as informações de latitude e longitura à partir do endereço
GLatLng latitudeLongitude = GoogleMaps.
getGeoCodeRequest(cboEnderecos.SelectedValue)
.Placemark.coordinates;
// Definir o tipo do mapa
// Satellite, Hybrid, Physical, Normal
GoogleMaps.mapType = GMapType.GTypes.Hybrid;
// Definimos o ponto inicial do mapa para o endereço passado
// e o segundo parâmetro é o zoom inicial
GoogleMaps.setCenter(latitudeLongitude, 15);
//Criando as marcações do mapa
GIcon icon = new GIcon();
icon.markerIconOptions = new MarkerIconOptions(50, 50, System.Drawing.Color.Red);
GMarker marker = new GMarker(latitudeLongitude, icon);
//Criando o balão com o endereço do Mapa
GInfoWindow window = new GInfoWindow(marker,cboEnderecos.SelectedValue,true);
GoogleMaps.Add(window);
// Criando controles referentes ao tipo de mapa, tamanho e tipo de visão.
//Esses controles serão melhor entendidos na visualização do mapa:
GControl mapType = new GControl(GControl.preBuilt.MapTypeControl);
GControl overview = new GControl(GControl.preBuilt.GOverviewMapControl);
GControl small = new GControl(GControl.preBuilt.SmallMapControl);
GoogleMaps.addControl(mapType);
GoogleMaps.addControl(overview);
GoogleMaps.addControl(small);
}
}
}
Detalhamento
Importamos os namespaces Subgurim.controles para termos acesso aos webcontrols responsáveis pela exibição do mapa, e o System.Configuration para que pudéssemos acessar a chave do Google através do web.config. O Google maps necessita das coordenadas(Latitude e Longitude) para centralizar um ponto e/ou traçar dois pontos através da Teoria dos grafos, por isso enviamos uma requisição com o endereço inicialmente, obtivemos as coordenadas e só então as passamos como parâmetros para o mapa.
É importante lembrar que o Google Maps não é 100% preciso. Às vezes, remover o bairro da string do endereço, ou trocar o endereço por “CEP:NumeroDoCep, Brasil” encontra endereços ditos desconhecidos, não encontrados como demonstrei aqui. Sugiro que, caso necessário, façam uma rotina condicional para contornar esse problema.
Bem, por enquanto é isso. Críticas e sugestões, os comentários estão abertos. Abraços e keep coding!
ASP.NET AJAX – UpdatePanel não funciona – Problemas mais comuns | BrunoBemfica.NET em maio 7th, 2010 at 07:51 says:
[...] Utilizando A API do Google Maps no ASP.NET [...]