Você quer fazer um mapa, utilizando a API do Google Maps, mas não quer ou não sabe usar javascript?
As vezes fazer as coisas em javascript se torna difícil. Nem todas as IDEs do mercado oferecem um ambiente de desenvolvimento para javascript amigável. Por isso procurei algumas soluções para fazer algumas brincadeirinhas com o Google Maps, sem precisar implementar nada em javascript.
Eu sou muito familiarizado com C#, por isso parti logo a procura de uma biblioteca .NET que pudesse atender as minhas necessidades.
Achei rapidamente um projeto no codeplex que oferecia exatamente o que eu procurava. Para quem tiver interesse e quiser contribuir com o projeto, segue o link: Google Maps
No site do projeto existem alguns exemplos de como usar o controle colocando o código na pagina ASPX. Mas como na maior parte das vezes, temos as coordenadas de latitude e longitude gravadas no banco, e a partir disso vamos montar o mapa, vou mostrar aqui um passo a passo rápido de como usar o controle.
Passo 1 – Fazer o download da biblioteca e adiciona-la ao projeto:
Depois de fazer o download da Biblioteca que irá fazer a interação com o Google Maps. No seu projeto adicione uma nova referência, clicando com o botão direito, selecionando “Add Reference” e em seguida indo na aba “Browse” e escolhendo o arquivo da biblioteca que você fez o download.
Passo 2 – Alterar o web.confg:
Vá ao web.config e procure a sessão
Você vai encontrar algo parecido com o que segue abaixo:
<pages>
<controls>
<add tagPrefix=”asp” namespace=”System.Web.UI” assembly=”System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35″/>
<add tagPrefix=”asp” namespace=”System.Web.UI.WebControls” assembly=”System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35″/>
</controls>
</pages>
Adicione então a tag responsavel pelo uso do novo controle em qualquer lugar entre as tags <control> e </control> . Existem outras formas de fazer isso, mas eu considero essa a mais rapida.
A tag é a seguinte:
<add tagPrefix=”artem” namespace=”Artem.Web.UI.Controls” assembly=”Artem.GoogleMap”/>
Passo 3 – Código na página ASPX:
Na sua página ASPX, onde deseja exibir o controle, basta colocar a tag responsável pelo controle. Aconselho colocá-la dentro de uma DIV para melhor controle. O controle dentro de uma DIV, fica assim:
<div>
<artem:GoogleMap ID=”mapa” runat=”server” ></artem:GoogleMap>
</div>
E no topo da pagina, é preciso registrar o controle, assim:
<%@ Register assembly=”Artem.GoogleMap” namespace=”Artem.Web.UI.Controls” tagprefix=”artem” %>
Passo 4 – Código no codebehind:
O codigo a seguir exemplifica a plotagem de um mapa, no tamanho 600×600, com centro na latitude -12.928192 e logintude -38.360996
E com um marcador plotado no mesmo ponto. O detalhe é que esse marcador é clicavel e o texto que ele irá exibir, é um texto qualquer que você pode setar usando tags HTML, inclusive imagens.
protected void Page_Load(object sender, EventArgs e)
{
double latitude = -12.928192;
double longitude = -38.360996;
mapa.Latitude = latitude;
mapa.Longitude = longitude;
mapa.Zoom = 15;
GoogleMarker marcador1 = new GoogleMarker(latitude, longitude);
marcador1.Text = “<h2>Texto</h2><br/>Aqui fica o texto de exemplo”;
marcador1.Clickable = true;
mapa.Markers.Add(marcador1);
mapa.Width = 600;
mapa.Height = 600;
mapa.Key = “SuaKeyDoGoogleMapsAPI”;
}
Exemplo de implementação do Google Maps utilizando C#
Pronto!
Em 4 passos você conseguiu montar um mapa em C#, utilizando o Google Maps e sem digitar uma linha de javascript.
Em breve irei disponibilizar para download um projeto com exemplo de utilização.
