Geoprocessamento (Google Maps) em ASP.NET MVC com JavaScript
Veja nesse artigo como trabalhar com geoprocessamento em programação utilizando o Google Maps na plataforma ASP.NET com as linguagens JavaScript e HTML, podendo assim utilizar mapas em suas aplicações.
O geoprocessamento é o termo usado para referenciar o processo de dados georeferenciados, ou seja, dados de mapas, plantas, cartas topográficas, entre outros.
O Google Maps é um serviço gratuito de geoprocessamento que permite acessar uma variedade de conteúdo, como imagens de satélite da Terra, dados de mapas e terrenos, listagens de empresas, comentários e tráfego. Além disso, você pode optar por acessar outro conteúdo de terceiros disponibilizado nos produtos através de gadgets do Google.
Chave de acesso do Google Maps
Para utilizarmos o Google Maps em nossas aplicações é necessário obter uma chave de acesso e para isso utilizaremos uma conta da Google. Quem não tem cadastro, pode cadastrar-se gratuitamente.
Após efetuar o login da conta e entrar no console de APIs da Google, clique na opção “sevices” do menu superior esquerdo, como mostra a Figura 1.
Feito isso, na listagem que aparecerá na tela, localizaremos “Google Maps JavaScript API v3”e ativaremos para que assim seja fornecida a chave de acesso, como mostra a Figura 2.
Agora, para visualizarmos a chave de acesso do Google Maps JavaScript API v3, no menu do lado superior esquerdo, clicaremos na opção “API Access” do menu e agora é só salvar a chave de acesso, que é a “API Key” exibida, como mostra a Figura 3.
Exibindo Mapa em uma aplicação ASP.NET
Vamos montar uma aplicação para trabalharmos esse assunto, usando o Visual Studio e o ASP.NET MVC 5, com views do tipo Razor, que é um tipo de views livres, para que assim possamos utilizar o HTML, CSS, JavaScript no código.
Com a aplicação aberta, dentro da tela de programação da nossa view, os códigos estarão em HTML. Criaremos as tags <script> e dentro delas declararemos o endereço do Google Maps e a chave de acesso adquirida na seção anterior, para assim termos acesso a todas as funcionalidades da ferramenta em nossa aplicação, como mostra a Listagem 1.
@{
Layout = null;
}
<!DOCTYPEhtml>
<html>
<head>
<metaname="viewport"content="width=device-width"/>
<title>Google Maps com javaScript</title>
<h1>Mapa Google Maps</h1>
<scripttype="text/javascript"src="http://maps.googleapis.com/maps/api/
js?key=AIzaSyC-nZT9DJSIqpGQ-jkzeLQXKlmJhjUVPgQ&sensor=false"></script>
<!-- aqui a tagJavaScript contando o endereco do googleMaps
e com a chave de acesso que adquirimos junto a conta do Google
este começo: http://maps.googleapis.com/maps/api/js?key= é padrao,
apos ele, devemos inserir nossa chave e finalizar com: &sensor=false
'-->
</head>
<body>
<div>
</div>
</body>
</html>Listagem 1. Declarando a chave de acesso do Google maps
Entre as tags <body>, criaremos tags <div> e vamos inserir o id=”map_canvas”, nomeando a nossa div, para que nela seja exibido o mapa em nossa aplicação.
Vamos declarar uma função entre as tags <script>, para que seja criado o mapa Google Maps. Dento dela criaremos uma variável do tipo GoogleMaps.LatLog e passaremos como parâmetro a latitude e longitude do ponto que desejaremos visualizar no mapa, como mostra a Listagem 2.
<scripttype="text/javascript"language="javascript">
//variavel criada para que seja criado o mapa Google Maps
varmap = null;
//Essa e a funcao que criara o mapa GoogleMaps
functionchamaMapa() {
//aqui vamos definir as coordenadas de latitude e longitude
do ponto desejado, no qual sera exibido o nosso mapa
varlatlng = newgoogle.maps.LatLng(-23.64340873969638, -46.730219057147224);
//DEFINE A LOCALIZAÇÃO EXATA DO MAPA
</script>Listagem 2. Definindo latitude e longitude do ponto que deseja visualizar no mapa
Dentro da função “chamaMapa” vamos declarar uma variável, pois a utilizaremos para regular o zoom do mapa e para configurar a posição central do mesmo. Dentro da variável abriremos chaves e criaremos a opção zoom recebendo o seu valor desejado. Além disso criaremos a opção “center” recebendo a latitude e longitude do ponto que será o centro do mapa. Ao final fecharemos as chaves.
Feito isso, criaremos uma variável e a inicializaremos com o tipo GoogleMaps.Map, passando como parâmetro dois itens: o id da div HTML, que exibirá o mapa; e a variável de configuração que criamos no passo anterior.
O evento “onload” da tag HTML <body> serve para que algo seja feito logo quando a página for inicializada, e é isso que necessitamos para que seja exibido o mapa. Então colocaremos esse evento na tag HTML <body> recebendo a função “chamaMapa()”, que é a função que criamos anteriormente.
Veja isso tudo sendo feito na Listagem 3.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Google Maps com javaScript</title>
<h1>Mapa Google Maps</h1>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/
js?key=AIzaSyC-nZT9DJSIqpGQ-jkzeLQXKlmJhjUVPgQ&sensor=false"></script>
<!-- aqui a tag javaScript contando o endereco do google Maps
e com a chave de acesso que adquirimos junto a conta do Google
este comeco: http://maps.googleapis.com/maps/api/js?key= é padrao,
apos ele, devemos inserir nossa chave e finalizar com: &sensor=false
'-->
<script type="text/javascript" language="javascript">
//variavel cria para que seja criado o mapa Google Maps
var map = null;
//Essa e a funcao que criara o mapa GoogleMaps
function chamaMapa() {
//aqui vamos definir as coordenadas de latitude e longitude no qual
//sera exibido o nosso mapa
var latlng = new google.maps.LatLng(-23.64340873969638, -46.730219057147224);
//DEFINE A LOCALIZAÇÃO EXATA DO MAPA
//aqui vamos configurar o mapa, como o zoom, o centro do mapa, etc
var myOptions = {
zoom: 15,//utilizaremos o zoom 15
center: latlng,//aqui a nossa variavel constando latitude e
//longitude ja declarada acima
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//criando o mapa dentro da div com o id="map_canvas" que ja criamos
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//DEFINE AS COORDENADAS do ponto exato - CENTRALIZAÇÃO DO MAPA
map.setCenter(new google.maps.LatLng(-20.7233106, -46.6146444));
}
function abreLink() {
window.open('http://www.google.com.br');
}
</script>
</head>
<body onload="chamaMapa();">
<div id="map_canvas" >
</div>
</body>
</html>Listagem 3. Criando e exibindo um mapa
Veja na Figura 4 o resultado da criação do mapa.
Realizando uma marcação no mapa
Existem duas formas de fazermos marcações no mapa: pelas coordenadas de latitude e longitude do local ou pelo endereço. Para fazermos uma marcação através da latitude e longitude devemos criar uma função com o nome “fazMarcacao”, que deve passar como parâmetro duas variáveis, uma com a latitude e a outra constando a longitude do ponto de desejamos marcar no mapa.
Dentro da função criaremos uma variável do tipo “google.maps.LatLng” que receberá a latitude e longitude. Além disso, devemos criar uma variável do tipo “google.maps.marker” para fazer a marcação, passando como parâmetro a variável tipo “google.maps.LatLng” que acabamos de criar. Veja o código desta função pronta na Listagem 4.
function FazMarcacao(lat, long) {
var latlong = lat + "," + long;//colocando na conficuracao necessaria (lat,long)
var myLatLgn = new google.maps.LatLng(-23.64340873969638, -46.730219057147224);
//criando variavel tipo google.maps.LatLng e
//passando como parametro a latitude e longitude
//na configuracao: latitude,longitude.
//aproximando o mapa, aumentando o zoom
map.setZoom(17);
//fazendo a marcacao, usando o latitude e longitude da variavel criada acima
var marker = new google.maps.Marker({ position: myLatLgn, map: map });
//aqui a variavel e o comando que faz a marcação
map.setCenter(myLatLgn);//leva o mapa para a posicao da marcacao
}Listagem 4. Função que faz marcação no mapa
Para utilizar esta função basta criarmos dois campos de texto HTML para passar a latitude e a longitude e um botão HTML para chamar a função de marcação, colocando no evento “onclick” a função da Listagem 4.
A Listagem 5 mostra como fica o código.
<body onload="chamaMapa();">
latitude: <input id="latitude" type="text" /> <br />
longitude: <input id="longitude" type="text" /> <br />
<input id="marcar" type="button" value="Marcar"
onclick="FazMarcacao(latitude.value, longitude.value)" />
<div id="map_canvas" >
</div>
</body>Listagem 5. Chamando rotina que faz marcação
Veja na Figura 5 a marcação que foi feita.
Para fazermos uma marcação no mapa utilizando o endereço do local desejado, criaremos uma função “chamaMarcacaoEndereco” que passará como parâmetro quatro variáveis: logradouro, número, bairro e cidade.
Dentro da função criaremos uma variável do tipo “google.maps.Geocoder” e utilizaremos a função “geocode” dela, passando como parâmetro o endereço do local. Essa função nos retornara dois resultados: o “status”, que nos informa se foi encontrado o endereço, e o “results” que nos dá a latitude e longitude do endereço. Então, se o retorno de “status” for “ok”, criaremos uma variável inicializada do tipo “google.maps.Marker” e a passaremos como parâmetro, como mostra a Listagem 6.
function chamaMarcacaoEndereco(logradoro, numero, bairro, cidade) {
//colocando o endereco no padrao correto
var endereco = logradoro + ", " + numero + ", " + bairro + " - " + cidade;
//MUDANDO O ZOOM DO MAPA
map.setZoom(17);
//Buscando lat e log por endereco (no formato: nome rua, numero, bairro - cidade)
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': endereco }, function (results, status) {
//se o retorno de status for ok
if (status = google.maps.GeocoderStatus.OK) {
//pega o retorno de result, que sao a latitude e longitude
var latlng = results[0].geometry.location;
//faz marcacao no mapa
var marker = new google.maps.Marker({ position: latlng, map: map });
map.setCenter(latlng);//leva o mapa para a posicao da marcacao
}
});
}Listagem 6. Função para fazer marcação através do endereço
Para utilizarmos a função criada, vamos inserir no projeto quatro campos de texto HTML para pegar as informações, e um botão HTML, que no evento “onclick” receberá a função criada na Listagem 6. Veja esse código na Listagem 7.
<body onload="chamaMapa();">
logradouro: <input id="logradouro" type="text" /> <br />
numero: <input id="numero" type="text" /> <br />
bairro: <input id="bairro" type="text" /> <br />
cidade: <input id="ciadde" type="text" /> <br />
<input id="marcar" type="button" value="Marcar"
onclick="chamaMarcacaoEndereco(logradouro.value,numero.value,
bairro.value, ciadde.value)" />
<div id="map_canvas" >
</div>
</body>Listagem 7. Utilizando a função JavaScript que faz marcação no mapa por endereço
Veja na Figura 6 uma marcação feita com as quatro informações.
Trocando ícone de marcação
Existirá casos em que necessitaremos alterar o ícone padrão de marcação do GoogleMaps para diferenciar uma marcação da outra.
Antes de tudo, dentro da nossa aplicação criaremos uma pasta física e salvaremos nela a imagem que substituirá a marcação padrão. Clique com o botão direto sobre o projeto e escolha a opção Add > New Folder, como mostra a Figura 7.
Agora dentro da função que fará a marcação (e antes que essa marcação seja feita), crie uma variável com o nome da imagem, recebendo o endereço físico da mesma, como por exemplo: "../../Imagens/imagem.png".
Nota: Sempre que quisermos indicar o endereço físico de uma pasta da nossa aplicação, esse endereço começará com “../../”, que é referente ao caminho físico até chegar em nossa aplicação, e após isso, informaremos o restante do caminho, que é referente ao que queremos referenciar. Por exemplo: “Imagens/imagem.png”, é o caminho do arquivo imagem.png dentro da pasta Imagens desta nossa aplicação.
No código da Listagem 8 adicionaremos o comando “icon” recebendo a variável imagem para trocar o ícone da marcação.
function chamaMarcacaoOutroIcone(endereco) {
//MUDANDO O ZOOM DO MAPA
map.setZoom(16);
var imagem = "../../Imagens/imagem.png";//AQUI A VARIAVEL RECEBENDO A IMAGEM QUE
//SUBISTITUIRÁ O ICONE PADRÃO
//Busca lat e log por endereco (no formato: nome rua, numero, bairro - cidade)
geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': endereco }, function (results, status) {
if (status = google.maps.GeocoderStatus.OK) {
latlng = results[0].geometry.location;
//faz marcacao no mapa
marker = new google.maps.Marker({ position: latlng, map: map, icon:imagem});
//ADICIONANDO O COMANDO ICON
//RECEBENDO A VARIAVEL IMAGEM
map.setCenter(latlng);//leva o mapa para a posicao da marcacao
//coloca informacao na marcacao
var infowindow = new google.maps.InfoWindow(), marker;
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent("cod");
infowindow.open(map, marker);
//window.location = "/Home/Sobre";
} })(marker)) }});}Listagem 8. Adicionando o ícone da marcação
Fazendo uma marcação com texto informativo
Uma boa opção que temos na utilização do GoogleMaps em nossa aplicação é a utilização de marcações com textos em nosso mapa.
Para colocarmos um texto informativo dentro de uma marcação, para que este texto seja exibido ao usuário quando for realizado um clique nesta marcação, seguiremos os seguintes passos.
Primeiramente, entre as tags <script>, criaremos uma função JavaScript com o nome de “chamaMarcacaoComTextoInfo”, passando como parâmetro quatro variáveis: logradouro, número, bairro e cidade, neste caso estamos fazendo a marcação através do endereço, porem poderíamos fazê-la pela latitude e longitude, como foi mostrado na Listagem 4. Após isso, dentro desta função, utilizaremos o mesmo código da Listagem 5, no qual faz marcação pelo endereço, e as únicas modificações serão as seguintes.
Ainda dentro desta função, antes da marcação ser realizada, criaremos uma variável do tipo “google.maps.InfoWindow(), NomeDaVariavelQueFazMarcação”, onde “NomeDaVariavelQueFazMarcação” correspondente ao nome da variável que você criou para fazer a marcação, que no nosso caso é a variável “marker”.
A variável será criada e inicializada como “google.maps.InfoWindow(), Marker”, e a utilizaremos no evento do Google Maps da seguinte forma:
“google.maps.event.addListener(NomeDaVariavelQueFazMarcação, 'click',
(function (NomeDaVariavelQueFazMarcação, i)”
Esse evento realiza a adição do texto informativo na marcação, e nele utilizaremos outros dois eventos Google Maps:
- “infowindow.setContent”, que passa como parâmetro, o texto informativo que desejamos colocar na marcação;
- “infowindow.open”, que passa como parâmetro duas variáveis: a variável que usamos para criar o mapa (“map”), e a variável que usamos para fazer a marcação (“marker”).
Veja na Listagem 9 o código da função de fazer a marcação através do endereço da Listagem 5, junto com os códigos que colocam os textos informativos nas marcações.
function chamaMarcacaoComTextoInfo(logradoro, numero, bairro, cidade) {
//colocando o endereco no padrao correto exigido pelo googlemaps
varendereco = logradoro + ", " + numero + ", " + bairro + " - " + cidade;
//mudando o zoom do mapa, de acordo com o que necessite, neste caso: 17
map.setZoom(17);
//Buscando lat e log por endereco (no formato: nome rua, numero, bairro - cidade) que é o padrão.
vargeocoder = newgoogle.maps.Geocoder();
geocoder.geocode({ 'address': endereco }, function (results, status) {
//se o retorno de status for ok
if (status = google.maps.GeocoderStatus.OK) {
//pega o retorno da variavel result, que sao a latitude e longitude do endereco
varlatlng = results[0].geometry.location;
//faz marcacao no mapa na posição da latitude e longitude adiquirida
varmarker = newgoogle.maps.Marker({ position: latlng, map: map });
map.setCenter(latlng);//leva o mapa para a posição no mapa onde foi realizado a marcacao
}
//AQUI A VARIAVEL QUE CRIAMOS PARA COLOCAR O TEXTO INFORMATIVO NA MARCAÇÃO
varinfowindow = newgoogle.maps.InfoWindow(), marker;
//AQUI O EVENTO GOOGLEMAPS QUE COLOCA O TEXTO INFORMATIVO NA MARCACAO
google.maps.event.addListener(marker, 'click', (function (marker, i) {
returnfunction () {
//COLOCANDO O TEXTO INFORMATIVO NO EVENTO GOOGLEMAPS
infowindow.setContent("A Informacao da Marcação!!!!!");
//A VARIAVEL QUE LIGA O TEXTO INFORMATIVO A VARIAVEL DE MARCACAO E REALIZA A MARCACAO NO MAPA.
infowindow.open(map, marker);
}
})(marker))
});
}Listagem 9. Fazendo marcação com informação
E para utilizarmos essa função da Listagem 9, é só utilizarmos os códigos da Listagem 6. O resultado pode ser visto na Figura 8.
Artigos relacionados
-
Artigo
-
Artigo
-
Artigo
-
Artigo
-
Artigo