none
Utilizar google maps com asp.net. RRS feed

  • 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.

    sexta-feira, 22 de março de 2013 12:57

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

    sexta-feira, 22 de março de 2013 13:45
    Moderador
  • 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.

    segunda-feira, 1 de abril de 2013 19:00

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

    sexta-feira, 22 de março de 2013 13:45
    Moderador
  • 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


    sexta-feira, 22 de março de 2013 17: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.

    segunda-feira, 1 de abril de 2013 19:00
  • 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
    terça-feira, 2 de abril de 2013 17:22
  • 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

    quarta-feira, 3 de abril de 2013 16:26
  • 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
    sábado, 10 de agosto de 2013 23:24