Usuário com melhor resposta
Utilizar google maps com asp.net.

Pergunta
-
Bom dia galera, estou desenvolvendo uma tela de uma sistema web, nessa tela vou precisar buscar um endereço e exibir em um UserControl.
Gostaria de utilizar a Api do Google Maps para esse serviço, porém todos os exemplos que encontrei na internet até o momento ele buscar por coordenadas. Gostaria na verdade de realizar essa buscar e criar esse mapa passando como parametro o endereço(rua, numero, bairro, cidade).
Gostaria também que ao invés de retornar somente uma imagem, ele retorno a API do google mesmo.
Alguém tem algum exemplo que poderia me ajudar.
Obrigado.
Respostas
-
Rafael é possível sim
https://developers.google.com/maps/documentation/geocoding/
http://stackoverflow.com/questions/6882965/google-maps-api-v3-get-map-by-address
Não esqueça de usar o componente </> na barra para posta seu código. Microsoft MCPD,MCTS,MCC
- Sugerido como Resposta Samuel Rodrigues dos Anjos sexta-feira, 22 de março de 2013 17:41
- Marcado como Resposta Seilor Bonancio JuniorModerator terça-feira, 2 de abril de 2013 10:43
-
Boa tarde galera, demorei um pouco mas consegui chegar em um resultado final. Segue abaixo o código final.
Arquivo JS:
var map; var latitude; var longitude; var marker = null; var div = ''; // Carrega o script necessário para a geração dos mapas. function Inicializar() { window.onload = CarregarScript; latitude = $("input[id$='txtLatitude']").val(); longitude = $("input[id$='txtLongitude']").val(); if ((latitude == "") && (longitude == "")) { $("#map_canvas").hide(); } $("div[aria-labelledby*=ui-dialog-title-divVisualizaEnd] a[class*=ui-dialog-titlebar-close]").click(function (e) { e.preventDefault(); $("div[aria-labelledby*=ui-dialog-title-divVisualizaEnd] input[type=text]").each(function () { $(this).val(""); }); }); } function OnLoad() { CarregarMapaInicial(); GerarMapaPorEndereco(); } // Carrega o Google Maps JavaScript API. function CarregarScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=OnLoad"; document.body.appendChild(script); } // Carrega uma única vez o mapa inicial. function CarregarMapaInicial() { geocoder = new google.maps.Geocoder(); latitude = $("input[id$='txtLatitude']").val(); longitude = $("input[id$='txtLongitude']").val(); var map_canvas = document.getElementById("map_canvas"); if (map_canvas != null) { var myOptions = { zoom: 16, center: new google.maps.LatLng(latitude, longitude), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(map_canvas, myOptions); } if ((latitude == '' && longitude == '') || (latitude == '0' && longitude == '0')) { marker = null; latitude = longitude = "0"; } MarcaPonto(new google.maps.LatLng(latitude, longitude)); } // Gera o mapa de acordo com o endereço. function GerarMapaPorEndereco() { var cep = $("input[id$='txtCep']").val(); var logradouro = $("input[id$='txtLogradouro']").val(); var numero = $("input[id$='txtNumero']").val(); var cidade = $("input[id$='txtCidade']").val(); if ((cep != '') && (logradouro != '') && (numero != '') && (cidade != '')) { $("div[id$='map_canvas']").show(); if (map != null) { CarregarMapaInicial(); } EnquadraMapa(); var endereco = cep + " " + logradouro + " " + numero + " " + cidade; geocoder.geocode({ 'address': endereco, 'partialmatch': true }, Resultados); } $("#map_canvas").focus(); } // Exibe o mapa de acordo com o resultado. function Resultados(results, status) { if (status == 'OK' && results.length > 0) { map.fitBounds(results[0].geometry.viewport); map.setZoom(16); MarcaPonto(results[0].geometry.location); AtualizaCoordenadas(results[0].geometry.location); } else { alert("Endereço não encontrado."); } } // Marca um ponto no mapa function MarcaPonto(location) { if (map != null) { map.setCenter(location); if (marker == null) { marker = new google.maps.Marker({ map: map, nbsp;location, draggable: true }); } else { marker.setPosition(location); } google.maps.event.addDomListener(marker, 'dragend', function () { AtualizaCoordenadas(marker.getPosition()); }); } } // Atualiza os campos das coordenadas. function AtualizaCoordenadas(mapa) { $("input[id$='txtLatitude']").val(mapa.lat().toString()); $("input[id$='txtLongitude']").val(mapa.lng().toString()); } // Carrega as configurações necessárias para a opção mapa em tela cheia. function ConfigurarMapaTelaCheia() { // Cria a div que servirá de fundo para a janela do mapa. elemento = document.createElement('div'); elemento.setAttribute('id', "fundo"); elemento.style.position = 'absolute'; elemento.style.left = '0'; elemento.style.top = '0'; elemento.style.zIndex = '9000'; elemento.style.backgroundColor = '#000'; elemento.style.display = 'none'; document.forms[0].appendChild(elemento); // Adiciona o evento de esconder mapa caso o fundo seja clicado. $('#fundo').unbind("click").click(function (e) { e.preventDefault(); EsconderMapaTelaCheia(); }); // Adiciona o evento de esconder mapa caso a tecla esc seja pressionada. $(document).keyup(function (e) { if (e.keyCode == 27) { e.preventDefault(); EsconderMapaTelaCheia(); } }); } // Mostra o mapa em formato tela cheia. function MostrarMapaTelaCheia() { $('#fundo').height($(document).height()).width('100%').fadeTo("slow", 0.8); $("#map_canvas").height($(window).height() - 100).width($(window).width() - 100).css({ "position": "fixed", "top": "50px", "left": "50px", "z-index": "9999" }); EnquadraMapa(); } // Esconde o mapa em formato tela cheia. function EsconderMapaTelaCheia() { $('#fundo').hide(); $("#map_canvas").width(340).height(150).css({ "position": "relative", "float": "left", "top": "0", "left": "0" }); EnquadraMapa(); } //// Centraliza e enquadra o mapa de acordo com o tamanho do container. function EnquadraMapa() { if(google != null) { google.maps.event.trigger(map, 'resize'); map.setCenter(new google.maps.LatLng(latitude, longitude)); map.setZoom(16); } } // Insere as funções na lista de funcões - será chamado no Init.js. arrFNC.push(Inicializar); arrFNCSys.push(Inicializar); arrFNCSys.push(OnLoad);
--------------------------------------------------------
Recebo esses valores dos textBox de CEP, Cidade, Endereço, Numero. E também utilizo dois campos de latitude e longitude para mostrar esses dados.
Obrigado pela ajuda.
- Sugerido como Resposta Samuel Rodrigues dos Anjos segunda-feira, 1 de abril de 2013 20:19
- Marcado como Resposta Seilor Bonancio JuniorModerator terça-feira, 2 de abril de 2013 10:43
Todas as Respostas
-
Rafael é possível sim
https://developers.google.com/maps/documentation/geocoding/
http://stackoverflow.com/questions/6882965/google-maps-api-v3-get-map-by-address
Não esqueça de usar o componente </> na barra para posta seu código. Microsoft MCPD,MCTS,MCC
- Sugerido como Resposta Samuel Rodrigues dos Anjos sexta-feira, 22 de março de 2013 17:41
- Marcado como Resposta Seilor Bonancio JuniorModerator terça-feira, 2 de abril de 2013 10:43
-
Cara,
Da uma olhada em um modelo simples onde trago as coordenadas do banco utilizando um repeater:
Aspx:
<form id="form1" runat="server"> <div> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var markers = [ <asp:Repeater ID="rptMarkers" runat="server"> <ItemTemplate> { "title": '<%# Eval("Name") %>', "lat": '<%# Eval("Latitude") %>', "lng": '<%# Eval("Longitude") %>', "description": '<%# Eval("Description") %>' } </ItemTemplate> <SeparatorTemplate> , </SeparatorTemplate> </asp:Repeater> ]; </script> <script type="text/javascript"> window.onload = function () { var mapOptions = { center: new google.maps.LatLng(markers[0].lat, markers[0].lng), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var infoWindow = new google.maps.InfoWindow(); var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); for (i = 0; i < markers.length; i++) { var data = markers[i] var myLatlng = new google.maps.LatLng(data.lat, data.lng); var marker = new google.maps.Marker({ , map: map, title: data.title }); (function (marker, data) { google.maps.event.addListener(marker, "click", function (e) { infoWindow.setContent(data.description); infoWindow.open(map, marker); }); })(marker, data); } } </script> <div id="dvMap" style="width: 500px; height: 500px"> </div> </div> </form>
C#:
protected void Page_Load(object sender, EventArgs e) { if (!this.IsPostBack) { DataTable dt = new DataTable("Tabela"); dt.Columns.Add("Name", typeof(string)); dt.Columns.Add("Latitude", typeof(string)); dt.Columns.Add("Longitude", typeof(string)); dt.Columns.Add("Description", typeof(string)); dt.Rows.Add("Mumbai", "18.964700", "72.825800", "Mumbai Teste"); dt.Rows.Add("Pune", "18.523600", "73.847800", "Pune Teste"); rptMarkers.DataSource = dt; rptMarkers.DataBind(); } }
Eu simulei um retorno do banco ai, porém na verdade estão fixos como poder ver. É só substituir com o mesmo retorno e manda executar que terá o seu resultado esperado.
E é claro, pode executar esse código sem precisar mexer em nada que o mesmo trará duas coordenadas para você de acordo com o Source do repeater no code behind.
Atenciosamente,
Samuel dos Anjos
- Sugerido como Resposta Samuel Rodrigues dos Anjos sexta-feira, 22 de março de 2013 17:43
- Editado Samuel Rodrigues dos Anjos sexta-feira, 22 de março de 2013 17:45
-
Boa tarde galera, demorei um pouco mas consegui chegar em um resultado final. Segue abaixo o código final.
Arquivo JS:
var map; var latitude; var longitude; var marker = null; var div = ''; // Carrega o script necessário para a geração dos mapas. function Inicializar() { window.onload = CarregarScript; latitude = $("input[id$='txtLatitude']").val(); longitude = $("input[id$='txtLongitude']").val(); if ((latitude == "") && (longitude == "")) { $("#map_canvas").hide(); } $("div[aria-labelledby*=ui-dialog-title-divVisualizaEnd] a[class*=ui-dialog-titlebar-close]").click(function (e) { e.preventDefault(); $("div[aria-labelledby*=ui-dialog-title-divVisualizaEnd] input[type=text]").each(function () { $(this).val(""); }); }); } function OnLoad() { CarregarMapaInicial(); GerarMapaPorEndereco(); } // Carrega o Google Maps JavaScript API. function CarregarScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=OnLoad"; document.body.appendChild(script); } // Carrega uma única vez o mapa inicial. function CarregarMapaInicial() { geocoder = new google.maps.Geocoder(); latitude = $("input[id$='txtLatitude']").val(); longitude = $("input[id$='txtLongitude']").val(); var map_canvas = document.getElementById("map_canvas"); if (map_canvas != null) { var myOptions = { zoom: 16, center: new google.maps.LatLng(latitude, longitude), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(map_canvas, myOptions); } if ((latitude == '' && longitude == '') || (latitude == '0' && longitude == '0')) { marker = null; latitude = longitude = "0"; } MarcaPonto(new google.maps.LatLng(latitude, longitude)); } // Gera o mapa de acordo com o endereço. function GerarMapaPorEndereco() { var cep = $("input[id$='txtCep']").val(); var logradouro = $("input[id$='txtLogradouro']").val(); var numero = $("input[id$='txtNumero']").val(); var cidade = $("input[id$='txtCidade']").val(); if ((cep != '') && (logradouro != '') && (numero != '') && (cidade != '')) { $("div[id$='map_canvas']").show(); if (map != null) { CarregarMapaInicial(); } EnquadraMapa(); var endereco = cep + " " + logradouro + " " + numero + " " + cidade; geocoder.geocode({ 'address': endereco, 'partialmatch': true }, Resultados); } $("#map_canvas").focus(); } // Exibe o mapa de acordo com o resultado. function Resultados(results, status) { if (status == 'OK' && results.length > 0) { map.fitBounds(results[0].geometry.viewport); map.setZoom(16); MarcaPonto(results[0].geometry.location); AtualizaCoordenadas(results[0].geometry.location); } else { alert("Endereço não encontrado."); } } // Marca um ponto no mapa function MarcaPonto(location) { if (map != null) { map.setCenter(location); if (marker == null) { marker = new google.maps.Marker({ map: map, nbsp;location, draggable: true }); } else { marker.setPosition(location); } google.maps.event.addDomListener(marker, 'dragend', function () { AtualizaCoordenadas(marker.getPosition()); }); } } // Atualiza os campos das coordenadas. function AtualizaCoordenadas(mapa) { $("input[id$='txtLatitude']").val(mapa.lat().toString()); $("input[id$='txtLongitude']").val(mapa.lng().toString()); } // Carrega as configurações necessárias para a opção mapa em tela cheia. function ConfigurarMapaTelaCheia() { // Cria a div que servirá de fundo para a janela do mapa. elemento = document.createElement('div'); elemento.setAttribute('id', "fundo"); elemento.style.position = 'absolute'; elemento.style.left = '0'; elemento.style.top = '0'; elemento.style.zIndex = '9000'; elemento.style.backgroundColor = '#000'; elemento.style.display = 'none'; document.forms[0].appendChild(elemento); // Adiciona o evento de esconder mapa caso o fundo seja clicado. $('#fundo').unbind("click").click(function (e) { e.preventDefault(); EsconderMapaTelaCheia(); }); // Adiciona o evento de esconder mapa caso a tecla esc seja pressionada. $(document).keyup(function (e) { if (e.keyCode == 27) { e.preventDefault(); EsconderMapaTelaCheia(); } }); } // Mostra o mapa em formato tela cheia. function MostrarMapaTelaCheia() { $('#fundo').height($(document).height()).width('100%').fadeTo("slow", 0.8); $("#map_canvas").height($(window).height() - 100).width($(window).width() - 100).css({ "position": "fixed", "top": "50px", "left": "50px", "z-index": "9999" }); EnquadraMapa(); } // Esconde o mapa em formato tela cheia. function EsconderMapaTelaCheia() { $('#fundo').hide(); $("#map_canvas").width(340).height(150).css({ "position": "relative", "float": "left", "top": "0", "left": "0" }); EnquadraMapa(); } //// Centraliza e enquadra o mapa de acordo com o tamanho do container. function EnquadraMapa() { if(google != null) { google.maps.event.trigger(map, 'resize'); map.setCenter(new google.maps.LatLng(latitude, longitude)); map.setZoom(16); } } // Insere as funções na lista de funcões - será chamado no Init.js. arrFNC.push(Inicializar); arrFNCSys.push(Inicializar); arrFNCSys.push(OnLoad);
--------------------------------------------------------
Recebo esses valores dos textBox de CEP, Cidade, Endereço, Numero. E também utilizo dois campos de latitude e longitude para mostrar esses dados.
Obrigado pela ajuda.
- Sugerido como Resposta Samuel Rodrigues dos Anjos segunda-feira, 1 de abril de 2013 20:19
- Marcado como Resposta Seilor Bonancio JuniorModerator terça-feira, 2 de abril de 2013 10:43
-
Prezado Samuel dos Anjos, este seu post é de 22 de março e em 18 de março eu tinha postado este mesmo código aqui:
http://social.msdn.microsoft.com/Forums/pt-BR/aspnetpt/thread/2731e90e-5cb8-416e-beb0-a7fc0901052d
Eu peguei este código na net e adaptei para esta forma acima, seria bacana marcar lá como resposta que ajudará os usuários nas próximas pesquisas.
Abraço
Ângelo
- Sugerido como Resposta Angelo.Net terça-feira, 2 de abril de 2013 17:32
-
Cara,
Não estamos aqui disputando quem é melhor ou fez alguma coisa, se o nosso amigo Rafael não encontrou o que precisava antes de eu postar alguma coisa, é porque estava mal referenciado as informações de uma forma que não o ajudou com as pesquisas.
Criei um projeto disponível como exemplo para ser baixado na galeria antes destas coincidências de informações acontecerem:
http://code.msdn.microsoft.com/Utilizando-API-GoogleMaps-644771d1
Porém quero ressaltar que não foi através do seu código que criei essa solução, pois existe muitas informações na internet hoje para sabermos o que é possível fazer ou não:
https://developers.google.com/maps/documentation/javascript/tutorial?hl=pt-BR#api_key
https://developers.google.com/maps/?hl=pt-br
http://maps.google.com/?vector=1
Apenas quero deixar claro que não existe código diferente quando se trata de uma solução padrão, pode existir formas diferentes de como se foi feito. Mas no nosso caso a coincidência aconteceu.
Porém não vou deixar de marcar sua thread como útil também, pois se trata do mesmo assunto com solução.
Atenciosamente, Samuel dos Anjos
-
Cara,
Não estamos aqui disputando quem é melhor ou fez alguma coisa, se o nosso amigo Rafael não encontrou o que precisava antes de eu postar alguma coisa, é porque estava mal referenciado as informações de uma forma que não o ajudou com as pesquisas.
Criei um projeto disponível como exemplo para ser baixado na galeria antes destas coincidências de informações acontecerem:
http://code.msdn.microsoft.com/Utilizando-API-GoogleMaps-644771d1
Porém quero ressaltar que não foi através do seu código que criei essa solução, pois existe muitas informações na internet hoje para sabermos o que é possível fazer ou não:
https://developers.google.com/maps/documentation/javascript/tutorial?hl=pt-BR#api_key
https://developers.google.com/maps/?hl=pt-br
http://maps.google.com/?vector=1
Apenas quero deixar claro que não existe código diferente quando se trata de uma solução padrão, pode existir formas diferentes de como se foi feito. Mas no nosso caso a coincidência aconteceu.
Porém não vou deixar de marcar sua thread como útil também, pois se trata do mesmo assunto com solução.
Atenciosamente, Samuel dos Anjos
E no final das contas o campeão foi o Sr. Mudassar Kham
http://www.aspsnippets.com/Articles/ASPNet-Google-Maps-V3-with-Multiple-Markers-Database-Example.aspx
Que publicou o artigo antes de todo mundo e não recebeu nenhum crédito direto (até o exemplo de repeater é IGUALZINHO) hehehe.- Editado Sidnei Carreiro sábado, 10 de agosto de 2013 23:25 erro de digitação