Campo de busca

Categoria Programação

Google Maps API v3: Busca de endereço e Autocomplete

Google Maps API v3: Busca de endereço e Autocomplete

Por | 29 de julho, 2012 | 290 comentários

Atualização em 05/08/2017:
Pessoal, escrevi esse post há uns bons anos atrás e infelizmente atualmente não o mantenho atualizado, nem respondo os comentários. Caso você tenha alguma dúvida, dê uma lida nos comentários para ver se a sua dúvida já foi respondida.

---------

Fala pessoal, tudo certo?

Recentemente em um projeto, nós tivemos que fazer uma integração com o Google Maps, onde a partir de um endereço digitado pelo o usuário, o mapa tinha que mostrar a  localização desse endereço e nos retornar a latitude e a longitude desse ponto, para que pudéssemos armazená-los em um banco de dados.

Para reproduzir esse cenário, utilizamos o Google Maps JavaScript API v3 e, para enriquecer a experiência do usuário, usamos também o jQuery UI – Autocomplete.

API key

Para começarmos, siga esse tutorial do próprio Google para pegarmos a API key, que nos permitirá monitorar a nossa aplicação e também é útil ao Google, caso ele tenha que entrar em contato conosco para falar a respeito da nossa aplicação.

O uso da API key não é obrigatório se a sua aplicação não exceder o limite de consultas diário. Caso você exceda o limite diário, você precisará da API key para aumentar o limite de consultas ou para comprar uma quota de consulta maior.

Exibindo o Google Maps

Antes de exibir o Google Maps em nossa página, vamos criar um formulário, onde teremos um campo de endereço para a pessoa digitar e um botão para exibir o endereço no Google Maps. Ficará assim:

<form method="post" action="" id="">   
    <fieldset>
        <legend>Google Maps</legend>   

        <div>
            <label for="txtEndereco">Endereço:</label>
            <input type="text" id="txtEndereco" name="txtEndereco" />
        </div>
        <div>
            <input type="button" id="btnEndereco" name="btnEndereco" value="Mostrar no mapa" />
        </div>

        <div id="mapa" style="height: 500px; width: 500px">
        </div>

        <div>
            <input type="submit" value="Enviar" name="btnEnviar" />
        </div>

        <input type="hidden" id="txtLatitude" name="txtLatitude" />
        <input type="hidden" id="txtLongitude" name="txtLongitude" />
    </fieldset>
</form>

Está vendo aquela div com o id mapa? É lá que iremos exibir o Google Maps. Para isso, inclua o script do Google Maps JavaScript API v3 em sua página:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=ColoqueASuaKeyAqui&amp;sensor=false"></script>

Agora vamos criar um arquivo chamado mapa.js, que será responsável por fazer a chamada à API do Google Maps e cuidar das interações da nossa página. Para fazer a chamada ao Google Maps, no evento ready do nosso documento, vamos chamar a função initialize que ficará responsável por inicialiazar o Google Maps:

var geocoder;
var map;
var marker;

function initialize() {
    var latlng = new google.maps.LatLng(-18.8800397, -47.05878999999999);
    var options = {
        zoom: 5,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("mapa"), options);

    geocoder = new google.maps.Geocoder();

    marker = new google.maps.Marker({
        map: map,
        draggable: true,
    });

    marker.setPosition(latlng);
}

$(document).ready(function () {
    initialize();
});

Como vocês podem ver, iremos utilizar o jQuery. Faça o download do jQuery e coloque-o na sua página:

<script type="text/javascript" src="jquery.min.js"></script>

Tcharam! O mapa está sendo exibido! Estamos no caminho certo ;)

Exibindo no mapa o endereço digitado

Para que ao digitar o endereço o mesmo apareça no mapa, vamos utilizar o botão “Mostrar no mapa” e aproveitaremos também o evento blur do campo endereço.

Como em ambos os casos teremos o mesmo código para exibir o endereço do mapa, vamos colocá-lo em uma função, que ficará responsável por pegar o endereço, passá-lo para a API utilizando o geocoder.geocode que por sua vez nos retorná a latitude e longitude do endereço digitado. Vamos guardar a latitude e a longitude em dois campos escondidos na página, para que possamos salvá-los posteriormente. Para isso, vamos acrescentar a seguinte função dentro do evento $(document).ready().

$(document).ready(function () {
    ...

    function carregarNoMapa(endereco) {
        geocoder.geocode({ 'address': endereco + ', Brasil', 'region': 'BR' }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[0]) {
                    var latitude = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();

                    $('#txtEndereco').val(results[0].formatted_address);
                    $('#txtLatitude').val(latitude);
                    $('#txtLongitude').val(longitude);

                    var location = new google.maps.LatLng(latitude, longitude);
                    marker.setPosition(location);
                    map.setCenter(location);
                    map.setZoom(16);
                }
            }
        });
    }
});

E fazemos a chamada dessa função no evento click do botão “Mostrar no mapa” e no evento blur do campo endereço:

$(document).ready(function () {
    ...

    $("#btnEndereco").click(function() {
        if($(this).val() != "")
            carregarNoMapa($("#txtEndereco").val());
    })

    $("#txtEndereco").blur(function() {
        if($(this).val() != "")
            carregarNoMapa($(this).val());
    })

});

Agora tá ficando bonito!

Mas e se a pessoa quiser ajustar o marcador do Google Maps, mudando o endereço digitado originalmente? Como atualizar o endereço a partir do marcador do Google Maps?

Localização reversa

Caso a pessoa queira fazer o processo contrário, ou seja, mexer no marcador e atualizar o endereço, vamos utilizar novamente o geocoder.geocode, só que dessa vez, ao invés de passarmos o endereço para ele, vamos passar a posição atual do marcador e a partir dela, o geocoder.geocode irá nos retornar o endereço, a latitude e a longitude do ponto:

$(document).ready(function () {
    ...

    google.maps.event.addListener(marker, 'drag', function () {
        geocoder.geocode({ 'latLng': marker.getPosition() }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                    if (results[0]) { 
                    $('#txtEndereco').val(results[0].formatted_address);
                    $('#txtLatitude').val(marker.getPosition().lat());
                    $('#txtLongitude').val(marker.getPosition().lng());
                }
            }
        });
    });
});

Utilizando o Autocomplete

Para ajudar o usuário, podemos mostrar algumas sugestões de endereços baseadas no endereço digitado pelo usuário.

Para isso, iremos utilizar o  jQuery UI – Autocomplete. Quando você fizer o download, cuidado para não baixar todos os widgets do jQuery UI. Para facilitar, na página do download, clique em “Deselect all components” e depois em Widgets, selecione o “Autocomplete”. Com isso ele só vai baixar o Autocomplete e as dependências necessárias.

Depois de baixado, vamos colocá-lo em nossa página:

<script type="text/javascript" src="jquery-ui.custom.min.js"></script>

No nosso arquivo mapa.js, vamos colocar o código que irá habilitar o autocomplete. O código contém o evento source, que definiremos nossa fonte de dados, e o evento select que será acionado quando a pessoa clicar em alguma sugestão do autocomplete.

$(document).ready(function () {
    ...

    $("#txtEndereco").autocomplete({
        source: function (request, response) {
            geocoder.geocode({ 'address': request.term + ', Brasil', 'region': 'BR' }, function (results, status) {
                response($.map(results, function (item) {
                    return {
                        label: item.formatted_address,
                        value: item.formatted_address,
                        latitude: item.geometry.location.lat(),
                        longitude: item.geometry.location.lng()
                    }
                }));
            })
        },
        select: function (event, ui) {
            $("#txtLatitude").val(ui.item.latitude);
            $("#txtLongitude").val(ui.item.longitude);
            var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
            marker.setPosition(location);
            map.setCenter(location);
            map.setZoom(16);
        }
    });
});

Pronto! Agora temos uma pesquisa completa de endereços utilizando o Google Maps!

Agora se você quiser saber como criar um mapa personalizado, com os pontos obtidos nesse artigo, veja aqui como criar um mapa personalizado utilizando a API do Google Maps.

Se você tem alguma sugestão para melhorar o código, o mesmo está no meu GitHub.

Qualquer dúvida, sugestão, crítica ou doação de cerveja, deixe um comentário :)

Até a próxima!

 

Deixe um comentário

Queremos saber o que você pensa sobre esse post! Ficaremos felizes se você nos deixar um comentário :-)

Tenha em mente que os comentários são moderados, e os links possuem rel="nofollow". Então por favor, não faça spam de palavras-chave, senão o seu comentário será excluído. Obrigado!

 

[290] Comentários  

Rafaela

Ótimas instruções para aperfeiçoar o uso do Google Maps. Este recurso é bem interessante mesmo e válido, especialmente para empresas. Vale a pena experimentar e aguardar os resultados dos clientes.

13-08-2012 às 20:26 Responder

Evandro

Todo site que tenha uma sede física, precisa ter hoje me dia uma página com localização usando o google maps. Este serviço tornou-se essencial para uma melhor localização da empresa, facilita quem quer encontrar a mesma.

16-08-2012 às 16:53 Responder

Tiago

Parabéns pelo post.

Muito bem explicado.

29-10-2012 às 09:48 Responder

Claudio Caetano

Olá Rodolfo, tudo bem? Muito bom seu tutorial, consegui fazer, mas ao adaptá-lo á minha necessidade, me deparei com uma dificuldade. Estou tentando, mas não estou conseguindo: Ao invés de ele atribuir o endereco todo a uma variável, seria possível quebrá-la? Assim: ao invés de [code] alert("Endereço: " + endereco + "\nLatitude: " + latitude + "\nLongitude: " + longitude);[/code] ele exibisse: [code]alert("Endereço: " + route + " - " + locality + " - " + administrative_area_level_2 + " - " + post_box + " locality \nLatitude: " + latitude + "\nLongitude: " + longitude);[/code]

08-01-2013 às 16:01 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Claudio Caetano

Olá Claudio, tudo certo e com você?

É possível quebrar o endereço sim. Para você ver as opções, veja o link: https://developers.google.com/maps/documentation/geocoding/#GeocodingResponses

Veja que onde tem “results[0]” no arquivo “mapa.js”, estou usando o “formatted_address”.

Abs!

08-01-2013 às 18:35 Responder

Wendell Albino

Em resposta a Rodolfo Pereira

Excelente artigo!

Estou tentando quebrar o endereço mas estou tendo uma dificuldade:

Tento pesquisar o endereço:
"Rua Antônio Domingos Franco, Ituiutaba - MG, 38307-068, República Federativa do Brasil"

Quando tento pegar apenas o 'route' eu faço: results[0].address_components[0].short_name

Desta forma funciona.
Resultado: "R. Antônio Domingos Franco"

Mas seu eu inserir o número do logradouro na pesquisa:
"Rua Antônio Domingos Franco, Ituiutaba - MG, 735, 38307-068, República Federativa do Brasil"

O resultado será: "735"
O motivo disso que percebi é que o array 'address_components' aumenta conforme as informações passadas para a pesquisa. Desta forma não posso garantir que a primeira posição do array será o 'route'.

Você tem alguma sugestão para resolver isso?

09-10-2013 às 12:04 Responder

Fernando

Rodolfo, muito bom esse post.
Porém, tenho uma dúvida. Quando aparecem diversas opções de endereço e quando clico em uma delas, o primeiro endereço aparece selecionado. Por que?
Abcs,
Fernando

15-01-2013 às 18:35 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Fernando

Fernando, veja se nessa demo isso ocorre: http://www.princiweb.com.br/demos/google-maps-api-v3-busca-endereco-autocomplete/

Se sim, qual o navegador e versão você está utilizando?

Abs!

16-01-2013 às 12:28 Responder

Pedro

Rodolfo, existe uma maneira de ele já saber qual é o meu endereço ao entrar na página?

carregar de forma automática?

29-01-2013 às 10:36 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Pedro

Pedro, para pegar o endereço do usuário de forma automática, utilize o Geolocation – http://www.w3schools.com/html/html5_geolocation.asp

Integrando com o Google Maps, o código ficaria algo assim:

if (navigator.geolocation) {
   navigator.geolocation.getCurrentPosition(function (position)
      { var ponto = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      map.setCenter(ponto);
      map.setZoom(13);
   });
}

29-01-2013 às 16:27 Responder

Umil

Em resposta a Rodolfo Pereira

uma duvida, podemos capturar automaticamente o endereco sem claramente indicar isso no site?, soment estou preocupado com a privacidade. a outra parte da pergunta seria, por acaso o google analytics captura essa informacao ja e portanto nao precisaria usar esse codigo adicional? Obrigado

18-09-2014 às 17:36 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Umil

Olha, me parece correto você perguntar para a pessoa se ela deseja compartilhar as informações dela com você.

Se o Geolocation, dê uma olhada neste serviço: http://www.hostip.info/use.html

E sobre o GA, ele captura sim algumas informações de localização, como Cidade, País, etc.

08-10-2014 às 11:20 Responder

Gonçalo

Ola boa tarde,

fala gonçalo de portugal.
sou aluno de informatica numa
universidade em portugal, e o
que voce exibiu aqui vai ser
de muita utilidade.
Mas eu tenho uma ideia, que
gostaria que me podesse ajudar, ou seja, no seguimento
desta sua ideia, quero construir
uma função que carregue o youtube e mostre algo sobre a cidade. Será possivel?
Caro amigo, me responda para meu email.
Aguardo com muita ansiedade.

Valeu!

Gonçalo – Portugal

04-02-2013 às 10:29 Responder

Rafael

Muito bom o post.

Uma pergunta:

É possível ao invés de buscar por endereço buscar por exemplo nome de uma empresa e pegar o endereço dela?

Obrigado

20-02-2013 às 12:07 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rafael

Fala Rafael, tudo certo?

Então, creio que para você buscar algum local específico (seja uma empresa, restaurante, etc.), é só usar a API do Google Places. Segue o link pra você dar uma olhada: https://developers.google.com/places/documentation/?hl=pt-BR

Abs!

21-02-2013 às 20:11 Responder

Diogo Soares

Parabéns cara, excelente exemplo

20-02-2013 às 20:07 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Diogo Soares

Obrigado Diogo :-)

Abs!

21-02-2013 às 10:34 Responder

Marco Sousa

Simplesmente incrível. Bem explicado e de maravilhosa utilidade.

03-03-2013 às 20:42 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Marco Sousa

Obrigado Marco! Em breve publicarei um novo post sobre a API do Google Analytics, fique ligado ;-)

05-03-2013 às 09:23 Responder

Michael Marques

Olá, estou com um problema para aumentar o zoom do mapa automaticamente em um guia comercial que estou trocando o maps do v2 para o v3, quando existem marcadores fora dos limites do zoom. Um exemplo é o do script http://br.ai/maps/ onde eu fiz um exemplo do problema que tenho (veja o script para visualizar como estou usando o maps v3). Tenho definido um zoom defaut para casos de não retornar nenhum endereço e o mapa esta com zoom de 15, mas quando existem vários marcadores e alguns deles ficaram para fora dos limites do zoom defaut no v2 eu tinha uma função que ajustava os limites mas no v3 não achei em lugar nenhum esta função, por isso agradeceria muito se você me desse uma luz

22-03-2013 às 14:22 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Michael Marques

Fala Michael, beleza?

Dê uma olhada nesse link: http://salman-w.blogspot.com.br/2011/03/zoom-to-fit-all-markers-on-google-map.html

Abs!

26-03-2013 às 17:27 Responder

Nimura

parabens por publicar seu codigo

03-04-2013 às 10:00 Responder

Felipe Ribeiro

Muito bom o script, no entanto, estou com uma dúvida em relação ao InfoWindow, como conseguimos incluir essa opção no script?

10-04-2013 às 11:34 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Felipe Ribeiro

Fala Felipe! Trataremos sobre o InfoWindow em um futuro post, fique ligado ;-)

10-04-2013 às 21:24 Responder

Robson

Rodolfo, boa tarde.

Implementei o artigo e no meu caso, está aparecendo no auto complente os resultados encontrados e em inglês. No seu não aparece. Você sabe como desabilitar?

obrigado,

22-04-2013 às 17:59 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Robson

Fala Robson, tudo certo?

Então cara, quando você passar o endereço digitado pelo usuário para o “geocoder.geocode”, é só você concatenar “‘, Brasil’” no endereço, e passar mais um parâmetro de região, que no caso é “‘region’: ‘BR’”.

Veja a função “carregarNoMapa” no meu código.

Abs!

23-04-2013 às 09:32 Responder

Cleiton

fiz o exemplo mas me retorna isso:

O servidor da API do Google Maps rejeitou seu pedido. O parâmetro “sensor” especificado no pedido deve ser definido para “true” ou “false”.

na minha chamada da api tá assim:

onde estou errando?

08-05-2013 às 00:06 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Cleiton

Fala Cleiton,

A sua chamada não apareceu no comentário :-(

Pode colocar de novo?

Abs!

16-09-2013 às 17:57 Responder

Rudy

Parabéns meu chara, muito bom o post.
Voce poderia fazer um post falando de como clocar varios marks no mapa através de busca num banco mysql em um intervalo de datas.

Parabéns pelo blog

09-05-2013 às 12:10 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rudy

Obrigado, Rudy!

Ainda esse mês farei um post de como colocar os marcadores no mapa. Fique ligado!

Abs!

09-05-2013 às 13:27 Responder

Angelo Cavallet

Esse tutorial me ajudou muito numa ferramenta onde era necessário pesquisar locais tanto pelo google quanto pelo banco de dados interno!
Com o autocomplete ficou muito fácil :D

Obrigado

13-05-2013 às 16:58 Responder

Albert

Otima postagem, obrigado por compartilhar um pouco do seu conhecimento.

29-05-2013 às 10:57 Responder

Érik Thiago

Opa, muito bom o post. Mais cara preciso de uma ajuda. No caso, como poderíamos guardar as coordenadas no banco e no momento em que fosse requisitado a mostra do endereço, o maps puxava o valor das coordenadasdo banco e mostraria o endereço ?

04-06-2013 às 13:53 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Érik Thiago

Oi Érik,

Para guardar no banco de dados, basta pegar os valores dos campos de latitude e longitude que estão ocultos no formulário.

Para exibir esse ponto, veja esse post: http://www.princiweb.com.br/blog/javascript/google-maps-api-v3-criando-mapa-personalizado/

Abs!

05-06-2013 às 15:36 Responder

rodrigo

Em resposta a Rodolfo Pereira

bom dia, gostaria de saber como pegar os campos ocultos e inserir no banco, gostaria que vc colocasse um exemplo de como fazer isso

12-07-2014 às 15:41 Responder

Em resposta a rodrigo

Se você estiver usando PHP, dá uma lida aqui: http://html.net/tutorials/php/lesson19.php

16-07-2014 às 17:44 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a rodrigo

Se você estiver usando PHP, dá uma lida aqui: http://html.net/tutorials/php/lesson19.php

16-07-2014 às 17:44 Responder

rodrigo

Em resposta a Rodolfo Pereira

opa, valeu mesmo, com a sua ajuda conseguir fazer, e usei o seu exemplo para meu projeto, se quiser dê uma olhada,
http://mapacrime.bl.ee/ajudalist.php na pagina de login registre-se e poderá ver o sistema piloto para adição de pontos de perigo, estou trabalhando para deixar a visualização publica e por estado.

16-07-2014 às 21:06 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a rodrigo

Opa, vi aqui. Show de bola, parabéns!

18-07-2014 às 11:02 Responder

Robson Cardoso

Bom dia!
Na minha implementação ao entrar com um endereço específico, o mapa aponta para uma região totalmente errada, no caso apontou para o México! Mesmo usando o region: BR. Vi que no seu demo acontece a mesma coisa, porém no google maps ele acerta o endereço! Alguma dica?
Eis o endereço que usei:
“Rua Coronel H dos Santos, 100 – Centro Politécnico, Curitiba, PR”

07-06-2013 às 09:17 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Robson Cardoso

Oi Robson, boa tarde! Tudo certo?

Realmente, o que você falou acontece de verdade. Dei uma pesquisada para saber o motivo, e infelizmente não encontrei nada a respeito. Caso você descubra o que ocasiona isso, me avise.

Abs!

12-06-2013 às 13:32 Responder

rodrigo faustino

Em resposta a Robson Cardoso

eu sei o porque. vc esta usando uma forma diferente de nomeclatura o correto é "Av. Cel. Francisco Heráclito dos Santos,100".
quando vc digitar ou colar da forma que aqui esta no final ja aparece pr e cep ai é só clicar, blz.

17-07-2014 às 13:33 Responder

Ricardo

Muito bom, obrigado Rodolfo, e parabéns pelo artigo.

02-07-2013 às 08:04 Responder

Luis

Muito bom e bem explicado valeu pela iniciativa, concerteza vou dar um fork neste projeto no github

02-07-2013 às 14:01 Responder

José Antonio

Prabéns Rodolfo ! Excelente artigo !! Muito claro e didático.

Uma pergunta: você já conseguiu usar esta rotina de exibição de mapas do Google dentro de um popup criado com o modal dialog da JQuery-UI ? Já procurei bastante, achei vários "workarounds" mas nada que funcione 100%. Se tiver alguma sugestão. Não estou querendo usar um popup normal.

Grato pela atenção.

01-08-2013 às 17:07 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a José Antonio

José,

Criando uma div, colocando o mapa dentro dela e após isso chamar o $( "#mapa" ).dialog(); não resolve o problema? Fiz um teste aqui e o mapa abriu normalmente dentro do dialog.

Abs!

02-08-2013 às 17:59 Responder

José Antonio

Em resposta a Rodolfo Pereira

Olá Rodolfo !

Grato pela resposta !

Apenas hoje consegui voltar a este problema. Neste caso o que ocorre é que eu já tenho um dialog() aberto, onde é exibido um html com abas contendo os diversos dados do fornecedor. A idéia seria acrescentar mais uma aba com o mapa. Só que, devido ao dialog() já estar aberto, quando tento adicionar o mapa - creio que por razões segurança - o navegador não aceita o "document.write" da api do Google e o mapa não é incluído.

Estou pensando na melhor maneira de resolver, talvez fazer um "popup" separado para o mapa ou tentar carregá-lo antes em outra div.

Sugestões são bem vindas :-D

13-08-2013 às 16:12 Responder

José Antonio

Em resposta a José Antonio

Para registro, consegui resolver o problema acima de uma forma até simples: Dentro da nova aba criei uma tag "iframe" e dentro desta chamei o módulo que gera o mapa. Funcionou mas, especificamente no Firefox (versão 23.0.1, a mais recente no momento) o mapa era exibido fora de centro e ponto marcado não ficava visível. Após pesquisar bastante a solução foi carregar o mapa (via JQuery) apenas quando a aba que contém o iframe é clicada. Pelas explicações que li isso ocorre devido a div que está como hidden ter as coordenadas x/y - que servem de base - consideradas 0 (zero). Curioso que nos outros navagadores onde testei (Chrome, Chromium e Opera) este problema não se manifesta.

19-08-2013 às 10:37 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a José Antonio

Oi José,

Realmente, já tive esse problema!

Obrigado por compartilhar a sua experiência.

Abs!

20-08-2013 às 00:07 Responder

Abelardo Barbosa

Ops, parabéns pelo artigo, excelente!!!

Estou implementando a busca de cidades, regiões e países para um trabalho de faculdade.
Entretanto, gostaria de saber se é possível estender a busca para encontrar também estabelecimentos como faz a API Google Places Autocomplete (Establishments and Geocodes)?
Referência: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete?hl=pt-BR&csw=1

Grato!

22-08-2013 às 15:30 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Abelardo Barbosa

Oi Abelardo,

É possível sim. Mande-me o seu código por e-mail e vamos ver isso melhor :-)

Abs!

27-08-2013 às 18:10 Responder

Abelardo Barbosa

Em resposta a Abelardo Barbosa

Ops, Rodolfo!

Fazendo uma análise mais refinada, preciso que o retorno no autocomplete seja de cidades, regiões, países e estabelecimentos (empresas, etc).
Creio que talvez seja melhor utilizar a api Google Places.
Tem como passar parâmetro para retornar resultados do tipo establishment aqui "geocoder.geocode({ 'address':"?
Você tem alguma dica ou sugestão?
Grato!

05-09-2013 às 08:06 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Abelardo Barbosa

Com o geocoder do Google Maps Javascript não é possível. Crieo que você tenha que fazer uma junção da API do Google Maps e do Google Places.

16-09-2013 às 17:55 Responder

Lennon

Primeiramente parabenizo pelos posts. Eu sou iniciante em programação, e estou tentando incrementar o google maps em meu projeto Asp.Net, tenho muitas dificuldades para adicionar funcionalidades até pela minha inexperiência, e gostaria de saber se você poderia me ajudar(remuneradamente). Se sim por favor entrar em contato pelo meu e-mail.

24-08-2013 às 20:17 Responder

Gustavo Passos

Parabéns Rodolfo por compartilhar seu conhecimento com sabedoria.
Obrigado!

28-08-2013 às 14:47 Responder

Marcos

Olá Rodolfo, antes de mais nada parabéns pelo post. Mas estou passando pela seguinte dificuldade. Preciso trazer no autocomplete os endereços de apenas uma determinada cidade, vi na documentação que é necessário passar como parâmetro components, no meu caso (postal_code: corresponde a postal_code e postal_code_prefix.)...porém não estou conseguindo adicionar este filtro no autocomplete.

29-08-2013 às 16:11 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Marcos

Oi Marcos,

Para usar o Postal Code, adicione o parâmetro "'componentRestrictions': {postalCode: '90210'}" (sem aspas) no geocoder.geocode, junto com o "address". Ficará assim:

geocoder.geocode({ 'address': request.term, 'componentRestrictions': {postalCode: '90210'} }, function (results, status) { ...

Outros filtros você encontra aqui: https://developers.google.com/maps/documentation/javascript/reference?hl=th-TH&csw=1#Geocoder

Abs!

30-08-2013 às 19:39 Responder

Umil

Em resposta a Rodolfo Pereira

Ola Rodolfo, parabens pelo post. muito educativo. uma duvida, estou tentando colocar no mapa parques proximos do CEP informado. mas nao sei se simplesmente escolher type=park eh o suficiente. abaixo um pedaco do cogido.

function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode({
        'address': address
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
            var request = {
                location: results[0].geometry.location,
                //radius: 50000,
                name: 'park',
                //keyword: 'park',
                type: ['park']
            };
            infowindow = new google.maps.InfoWindow();
            var service = new google.maps.places.PlacesService(map);
            service.nearbySearch(request, callback);
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}

18-09-2014 às 17:30 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Umil

Mas o próprio Google Maps já mostra os parques por padrão. Por que você está querendo forçar isso?

08-10-2014 às 11:25 Responder

Erich Casagrande

Rodolfo , Muito bacana usei como base para um sistema de polígonos com busca (no caso usando seu exemplo muito bom!)
Se alguem se interessar por poligonos no maps
http://www.startutorial.com/articles/view/php-google-map-polygon-shape-creator
Obrigado por compartilhar ! :D

20-09-2013 às 14:19 Responder

Rivaldo Rosendo

nem ficou bom.... ficou perfeito.

08-10-2013 às 19:41 Responder

Natália

Olá Rodolfo, estou com problemas para implementar esta solução, pois não sei qual arquivo do jquery tem que baixar no site que vc mostrou, tem várias versão e me perdi, desde já gradeço a atenção

26-10-2013 às 15:05 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Natália

Oi Natália,

No site do jQuery, temos duas opções para baixar: 1.x e a 2.x.

Você deve escolher a 1.x caso a sua aplicação tenha que dar suporte ao IE 6, 7 e 8. Já a versão 2.x, você deve escolher caso a sua aplicação não tenha que dar suporte ao IE 6, 7 e 8.

Decidido isso, é só baixar a versão "compressed" do jQuery.

É isso.

29-10-2013 às 18:13 Responder

Norman

Cara, seguinte... quando se clica em enviar abre uma janela com os dados marcados, gostaria de quand aperta nesse botao enviar os dados por POST para uma funcão minha em php para salvar no banco, isso é possivel?

05-11-2013 às 21:42 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Norman

Sim, basta armazenar a latitude e a longitude em campos escondidos, e no POST da página recuperar esses valores no back-end.

02-12-2013 às 14:34 Responder

murilo dark

Parabéns Rodolfo pelo artigo, simples direto e funcional.

05-11-2013 às 23:12 Responder

Werdeson B da Silva

Conseguir gravar a latitude e logitudo no banco de dados, como pegar isso agora e formar o mapa para o usuário ver a localização do endereço?

08-11-2013 às 17:54 Responder

Jones

Em resposta a Werdeson B da Silva

Boa noite Wendeson
poderia me ensinar como fez para jogar os dados para um banco de dados
e se conseguiu utilizar eles em outro mapa?
estou precisando exatamente disso
desde já agradeço

21-03-2014 às 21:55 Responder

Ribeiro

Parabéns. Ótimas dicas.

24-11-2013 às 00:04 Responder

Fernando Jr

Rodolfo parabéns pelo post,
realmente muito útil e de uma clareza tamanha!!

Já li outros post's seus, sempre incisos e objetivos,
obrigado por toda a contribuição que fazes a comunidade
de desenvolvedores.

Abraço.

13-01-2014 às 14:35 Responder

Leandro

Bom dia Rodolfo,

Será que você consegue me ajudar?

Nem todos os endereços que aparecem na listagem do autocomplete vêm com CEP.
Seria alguma limitação do próprio Google?

Tenho uma outra dúvida. Mais conceitual.

Tenho comigo uma base de CEP no Sql Server. Até poderia fazer uma autocomplete próprio, mas o do Google é sensacional.

Quando o usuário escolhe o endereço, eu preciso de um identificador para verificar nessa minha base se o endereço existe. Esse identificador seria o CEP. Caso não exista nessa base, eu teria que incluir.

Como fazer esse "de-para" de uma maneira correta? Porque eu posso até não ter um CEP na minha base, mas provavelmente o bairro já vai existir e como fazer se na minha base tal bairro estiver escrito de uma forma diferente do resultado do Google?
Será que é necessário manter ums base? Por outro lado, depender totalmente do Google significa um risco?

Abração e parabens pelo trabalho!

22-01-2014 às 11:10 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Leandro

Na hora de pegar o endereço, ao invés de usar o "formatted_address", tente utilizar o "postal_code" do "address_components": https://developers.google.com/maps/documentation/geocoding/#GeocodingResponses. Com isso você pega exatamente o CEP de um determinado endereço.

Sobre o risco de depender do Google, é muito relativo. Você tem que entender o seu cenário e ver se compensa ou não.

28-01-2014 às 14:01 Responder

Leandro

Em resposta a Rodolfo Pereira

Brigadao Rodolfo.

30-01-2014 às 23:01 Responder

Ronan

Olá Rodolfo, estou precisando fazer um ajuste no meu site pois o campo de busca de endereços não mostra algumas sugestões como por exemplo "avenida paulista", deve ser algo relacionado com a api V3 do google. O meu site é profissionaletico.com.br. Me ajude por favor, nós precisamos que o autocomplete se comporte igual neste exemplo: http://www.princiweb.com.br/demos/google-maps-api-v3-busca-endereco-autocomplete/

11-02-2014 às 13:45 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Ronan

Cara, é só seguir as instruções nesse post... tá explicadinho como fazer!

Se você tiver alguma dificuldade em algum ponto específico, me avise.

20-02-2014 às 16:33 Responder

Rodrigo

Rodolfo... seu post é muito bom... porem to com um erro no seguinte linha do script - map.fitBounds(latlngBounds);

Se você poder me auxiliar nesse ajuste...
Pois no meu servidor localhost ta funcionando perfeito... mas quando passo pra rodar no server de publicação o script acusa esse erro -

* Cannot call method 'fitBounds' of undefined.

11-02-2014 às 18:10 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rodrigo

Coloca o link aqui dessa página para que eu possa dar uma olhada.

20-02-2014 às 16:32 Responder

Ricardo

Fala Rodolfo, blz cara?
parabéns pelo post... é uma mão na roda rsrs

eu consegui usar tudo direitinho, só esbarrei em um problema:
estou tentando colocar uma variavel no lugar das cordenadas pra ele trazer carregado já no mapa uma coordenada do banco, só que ele nao aparece nada... sera que vc sabe o que pode estar acontecendo???

mudei nessa linha:
var latlng = new google.maps.LatLng(-18.8800397, -47.05878999999999);

19-02-2014 às 22:55 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Ricardo

E que variável seria essa? Coloca o código aqui para eu dar uma olhada.

20-02-2014 às 16:13 Responder

Raphael Fernando

Excelente!!

20-02-2014 às 15:12 Responder

Michel Alves

Muito massa seu projeto. Preciso fazer algo parecido e vc me ajudou bastante. Obrigado e parabéns Rodolfo

07-03-2014 às 09:51 Responder

roberto

Rodolfo Parabéns!!

Consegui utilizar perfeitamente para a minha necessidade, porém não consegui remover o agrupamento de marcadores, poderia me ajudar?

11-03-2014 às 09:07 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a roberto

Para remover o agrupamento dos marcadores, basta não utilizar o MarkerClusterer.

12-03-2014 às 11:12 Responder

Anderson Lira

Parabéns cara, muito bom o post. Tipo salvou minha vida pras próximas 5 reencarnações.

20-03-2014 às 20:20 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Anderson Lira

Huhuahuahuahuaha!

09-04-2014 às 20:57 Responder

Joel

Cara muito bom teu POST... Implementei e deu certo porém está gerando somente uma parte do mapa, tipo não carrega o mapa inteiro. Posso anexar uma imagem para você ver....

24-03-2014 às 14:51 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Joel

Manda o link da imagem! Se tiver o link da aplicação rodando, melhor ainda.

09-04-2014 às 20:54 Responder

augusto

Gostei das instruções vai me ajudar muito, inclusive estou com um problema, não consigo preencher uma tabela toda de uma vez com os endereços retonados, so preenche as 5 primeiras linhas.
Sabe o que pode ser? Obrigado.

25-04-2014 às 16:14 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a augusto

Não sei se entendi direito a sua dúvida... essa "tabela" que você diz, seria os resultados do autocomplete que só aparecem 5 no máximo?

30-04-2014 às 18:21 Responder

augusto

Em resposta a Rodolfo Pereira

Seria outro caso, preencher uma tabela html com vários endereços e exibir na página.

13-05-2014 às 11:43 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a augusto

Continua nebuloso para mim... você tem algum link dessa aplicação para que eu possa dar uma olhada?

14-05-2014 às 11:54 Responder

augusto

Em resposta a Rodolfo Pereira

segue o link - http://augustoccb.s156.eatj.com/carTracker/maps.jsp só carrega 5 linhas.

28-05-2014 às 15:01 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a augusto

O link não está funcionando =/

10-07-2014 às 15:47 Responder

augusto

Em resposta a Rodolfo Pereira

novo link: http://cartracker-cartrackerccb.rhcloud.com/teste1.jsp

12-07-2014 às 11:40 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a augusto

Creio que isso aconteça pois o geocoder.geocode funciona de forma assíncrona.

Tente apenas escrever uma nova linha na sua tabela, após a linha anterior ter entrado no function(results, status).

16-07-2014 às 17:46 Responder

augusto

Em resposta a Rodolfo Pereira

Segue a função que é chamada para cada linha da tabela.

function codeLatLng(lat, lng, id) {
   geocoder = new google.maps.Geocoder();
   var latlng = new google.maps.LatLng(lat, lng);
   geocoder.geocode({
      'latLng' : latlng
   }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
         var x = results[1].formatted_address;
         results[0].address_components.length; i++)
         document.getElementById(id).innerHTML = x;
      } else {

      }
   });
}

28-05-2014 às 15:05 Responder

Consulta Endereços

Nossa, valew Rodolfo por esse post!

Me ajudou bastante a tirar dúvidas relacionadas a API do Google para consulta de endereços. O legal é que consegui utilizar o seu post para aplicar em meu próprio site de consulta de endereços (http://www.consultaenderecos.com.br/).

Valew mesmo, muito obrigado!

05-05-2014 às 15:49 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Consulta Endereços

Muito bom, parabéns! :D

23-05-2014 às 18:07 Responder

Mauricio

Dae Rodolfo, veja se consegue me dar um help. Tenho o endereço na base e queria mostrar o mapa já com esse endereço, mas não tenho as coordenadas para trocar a inicialização do mapa. Então te pergunto, vc tem uma dica de como posso fazer para inicializar o mapa com um endereço já gravado na base?

Vlw,

Maurício

13-05-2014 às 18:54 Responder

Junior

Olá Rodolfo, uma dúvida porque quando alteramos os inputs de hidden para text o value não é preenchido.

Valew...

15-05-2014 às 10:30 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Junior

Hm, era para ser preenchido normalmente.

Me passa o link do seu código para eu dar uma olhada.

23-05-2014 às 17:42 Responder

Junior

Em resposta a Rodolfo Pereira

Então a aplicação não alterei nada ainda veja: http://projetos.cajucomunicacao.com.br/maps1/

Eu apenas percebi isso pois o campo "txtEndereco" do tipo "text" que exibe o endereço ele não tem value, e os campos "txtLatitude" e "txtLongitude" que são "hidden" exibem o value dele, mas caso você inverta deixando o "txtEndereco" como "hidden" ele exibe o value, e os campos "txtLatitude" e "txtLongitude" como "text" ele deixa de ter o value no código.

Seria apenas uma dúvida mesmo, mas fiquei pensando e imagino que seja normal isso pois com o campo estando em "text" não á necessidade de um value pois já está sendo passado o valor do campo.

Obrigado pela sua atenção...

29-05-2014 às 13:38 Responder

Luiz Gonzaga

Muito, me ajudou muito pois estou trabalhando em um portal social e usarei funções semelhantes.
Grato.
Com relação a cerveja, fica para um outro post.
rsrsrs

17-05-2014 às 11:06 Responder

vitor

Excelente post!

Será que eu consigo listar empresas pelo type, de acordo com a localização do usuário. [Talvez algm já fez essa pergunta]. Ou se tiver indicação de algum plugin, agradeço.. ;]

26-05-2014 às 17:40 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a vitor

Hm, você quer procurar "restaurantes" (por exemplo), e aparecer somente restaurantes próximos à localização do usuário?

Se sim:

- Você precisa adicionar esse "tipo" nos pontos do seu .json e filtrá-los na hora de exibição, de acordo com o que o usuário digitou.

- Para pegar a localização atual do usuário, veja o tópico "Utilizando a localização atual do usuário" do post: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-rotas-entre-multiplos-pontos.html

10-07-2014 às 15:57 Responder

thiago

Muito bom Rodolfo!!

Estou desenvolvendo uma aplicação, porém preciso saber como faço para carregar log lat de uma combox em um iframe.

Segue o modelo:
www.redeoticsrio.org/cemaps/cemaps.html
Att

27-05-2014 às 17:01 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a thiago

É só colocar no "value" de cada opção do drop down list. Ou não?

10-07-2014 às 15:48 Responder

Josue

Boa Noite , estou usando o modulo google guia comercial 1.72 é show de bola. mais como faço para duplicar o cadastro.
estou fazendo um cadastro. e no nome/empresa. quando iguais.. da o seguinte erro..
ERRO: O endereço que você forneceu já está no banco de dados!

não consigo duplicar o nome da empresa, é o mesmo mais o endereço é diferente.. mais do nome da empresa ser o mesmo. da o erro.. obrigado. pessoal..

30-05-2014 às 23:56 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Josue

Infelizmente desconheço esse "modulo google guia comercial" =/

24-06-2014 às 17:59 Responder

Junior

Olá Rodolfo, gostaria de dar uma sugestão talvez para um próximo tutorial, que seria mesclar esse seu tópico com esse aqui: http://projetos.cajucomunicacao.com.br/cep/
Pois seria legal pois integraria um cadastro tanto pelo CEP auto completando e um cadastro pelo mapa assim como seu exemplo... Mesmo porque vi alguns comentários pedindo para quebrar o endereço por campos, coisa que estou tentando fazer mas sem sucesso ainda.

Até mais...

31-05-2014 às 10:27 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Junior

Beleza, pensarei nisso para um futuro post, valeu! :D

24-06-2014 às 17:30 Responder

Victor Sorroche

Olá Rodolfo parabéns pelo post!
Estou tentando restringir o autocomplete as regiões dentro do estado de São Paulo, você saberia dizer se é possível?

08-06-2014 às 12:37 Responder

Marcilio

Bom dia, Rodolfo!
Muito legal o artigo postado e acabei utilizando o medo para criar um exibição de revendedores. Porém, gostaria de saber como posso fazer que ao digitar um bairro, apareça o revendedor daquele bairro. Tipo: Bairro do Flamengo, RJ, aparecerá o revendedor Ronaldo Santos.
Segue o link onde coloquei o exemplo: http://www.lanoly.com.br/revendedor/ Dei até uma olhada no outro artigo onde faz a busca por bairro e tentei incrementar o meu, mas não consegui.
Poderia me ajudar nesta dúvida?
Desde já te agradeço e grande abraço,
Marcilio Assis
Araruama - RJ

10-06-2014 às 11:06 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Marcilio

Ao usuário digitar o bairro, dando um zoom nessa localização (no bairro em questão), resolveria o seu problema?

24-06-2014 às 16:36 Responder

Marcilio Assis

Em resposta a Rodolfo Pereira

Boa tarde,

A ideia é que o usuario digite o bairro e possa ir na localização. Tentei fazer algo e não conseguir. Se puder me ajudar...Agradeço.

Abraços,

Marcilio

24-06-2014 às 16:59 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Marcilio Assis

Ué, mas o tutorial já explica isso... olha a demo: http://www.princiweb.com.br/demos/google-maps-api-v3-busca-endereco-autocomplete/

Digite, por exemplo, "Vila Madalena, São Paulo", e ao enviar, o mapa dá um zoom nesse bairro.

24-06-2014 às 17:06 Responder

persianas flaci

boa tarde ,, minha empresa esta cadastrada no google places correta,,, mas no maps nao consta municipio,,, ja entrei no forum e disseram que quem podia arrumar isso seria google local, mas ja entraram em contato comigo tres vezes ,e aunica coisa que me dizem é ,,, vai ser consertado mas até a agora nada ,,,meu endereço correto é rua joao vitor da silva 61 bairro ponte grande , cidade de guarulhos sp. e esta aparecendo ponte grande sp, grato

10-06-2014 às 12:01 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a persianas flaci

Bom, isso só o pessoal do Google pode resolver, desculpe-me!

24-06-2014 às 11:45 Responder

Gisele

achei super facil de trabalhar, porem eu preciso buscar no mapa endereços de muitos paises, fiz alguns testes superficiais e localizei apenas ruas do Brasil, quando busquei ruas do EUA por exemplo não localizou, preciso habilitar algo para este?

23-06-2014 às 19:34 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Gisele

Na função carregarNoMapa, onde passo o valor de address para o geocoder, estou concatenando a string ", Brasil", e também passo 'BR' para o region. Basta tirar esses dois, e os resultados de outros países serão exibidos.

24-06-2014 às 11:25 Responder

Hallan

Parabéns pelo post,muito bem explicado me ajudou muito!

26-06-2014 às 09:35 Responder

davis

Adaptei parte do seu código para aprimorar o que já utilizo . Funcionou perfeitamente.
Obrigado por compartilhar seu conhecimento

18-07-2014 às 19:44 Responder

Bruno

Muito bom artigo!Vai ajudar bastante.Parabens!

25-07-2014 às 09:52 Responder

Mateus de Paula

Muito obrigado pelo tutorial veio, salvando meu Projeto de Conclusão de Curso kkk Valeu mesmo

30-07-2014 às 03:15 Responder

Vanilson Manuel

Excelente artigo!

mas, eu tenho um outro problema.
é que criei um ponto A e outro ponto B , e acontece que quando faço o trajeto com as coordenadas aparece a seguinte informação :(icone do Ponto) Unnamed Road,Kilamba,Angola.

como posso alterar esta informação? ex: Unnamed Road para quarteirão U, e ter o seguinte resultado: quarteirão U,Kilamba,Angola.

02-08-2014 às 12:26 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Vanilson Manuel

Me passa o link disso pra eu dar uma olhada.

27-08-2014 às 11:41 Responder

Alexandre

Fala Rodolfo, tudo bem? Excelente artigo, me ajudou muito! No seu exemplo, tente pesquisar por este endereço: Rua 20, 4061 - Parque Universitário, Rio Claro. Veja que você não conseguirá captar o número da rua, alguma ideia de como resolver isso? abs

04-08-2014 às 09:06 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Alexandre

Fala Alexandre,

Sei não =/ Talvez o GM não tenha informações de número para esta rua.

Abs!

15-10-2014 às 10:19 Responder

altair silva

Caro amigo!!
Como aumentar altura e largura no mapa e colocar mais campos embaixo do mapa, e fazer um cabeçalho

05-08-2014 às 16:07 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a altair silva

Fala Altair,

Para mudar as dimensões do mapa, basta abrir o arquivo estilo.css e editar as propriedades "width" e "height" do "#mapa":

#mapa { width: 940px; height: 400px; border: 10px solid #ccc; margin-bottom: 20px; }

Para colocar mais campos abaixo do mapa, basta colocar mais inputs :P

E sobre o cabeçalho... bom... como seria ele?

Abs!

15-10-2014 às 10:23 Responder

Allan Camilato

Olá Rodolfo, como eu faço para pegar o endereço quebrado, tipo: logradouro, bairro, cep e etc... será que existe alguma forma?

15-08-2014 às 00:10 Responder

Gerson

BOM D+++++++
No meu caso, como uso preenchimento automático pelo cep, apenas inclui preencher o endereço completo no input e conferir o mapa.
Muito obrigado pelo tutorial .

19-08-2014 às 00:18 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Gerson

Fala Gerson,

Digitei o CEP aqui no campo de endereço e ele achou de boa. Não é isso que você quer?

Abs!

15-10-2014 às 11:06 Responder

Fernando Teodoro

Cara, parabéns. Sou programador PHP de longa data mas tenho uma preguiça absurda tanto com jQuery quanto APIs do Google. Seu texto me salvou pelo menos um dia inteiro de trampo abstrato. Muito bem escrito, código limpo, objetivo e inteligente. Valeu mesmo.

.keep up the good work .keep on rockin'. peace

23-08-2014 às 07:13 Responder

Diego

Bom dia Rodolfo, como fazer o Autocomplete puxar os dados do arquivo JSON do mapa personalizado, resumindo preciso dos 2 em um só o mapa personalizado com os pontos JSON e a Busca Auto Complete. Valeu Abraços.

23-08-2014 às 09:44 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Diego

No autocomplete, basta mudar o source para pegar de um arquivo json. Dá uma olhada aqui: http://jqueryui.com/autocomplete/#remote-jsonp

27-08-2014 às 11:48 Responder

Diego

Em resposta a Rodolfo Pereira

Obrigado meu amigo, abraços!

27-08-2014 às 12:06 Responder

Jonas

Parabéns Rodolfo, muito boa sua explicação. Com certeza foi de grande valia para mim.

25-08-2014 às 16:46 Responder

Jhonny Eflainy

Amigo como eu faço para pegar essa latitude e longitude e salvar em uma tabela de banco de dados mysql?

26-08-2014 às 10:13 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Jhonny Eflainy

Basta pegar os valores dos campos txtLatitude e txtLongitude através da sua linguaguem de programação favorita e fazer o insert no banco :P

27-08-2014 às 11:44 Responder

jocilea

Em resposta a Rodolfo Pereira

Senhor Apgaua é um agricultor que planta morangos e faz suas próprias
entregas com sua caminhonete pelas cidades mais próximas. O mapa acima
mostra as cidades e suas ligações com cidades vizinhas.
De uns tempos para cá Sr. Apgaua tem percebido que esta perdendo muito
tempo com suas entregas, pois tem que praticamente se deslocar por todas as
cidades para abastecê-las com seus morangos. Ela já quebrou a cabeça por
dias no Google Maps tentando aperfeiçoar a sua rota, porém nada feito.
Ai que você entra! Você deve ajudar o Sr. Apgaua construindo um programa
em Java que vai auxiliá-lo a tomar a melhor rota.
Mais um detalhe importante: Sr. Apgaua mora na cidade A e sempre sai
cedinho de casa para fazer suas entregas. A ultima cidade a ser abastecida
sempre será a cidade G.
2. O sistema
O sistema deve obrigatoriamente utilizar as cidades mostradas na imagem do
mapa apresentado no inicio desse documento, respeitando sempre a ordem e
quais os vizinhos de cada cidade.

14-09-2014 às 19:29 Responder

jocilea

Em resposta a jocilea

boa tarde tem como voce me ajuda neste trabalho

15-09-2014 às 17:18 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a jocilea

E qual é a sua dúvida neste trabalho?

08-10-2014 às 11:45 Responder

Marcos

Ola parebens pelo artigo,gostaria de saber como faço para usar este exemplo em PHP na verdade nao conheço muito de PHP ,mas foi solicitado pára montar em PHP e tenho que usar um banco de dados ai fiquei em duvida e nao sei exatamente como montar isso em PHP
se voce tiver como me ajudar agradeço muito

29-08-2014 às 20:14 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Marcos

Fala Marcos,

Infelizmente não conheço boas referências de PHP para te indicar. Malz :(

Abs!

08-10-2014 às 12:21 Responder

Klayton Brito

Cara, sua implementação me salvou!
Mas tenho uma dúvida. Por exemplo, tenho quatro campos de endereço: "origem", "ponto-a", "ponto-b", "ponto-c", e partindo do endereço informado no campo "origem" encontrar a melhor rota passando por todos os outros pontos ("ponto-a", "ponto-b", "ponto-c"), independente da ordem dos pontos em que irá passar. É possível isso? Agradeço desde já.

09-09-2014 às 18:52 Responder

henrique

Rodolfo, você poderia me ajudar estou criando um site de trocas e queria utilizar este recurso, pra ser mais exato um recurso como neste site (boratrocar.com.br) e este site (trocajogo.com.br), seria isto mesmo ou terei que utilizar outro recurso? Pois quando os usuários se cadastrarem gostaria que ficasse a marcação no mapa. Você pode me ajudar?

12-09-2014 às 13:10 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a henrique

Fala Henrique,

Com este tutorial, você consegue pegar a latitude e longitude do usuário, basta colocar este formulário para ele preencher na hora do cadastro.

Depois disso, basta seguir este tutorial http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html para exibir o mapa com a posição de todo mundo.

Abs!

08-10-2014 às 11:50 Responder

Luiz Paulo

Ola Rodolfo,
usando esse mapa tem como armazenar no SQL server o endereço a latitude e a longitude?

17-09-2014 às 23:45 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Luiz Paulo

Fala Luiz,

Sim, tem como. Basta pegar os valores dos campos que armazenam a latitude (txtLatitude) e longitude (txtLongitude) e colocar no seu BD.

Abs!

08-10-2014 às 11:28 Responder

Jorge Souza

Rodolfo, muito bom post, estava tentando utilizar sua script para pegar por Address Components todos os dados separados e através do Formulário enviar para meu Banco, tentei de diversas maneira mas não consegui, como não conheço muito de JVS pesquisei e achei um plugin muito interessante, estou postando o endereço do site.

Agora você sabe me dizer como eu faria isso no Script que você fez?


http://ubilabs.github.io/geocomplete/examples/form.html
Abraço,

Jorge

19-09-2014 às 16:59 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Jorge Souza

Fala Jorge,

Bem legal o link que você compartilhou!

Dei uma olhada no código fonte da página, e acabei caindo aqui: https://developers.google.com/maps/documentation/geocoding/#Types

Esse tal de "address_components" você tem ele dentro do "results" (no meu código). Vamos supor que você queira pegar a sigla do Estado de um endereço:

if (status == google.maps.GeocoderStatus.OK) {
   if (results[0]) {
      console.log(results[0].address_components) // Todas as opções possíveis
      console.log(results[0].address_components[4].short_name) // Sigla do estado

Basicamente é isso.

Abs!

08-10-2014 às 11:01 Responder

Lidimar

Muito bom seus tutoriais. Mas estou quebrando a cabeça aki. Tenho um projeto e nele o input de buscar de endereços fica no index e o resultado da busca iria para outra pagina contendo o mapa. Sabe como eu poderia fazer isso? Desde ja Obrigado.

27-09-2014 às 20:08 Responder

Jorge

Em resposta a Lidimar

Lidimar boa tarde,
Nesse caso acho que você deve salvar as informações de busca em um banco de dados e após acessar essa outra página resgatar as informações do banco e exibir no mapa.

http://forum.imasters.com.br/topic/334279-resolvidogoogle-maps-e-consulta-phpmysql/

29-09-2014 às 17:27 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Jorge

Obrigado pela ajuda, Jorge!

08-10-2014 às 10:33 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Lidimar

Exatamento que o Jorge disse :)

08-10-2014 às 10:33 Responder

Rodrigo

Rodolfo!

Parabéns pelo post, sua explicação está ótima!

Tenho uma pergunta: Este mapa está na forma assíncrona?

01-10-2014 às 14:13 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rodrigo

Fala Rodrigo!

O carregamento inicial do mapa não é. Neste caso, olhe aqui: https://developers.google.com/maps/documentation/javascript/examples/map-simple-async?hl=pt-br

Já o "geocoder", é. Olhe aqui: https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingRequests

Abs!

08-10-2014 às 10:08 Responder

Marcelo

Ola Rodolfo....
Gostaria de pedir uma ajudinha se possivel....
Estou com um problema no limite diário de posições do google...
Gostaria de saber se tem algum caminho para resolver isto.....
Estou sempre no limite..e não consigo distribuir por ips...ele sempre busca o meu...

02-10-2014 às 18:48 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Marcelo

Fala Marcelo,

Não entendi de qual "limite diário de posições do Google" que você está falando, e nem o que seria "IPS". Pode me explicar melhor, por favor?

Abs!

08-10-2014 às 10:07 Responder

Lucas

Em resposta a Rodolfo Pereira

Rodolfo, tudo bem ?
Gostaria de saber, como quebrar o endereço dividindo em estado, cep, cidade, endereço apenas com nome da rua ou avenida e o número e bairro, tentei deste jeito e não tive um padrão de resultados Ex:
$('#estado').val(results[0].address_components[4].short_name);

e como seria a syntax do postal_code, country e etc
Abs!

12-10-2014 às 12:08 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Lucas

Fala Lucas,

Sobre o "padrão de resultados", é que em cada endereço a posição do estado, por exemplo, vem diferente? Pois isso acontece mesmo.

O que você pode fazer, é iterar cada item do address_components:

if (results[0]) {
   var latitude = results[0].geometry.location.lat();
   var longitude = results[0].geometry.location.lng();

   $.each(results[0].address_components, function (i, address_component) {
      if (address_component.types[0] == "route"){
         console.log("Route: " + address_component.long_name);
      }

      if (address_component.types[0] == "locality"){
         console.log("Cidade: " + address_component.long_name);
      }

      if (address_component.types[0] == "country"){ 
         console.log("País: " + address_component.long_name); 
      }

      if (address_component.types[0] == "postal_code_prefix"){ 
         console.log("CEP: " + address_component.long_name);  
      }

      if (address_component.types[0] == "street_number"){ 
         console.log("Número rua: " + address_component.long_name);  
      }

      if (address_component.types[0] == "administrative_area_level_1"){ 
         console.log("Estado: " + address_component.short_name);  
      }
   });

Adaptei o código daqui: http://stackoverflow.com/questions/6359995/get-city-from-geocoder-results

Para pegar os outros "types", é só ver aqui: https://developers.google.com/maps/documentation/geocoding/#GeocodingResponses

Abs!

15-10-2014 às 09:44 Responder

Lucas

Em resposta a Rodolfo Pereira

Obrigado Rodolfo pela ajuda !
Abs!

15-10-2014 às 14:24 Responder

Gregorio

Em resposta a Lucas

Olá Rodolfo,

Cara, estou com uma dúvida eu tenho vários campos sobre o estabelcimento de uma loja eu queria colocar autocomplete em cep e no endereço com eu faria isso ?

17-10-2014 às 16:58 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Gregorio

Fala Gregorio!

Esses dados da loja estão fora do Google Maps, certo? Em um banco de dados seu, por exemplo.

Se sim, para colocá-lo no autocomplete, você terá que colocar dois sources do autocomplete: 1 do GM, e outro que busque na sua base esta loja.

Abs!

29-10-2014 às 11:39 Responder

Bruno Leonardo

Olá Rodolfo, gostei muito deste tutorial e do outro onde você ensina como criar um mapa personalizado com vários pontos, mas deixa eu te perguntar: tem como integrar um ao outro? Ter um mapa que tenha vários pontos e que em cima tenha uma caixa de busca, que quando eu faço uma pesquisa por um lugra ele me mostra o lugar e os pontos ao redor dele também?

Obrigado pela atenção.

24-10-2014 às 09:12 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Bruno Leonardo

Fala Bruno!

Tem sim. Pelo que você me descreveu, é só juntar os códigos dos dois exemplos. Qual problema você está tendo neste processo?

Abs!

29-10-2014 às 11:47 Responder

Bruno Leonardo

Em resposta a Rodolfo Pereira

Olá Rodolfo, nesse meio tempo eu acabei conseguindo fazer! eu simplesmente juntei os dos javascrits do mapa em um e mesclei uma página a outra... Deu tudo certo ;)

31-10-2014 às 09:14 Responder

Quézia

Olá Rodolfo,

Muito bom esse tutorial. Mas eu tive um problema em meu sistema.
Quando eu abro o mapa eu tenho já marcadores puxado pelo banco de dados, ai quando vou buscar o endereço que eu quero ele some com os meus marcadores ja marcados e deixa só o endereço que busquei. tem como manter marcados os outros marcadoreS?

24-10-2014 às 19:01 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Quézia

Fala Quézia,

Você pode me passar o link para eu dar uma olhada?

Abs!

29-10-2014 às 11:50 Responder

ALTAIR SILVA

Caro amigo rodolfo, muito obrigado pela atençao!!

Me dê uma dica como pegar maker relacionado a um tipo de crime, estou fazendo um sistema de mancha criminal.

exemplo gravo no banco um maker com desenho de furto como coloca-los em mapa na busca do banco, no caso são varios maker de crimes diferentes!

16-11-2014 às 19:37 Responder

Eduardo Oliveira

Muitos parabéns pelo artigo Rodolfo. Muito bem esclarecido. Gostaria de saber, se me poder ajudar, como colocar o destino fixo, tipo (Rio de Janeiro)?

16-11-2014 às 20:47 Responder

Altair silva

segue meu codigo:<br /><br /><br />&lt;script type=&quot;text/javascript&quot;&gt;<br />var locations = [<br />&lt;?php <br />$query=&quot;SELECT * from local_crime &quot;;<br />$result=mysql_query($query);<br /> { <br /> if ($num=mysql_numrows($result)) {<br />$i=0;<br />while ($i &lt; $num) {<br />$id=mysql_result($result,$i,&quot;id&quot;);<br />$lapt=mysql_result($result,$i,&quot;latitude&quot;);<br />$long=mysql_result($result,$i,&quot;longitude&quot;);<br />$aimage=mysql_result($result,$i,&quot;imagem_ocorrencia&quot;);<br />$hora=mysql_result($result,$i,&quot;hora_crime&quot;);<br />$data=mysql_result($result,$i,&quot;data_crime&quot;);<br />$crime=mysql_result($result,$i,&quot;crime&quot;);<br />echo &quot;[&#39;&lt;div class=info&gt;&lt;h4&gt;Crime: $crime&lt;/h4&gt;&lt;br&gt;&lt;a href=localhost/mapaimagem/id=$id&gt;&lt;/a&gt;&lt;b&gt;Endere&#231;o: $hora&lt;/b&gt;&lt;p&gt;Hora: $hora&lt;/p&gt;&lt;p&gt;Data: $data&lt;/p&gt;&lt;/div&gt;&#39;, $lapt, $long],&quot;;<br />$i++;<br />}<br />}<br />else <br />{<br />echo &quot;&lt;h3 align=&#39;center&#39;&gt;&lt;font color=&#39;#ff0000&#39;&gt;N&#227;o Encontrou!!!&lt;/font&gt;&lt;/h3&gt;&quot;;<br />}<br />}<br />?&gt;<br /> ];<br /> <br /> // Setup the different icons and shadows<br /> var iconURLPrefix = &#39;images/icones/&#39;;<br /> <br /> var icons = [ <br /> iconURLPrefix + &#39;Arrastao.png&#39;,<br /> iconURLPrefix + &#39;homicidio.png&#39;,<br /> iconURLPrefix + &#39;latrocinio.png&#39;,<br /> iconURLPrefix + &#39;roubocoletivo.png&#39;,<br /> iconURLPrefix + &#39;rouboestabelecimentobancario.png&#39;,<br /> iconURLPrefix + &#39;roubofurtotraseunte.png&#39;, <br /> iconURLPrefix + &#39;roubofurtocarga.png&#39;,<br /> iconURLPrefix + &#39;roubofurtocelular.png&#39;,<br /> iconURLPrefix + &#39;roubofurtoveiculo.png&#39;,<br /> iconURLPrefix + &#39;saidinhabanco.png&#39;,<br /> iconURLPrefix + &#39;traficoarma.png&#39;,<br /> iconURLPrefix + &#39;trocatiro.png&#39;,<br /> iconURLPrefix + &#39;sequestro.png&#39;,<br /> iconURLPrefix + &#39;traficodrogas.png&#39;,<br /> iconURLPrefix + &#39;rouboresidencia.png&#39;,<br /> ]<br /> var icons_length = icons.length;<br /> var shadow = {<br /> anchor: new google.maps.Point(5,13),<br /> url: iconURLPrefix + &#39;msmarker.shadow.png&#39;<br /> };<br /> var map = new google.maps.Map(document.getElementById(&#39;map&#39;), {<br /> zoom: 5,<br /> center: new google.maps.LatLng(-22.9118204, -43.17859999),<br /> panControl:true,<br /> scaleControl:true,<br /> streetViewControl:true,<br /> overviewMapControl:true,<br /> rotateControl:true, <br /> zoomControl:true,<br /> zoomControlOptions: {<br /> style:google.maps.ZoomControlStyle.SMALL<br /> },<br /> mapTypeId: google.maps.MapTypeId.ROADMAP<br /> });<br /> var infowindow = new google.maps.InfoWindow({<br /> maxWidth: 400,<br /> maxHeight: 350<br /> });<br /><br /> var marker;<br /> var markers = new Array();<br /> <br /> var iconCounter = 0;<br /> <br /> // Add the markers and infowindows to the map<br /> for (var i = 0; i &lt; locations.length; i++) { <br /> marker = new google.maps.Marker({<br /> position: new google.maps.LatLng(locations[i][1], locations[i][2], locations[i][3], locations[i][4], locations[i][5]),<br /> map: map,<br /> icon : icons[iconCounter],<br /> shadow: shadow,<br /> animation: google.maps.Animation.DROP<br /> });<br /><br /><br /> markers.push(marker);<br /><br /> google.maps.event.addListener(marker, &#39;click&#39;, (function(marker, i) {<br /> return function() {<br /> infowindow.setContent(locations[i][0]);<br /> infowindow.open(map, marker);<br /> }<br /> })(marker, i));<br /> <br /> iconCounter++;<br /> // We only have a limited number of possible icon colors, so we may have to restart the counter<br /> if(iconCounter &gt;= icons_length){<br /> iconCounter = 0;<br /> }<br /> }<br /><br /> function AutoCenter() {<br /> // Create a new viewpoint bound<br /> var bounds = new google.maps.LatLngBounds();<br /> // Go through each...<br /> $.each(markers, function (index, marker) {<br /> bounds.extend(marker.position);<br /> });<br /> // Fit these bounds to the map<br /> map.fitBounds(bounds);<br /> }<br /> AutoCenter();<br /> &lt;/script&gt; <br />&lt;/div&gt;<br />&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery-1.7.1.min.js&quot;&gt;&lt;/script&gt;<br />&lt;?php<br />include &quot;includes/footer.php&quot;;<br />?&gt;<br /> &lt;/body&gt;<br />&lt;/html&gt;

17-11-2014 às 20:44 Responder

DIego

parabens cara
Post muito bem explicado

15-12-2014 às 19:59 Responder

Guilherme Müller

No meu site feito em Wordpress fiz um painel de administração do mesmo, lá implementei o código que você postou, até ai tudo bem, faço a busca do endereço e inseri um código php para salvar o endereço solicitado.


""

Até ai ele salva o endereo, mas eu quero exibir o mapa no site agora, só que ele fica com uma localização que não consta no endereço.

A minha pergunta é: Como faço para exibir o mapa automaticamente com o resultado salvo no campo de endereço?


Segue o link da referência e imagens do painel de administração e exibição no site.
http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-busca-de-endereco-e-autocomplete.html

17-12-2014 às 09:42 Responder

Guilherme Müller

Fala Rodolfo, blz? Cara parabéns pelo artigo.
Enviei uma dúvida para executar o botão sem clicar, mas já resolvi antes mesmo de responder. Vou enviar o código que inseri.

var geocoder;
var map;
var marker;

function initialize() {
    var latlng = new google.maps.LatLng(-18.8800397, -47.05878999999999);
    var options = {
        zoom: 5,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("mapa"), options);

    geocoder = new google.maps.Geocoder();

    marker = new google.maps.Marker({
        map: map,
        draggable: true,
    });

    marker.setPosition(latlng);
}


$(document).ready(function() {

    initialize();

    function carregarNoMapa(endereco) {
        geocoder.geocode({
            'address': endereco + ', Brasil',
            'region': 'BR'
        }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[0]) {
                    var latitude = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();

                    $('#txtEndereco').val(results[0].formatted_address);
                    $('#txtLatitude').val(latitude);
                    $('#txtLongitude').val(longitude);

                    var location = new google.maps.LatLng(latitude, longitude);
                    marker.setPosition(location);
                    map.setCenter(location);
                    map.setZoom(16);
                }
            }
        })
    }

    $("#btnEndereco").click(function() {
        if ($(this).val() != "")
            carregarNoMapa($("#txtEndereco").val());
    })

    $("#txtEndereco").blur(function() {
        if ($(this).val() != "")
            carregarNoMapa($(this).val());
    })


    <!-- Aqui está o código para executar o botão sem clicar -->
    $("#btnEndereco").trigger("click");
    <!-- Aqui está o código para executar o botão sem clicar -->


    google.maps.event.addListener(marker, 'drag', function() {
        geocoder.geocode({
            'latLng': marker.getPosition()
        }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[0]) {
                    $('#txtEndereco').val(results[0].formatted_address);
                    $('#txtLatitude').val(marker.getPosition().lat());
                    $('#txtLongitude').val(marker.getPosition().lng());
                }
            }
        });
    });

    $("#txtEndereco").autocomplete({
        source: function(request, response) {
            geocoder.geocode({
                'address': request.term + ', Brasil',
                'region': 'BR'
            }, function(results, status) {
                response($.map(results, function(item) {
                    return {
                        label: item.formatted_address,
                        value: item.formatted_address,
                        latitude: item.geometry.location.lat(),
                        longitude: item.geometry.location.lng()
                    }
                }));
            })
        },
        select: function(event, ui) {
            $("#txtLatitude").val(ui.item.latitude);
            $("#txtLongitude").val(ui.item.longitude);
            var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
            marker.setPosition(location);
            map.setCenter(location);
            map.setZoom(16);

        }
    });


});

17-12-2014 às 10:36 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Guilherme Müller

Opa, valeu por compartilhar o código! :)

07-01-2015 às 11:50 Responder

Lucimar

Em resposta a Rodolfo Pereira

Rodolfo, parabéns pelo material que apresentou. queria sabe se para android esse projeto de mapa que vc fez funciona sem precisar modificar.

10-01-2015 às 15:43 Responder

Marcio de Campos

Fantastico!

24-12-2014 às 13:15 Responder

bruno

federal demais

27-12-2014 às 20:48 Responder

Abel

I am going to thank you if You help me get the business type with Google Places API.

I do not want to get only "Supported Types" (https://developers.google.com/places/documentation/supported_types), I want to be able to get the local type, like the image shows below:

Image is in the link (I could not show it because of my low reputation):
http://i.stack.imgur.com/6aL4D.png

P.D: Business Reference: CoQBeQAAAG16PSgcjPt3fO_M_JL7IPA36gKUduco9gTjZ0BL3c0EiUO9f7jxkHSApDSObyPPSxUt-gPr8DVBIDlieeRK-WycHbu_z9enmZYYHubqxvgSdrkkcN4B7EqGSZuO-cSh-pVlQYFnkccpspOw7_r--unbOLWjrbgWrZb6a_i-d6uREhCPtDXl7oMJkxHcD_ZkwG50GhQWCf76Y8x8zi4lTKPlmvlB8FeYdg

Thanks for you time.

13-01-2015 às 02:33 Responder

Rafael

Parabéns pela iniciativa.!

15-01-2015 às 15:36 Responder

Diego

Primeiro muito obrigado pelos tutorias eles me ajudaram muito no projeto que fiz na empresa que trabalho e hoje o mapa funciona redondinho. Mas recebi uma nova solicitação que o mapa aponte a localização da pessoa que esta navegando nele assim como o da www.wizard.com.br (Unidades) ele mostra qual a unidade mais próxima da pessoa que está navegando. Obrigado desde já.

21-01-2015 às 11:52 Responder

Andre

Em resposta a Diego

Parabens pelo tutorial, gostaria de saber como faço pra colocar no autocomplete pra mostrar alem do endereço as cordenadas

09-02-2015 às 14:24 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Andre

Fala Andre!

Perceba que nas propriedades "latitude" e "longitude" você tem essas duas informações. Então, para exibir no autocomplete, basta adicioná-los no "label":

label: item.formatted_address + ' - Latitude: ' + item.geometry.location.lat() + ' / Longitude: ' + item.geometry.location.lng(),

Abs!

09-02-2015 às 15:37 Responder

Andre

Em resposta a Rodolfo Pereira

Como ficaria no codigo?
conheço pouco de js,

09-02-2015 às 16:07 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Andre

Assim:

$("#txtEndereco").autocomplete({
    source: function (request, response) {
        geocoder.geocode({ 'address': request.term + ', Brasil', 'region': 'BR' }, function (results, status) {
            response($.map(results, function (item) {
                return {
                    label: item.formatted_address + ' - Latitude: ' + item.geometry.location.lat() + ' / Longitude: ' + item.geometry.location.lng(),
                    value: item.formatted_address,
                    latitude: item.geometry.location.lat(),
                        longitude: item.geometry.location.lng()
                }
            }));
        })
    },
    select: function (event, ui) {
        $("#txtLatitude").val(ui.item.latitude);
          $("#txtLongitude").val(ui.item.longitude);
        var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
        marker.setPosition(location);
        map.setCenter(location);
        map.setZoom(16);
    }
});

Perceba que o código é idêntico ao do post, mudando apenas o valor de "label". Abs!

09-02-2015 às 16:09 Responder

keyton

ver movimntaços do satelet

10-02-2015 às 11:31 Responder

Allan

Olá,

Estou desenvolvendo um projeto de um aplicativo movel de localização. Em que será necessário usar a Google Maps API v3: Busca de endereço e Autocomplete, porém percebemos que a sua key já está desativada talvez pelo numero de acesso. E também estamos tendo problemas com a nossa chave. Ao gerar a chave e colocar na pagina aparece uma mensagem dizendo que ela inválida. Porém fizemos todo o processo indicado pela google.

Vocês poderiam nos ajudar ?

Att.

12-02-2015 às 20:32 Responder

Larissa

Olá

O tutorial me ajudou mto, porém, estou desenvolvendo em mobile e ao invés de digitar um endereço, preciso que seja automático. Que o google maps identifique a localização exata do usuário e gere o endereço. Acho que no caso, o google maps teria que acessar o GPS do celular. Alguma dica, luz ou caminho que você possa me dizer por onde começo?

Grata
Larissa

19-02-2015 às 12:07 Responder

Diego Araujo

Rodolfo Parabéns pelas instruções e pelo post. Amigo estou escrevendo meu tcc e decidi criar um mapa com pontos personalizados. O que nao ficou claro para mim no seu artigo foi como posso usar os resultados dessa consulta, nos meus pontos. por exemplo: Quero inserir numa tabela os pontos de long_lat recuperados a partir da pesquisa de endereços. depois mostrar todos os pontos no google maps.

10-04-2015 às 13:31 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Diego Araujo

Fala Diego!

Então cara, você tem que fazer isso usando alguma linguagem back-end. A ideia é que ao enviar o formulário, ir para uma página (ex: receber-informacoes.php) a qual pegará esses dados e os colocarão no banco de dados. Depois disso, o seu arquivo .json com os dados deve ser gerado dinâmicamente, pegando esses dados salvos anteriormente.

Abs!

29-04-2015 às 10:27 Responder

Bruno Marques

Olá rodolfo, pode me dar uma força onde devo alterar para ele procurar pelo local e não somente pelo endereço, exempo:

procurar
CEASA Supermercado - Irajá, Rio de Janeiro - RJ

desde já agradeço a atenção.

18-04-2015 às 01:29 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Bruno Marques

Fala Bruno!

Dê uma olhada na API do Google Places: https://developers.google.com/places/?hl=pt-br

Abs!

29-04-2015 às 09:59 Responder

Gabriel Prado

Oi Rodolfo tudo bem? gostaria de saber se tem como pegar aquela latitude e longitude e enviar para meu banco de dados se tiver poderia me ajudar a fazer? obrigado desde já

21-04-2015 às 13:10 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Gabriel Prado

Fala Gabriel, tudo certo e contigo?

Tem sim, mas é necessário fazer algum código back-end para pegar essas informações. Qual linguagem você tem conhecimento?

Abs!

29-04-2015 às 09:53 Responder

Vinicius

Estou fazendo uma aplicação com o campo endereço e gostaria de colocar o autocomplete, existe alguma alteração para funcionar no mobile?

22-04-2015 às 11:18 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Vinicius

Não, no mobile funciona da mesma maneira que no desktop. Qual problema especificamente está acontecendo?

Abs!

29-04-2015 às 09:52 Responder

fagner

Amigo, você sabe como faz para fazer o mapa e um formulario de seleção do lado para pessoa escolhe o estado e cidade tipo uma listagem de lojas

30-04-2015 às 13:42 Responder

Gabriel

Boa tarde, Rodolfo.
Estou realizando meu TCC e necessito utilizar a API do Google Maps, de acordo com seu artigo.
Porém, acredito que sou um pouco burro, e não consigo fazer o mapa sequer aparecer na tela.

Tenho 3 arquivos para tal, todos os 3 seguindo o que você disse, sem mais nem meno, são idênticos com o que você escreveu.


Se possivel gostaria que você me ajudasse a entender porque não funciona.

Muito Obrigado,

Seguem os códigos: ( o terceiro é o jquery, portanto não coloquei aqui.)

GOOGLE.PHP

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="../css/index.css">
</head>

<body>

<form method="post" action="" id="">
<fieldset>
<legend>Google Maps</legend>

<div>
<label class="commons-form-style" for="txtEndereco">Endereço:</label>
<input class="commons-form-style input" type="text" id="txtEndereco" name="txtEndereco" />
</div>
<div>
<input class="search-button" type="button" id="btnEndereco" name="btnEndereco" value="Mostrar no mapa" />
</div>

<div id="mapa" style="height: 500px; width: 500px">

<script type="text/javascript" src="jquery.min.js"></script>
</div>

<div>
<input type="submit" value="Enviar" name="btnEnviar" />
</div>

<input type="hidden" id="txtLatitude" name="txtLatitude" />
<input type="hidden" id="txtLongitude" name="txtLongitude" />
</fieldset>
</form>
</body>
</html>

MAPA.JS

<?php

var geocoder;
var map;
var marker;

function initialize() {
var latlng = new google.maps.LatLng(-18.8800397, -47.05878999999999);
var options = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById("mapa"), options);

geocoder = new google.maps.Geocoder();

marker = new google.maps.Marker({
map: map,
draggable: true,
});

marker.setPosition(latlng);
}

$(document).ready(function () {

function carregarNoMapa(endereco) {
geocoder.geocode({ 'address': endereco + ', Brasil', 'region': 'BR' }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();

$('#txtEndereco').val(results[0].formatted_address);
$('#txtLatitude').val(latitude);
$('#txtLongitude').val(longitude);

var location = new google.maps.LatLng(latitude, longitude);
marker.setPosition(location);
map.setCenter(location);
map.setZoom(16);
}
}
});
}

$("#btnEndereco").click(function() {
if($(this).val() != "")
carregarNoMapa($("#txtEndereco").val());
})

$("#txtEndereco").blur(function() {
if($(this).val() != "")
carregarNoMapa($(this).val());
})

initialize();
});

?>

01-05-2015 às 18:15 Responder

Genaro

Muito bom meus parabens
Estou com um projeto semelhente, podemos fazer parceria?

04-05-2015 às 10:24 Responder

Alan Jhonson

Rodolfo, você conhece alguma aplicação que me traga através do cep o local mais aproximado de uma loja que tenha vários pontos por exemplo. Jà rodei na internet e não encontrei nada e até agora não descobri nada na API do Google que faça essa função. Descobri como traçar rotas somente pra um ponto partido de um endereço.

09-05-2015 às 19:37 Responder

alexander

Olá,
gostei muito do post, agora tenho uma dúvida...
é possível também obter uma lista de endereços (xml ou qualquer tabela) a partir de uma pesquisa feita no maps? Por exemplo, se eu quisesse todos os hospitais de Belo Horizonte, poderia transferir a informação dos marcadores para uma lista ?

15-05-2015 às 15:14 Responder

Isaque

Excelente post meu amigo. Parabéns pelo conhecimento e didática, obrigado por compartilhar conosco. Muito bom!

30-05-2015 às 13:03 Responder

Mauro

Rodolfo. Você é fera!! Estou impressionado com a clareza na explicação. Pena que eu não saco nada de php. Sabe dizer onde consigo seu código em Asp.net ou VB.net??

18-06-2015 às 15:09 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Mauro

Fala Mauro,

Não entendi o motivo de você querer o código em PHP, hehe... o código é todo em JavaScript :)

Abs!

26-06-2015 às 10:59 Responder

Luiz

Olá Rodolfo, usei para checar cep fornecido por usuários para envio de pedidos. As vezes o usuário erra e mercadoria fica parada. Mas achei muito eficiente, acho q vale várias cervejas..rss... No verão dou uma força, sou funcionário só.. to em sampa vlw

22-06-2015 às 08:40 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Luiz

Huhauhauh, beleza! Abs!

26-06-2015 às 10:55 Responder

André

Muito obrigado Rodolfo. Já implementei as atualizações na minha aplicação com o google maps, e esta perfeito.

01-07-2015 às 11:56 Responder

Vitor

Cara, muito obrigado!
Excelente post!

02-07-2015 às 20:00 Responder

Alex

Boa Tarde Rodolfo,

Otimo trabalho cara, gostaria de tirar uma duvida seria possivel eu fazer o mapa abrir em uma nova guia? comecei a programar a pocou tempo nao possuo muito conhecimento ainda e possivel o senhor me ajudar?

21-07-2015 às 15:34 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Alex

Fala Alex, beleza?

Tem como fazer sim. Você quer que ele abra em uma nova janela quando a pessoa entra em uma determinada página ou quando a pessoa clica em algum link?

Abs!
 

24-08-2015 às 18:13 Responder

Rodrigo

Primeiramente muito obrigado pelas instruções! Muito simples de se entender e aplicar. Porém gostaria de aplicar ela em um sistema e cai em umas dúvidas abaixo:

1 - Possuo um campo onde a pessoa preenche o CEP e eu gostaria que ele completasse automaticamente os outros campos como: Rua, Cidade, Estado

2 - Gostaria também que ele calculasse a quilometragem entre os dois pontos e o tempo de percusso que seriam exibidos em campos separados.

Poderia me dizer como posso fazer isso?

Muito obrigado!

04-08-2015 às 11:07 Responder

luis felipe grossl

Em resposta a Rodrigo

Rodrigo ja fiz isso me manda um email se quiser umas ajudas

20-08-2015 às 15:46 Responder

Rodrigo

Em resposta a luis felipe grossl

meu e-mail é assistencia.rodrigo@gmail.com

24-08-2015 às 10:08 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rodrigo

Bom, parece que o Luis tem isso pronto... valeu Luis :)

24-08-2015 às 17:43 Responder

Thales

Cara, muito bom o codigo, na verdade nao testei mas dei uma olhada e ficou bem parecido com o que fiz uma vez. Ve só, não sei se vc sabe mas so pra abrir minha mente eu queria saber como posso pegar a latitude e longitude automaticamente, tipo, nao precisa digitar seu ponto de partida pq ele ja localiza, so precisa digitar o ponto de chegada. alguem que souber me manda um email por favor, dai agente pode ajudar um ao outro. Email:thalesmedeiros.ti@gmail.com

04-08-2015 às 21:54 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Thales

Fala Thales, beleza?

Nesse post eu mostro como você pode pegar a localização atual da pessoa de forma automática: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-rotas-entre-multiplos-pontos.html

Abs!

24-08-2015 às 17:42 Responder

Thales

Em resposta a Rodolfo Pereira

Cara, Muito bom mesmo. Vlw, me salvou kkkk.

25-08-2015 às 10:16 Responder

Paulo

Cara, parabéns pelo post. Excelente.
Estou tentando criar algo assim, mas no meu caso busco um tipo de estabelecimento, ex. restaurante e em outro campo um local, ex, uma cidade. E estou tentando trazer uma lista de estabelecimentos que estejam dentro dos parâmetros, mas como nunca usei api do google ta sendo meio complicado.
Se puder ajudar agradeço muito.
Valeu

16-08-2015 às 22:13 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Paulo

Fala Paulo, beleza?

Para fazer isso, dê uma olhada na API do Google Places: https://developers.google.com/places/javascript/

Abs!

24-08-2015 às 17:26 Responder

Henrique

Muito bom artigo... Parabéns...

20-08-2015 às 20:00 Responder

Silezia

Em resposta a Henrique

boa noite

pode me ajudar?

Voce desenvolveu dois artigos muito legais neste endereço:
http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-busca-de-endereco-e-autocomplete.html

1 - Google Maps API v3: Busca de endereço e Autocomplete
2 - Google Maps API v3: Criando um mapa personalizado

Tentei por diversas seguir seu raciocinio para fazer o seguinte:
Desejava colocar no item 1 alguns pontos de latitude e longitude pre-definidos como voce faz no item 2 usando o json.
Deste modo, quando fosse digitado o endereço da pessoa, o mapa mostrasse tambem alguns locais predefinidos.

Voce pode me ajudar nisto?

Grata silezia

25-08-2015 às 20:13 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Silezia

Posso sim :)

Qual é a sua dúvida para implementar este mecanismo?

30-09-2015 às 13:39 Responder

Steven

VELHO TE AMO! Baita ajuda.

06-10-2015 às 01:28 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Steven

:)

06-10-2015 às 09:52 Responder

Ricardo

Rodolfo tudo beleza? Parabéns pelo post.

Eu estou tentando adicionar o autocomplete junto com método de criação de rotas entre múltiplos pontos mais não estou conseguindo, você teria algum exemplo de como faz isso?


desde já valeu!

06-10-2015 às 12:30 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Ricardo

Fala Ricardo! Tudo certo e contigo?

Tem como eu ver essa aplicação rodando?

Abs!

26-10-2015 às 16:13 Responder

Fagner

Como eu posso fazer caso eu possua as coordenadas e queira informar as coordenadas e não o endereço?

13-10-2015 às 10:16 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Fagner

No campo de busca? Se sim, é só a pessoa informar as coordenadas e você pegar esses valores e colocar direto em "var location = new google.maps.LatLng(latitude, longitude);", sem usar o geocoder.

26-10-2015 às 16:07 Responder

Luana

Olá Rodolfo, estou começando a utilizar essa ferramenta agora, e estou tendo dificuldade. Onde coloco

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=ColoqueASuaKeyAqui&amp;sensor=false"></script>

exatamente, e o

<script type="text/javascript" src="jquery.min.js"></script>

?

26-10-2015 às 21:38 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Luana

Oi Luana, tudo bem?

Coloque antes de fechar a tag <body> :)

Abs!

18-12-2015 às 14:41 Responder

F. Carlos de Souza

Olá Rodolfo parabens pelo aplicativo acima, estou procurando urgente um aplicativo onde entro com as cidades e elas vão sendo traçadas no mapa, ate agora so achei o google maps que bloqueia quando chega em 10 endereços, preciso de um aplicativo sem limite, adorei essa aplicação do endereço, seria muito bom se pudéssemos colocar em qualquer ordem e o aplicativo pudesse traçar a melhor rota, reordenando os endereços. Sou vendedor de bonés, e preciso organizar a viagem. gostaria muito de falar com você. meu celular é.: 51-9651-7400 vivo, pode me enviar uma msg que ligo em seguida pra vc. Obrigado, Carlos

11-11-2015 às 14:13 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a F. Carlos de Souza

Fala cara, beleza?

Infelizmente não conheço nenhuma outra alternativa a API do Google Maps que não tenha esse limite de 10 pontos. Fico te devendo essa :(

Abs!

18-12-2015 às 14:40 Responder

Henrique Ferreira

Boa tarde! Quando baixei o seu demo pela primeira vez eu notei que erá possível, encontrar estabelecimentos como, Shopping, Barres, Hospitais e outros e agora notei que o mesmo não está localizando, como faço para habilitar está procura?

12-11-2015 às 14:12 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Henrique Ferreira

Fala Henrique, beleza?

Dê uma olhada na API do Google Places: https://developers.google.com/places/?hl=pt-br

Abs!

18-12-2015 às 14:40 Responder

Ana

Seu tutorial esta incrível, e ta salvando minha vida, sou iniciante em js, você teria algum exemplo feito ou o script de como possibilitar o usuário criar pontos no mapa? seja arrastando ou por formulário

13-11-2015 às 20:26 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Ana

Oi Ana, tudo bem?

Com esse post você consegue fazer 50% isso. A outra metade, você precisaria salvar a localização do ponto inserido pelo usuário, para poder exibí-lo posteriormente.

Abs!

18-12-2015 às 14:31 Responder

Ricardo Ribeiro

Rodolfo parabéns pelo artigo, me ajudou muito!!!

Cara estou com uma duvida, será que consigo atualizar o campo endereço usando o street view? Obrigado

23-11-2015 às 11:40 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Ricardo Ribeiro

Hm, como assim? Não entendi como o Street View se encaixaria na atualização do campo de endereço.

18-12-2015 às 14:30 Responder

Ricardo

Me foi útil, obrigado.

10-12-2015 às 11:33 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Ricardo

De nada :)

18-12-2015 às 12:09 Responder

Thiago

Muito bom o conteúdo. Simples e objetivo.

Vlw

17-12-2015 às 13:47 Responder

Fernando

Parabéns. muito boa a sua explicação!

17-12-2015 às 17:51 Responder

claudinei

Cara valeu por compartilhar eu estava precisando incluir isso em um projeto meu. muito bom obrigado!!

26-01-2016 às 15:01 Responder

Weverton

Fala Rodolfo primeiramente parabéns pelo seu tutorial muito bem explicado e muito fácil de usar. eu estou criando um aplicativo baseado em ionic e angularjs fiz algumas modificações e caiu como uma luva em meu projeto , gostaria de compartilhar e tirar uma única duvida boba primeiro vamos a dúvida.

Quando eu uso o autocomplete funciona normal mas aparece endereço de outros estados , teria como limitar a só um estado por exemplo rio de janeiro ?

Outra coisa nas minhas pesquisar no input aparecem resultados de outros países mesmo com o Brasil concatenado e a região BR teria como me dar uma luz ?

Vou enviar o meu código para compartilhar no outro comentário por que ele grandinho ele além de fazer as buscas do seu tutorial , ainda pega a latitude e longitude e colocar o marker da sua posição no mapa , gera a rota automática entre os 2 endereços o seu e o dá pesquisa , calcula a rota automática sempre que você arrasta o cursor para outro lugar com drag and drop , o usuário pode colocar endereços predefinidos no array do código que nomeei como cities assim os endereços já aparecem no mapa etc... estou criando um aplicativo pra uma empresa de taxi como o Uber e o 99taxi mas 100% com ionic e angularjs espero que o código possa ajudar alguém ... o código ta meio sujo pq ainda não terminei mas é fácil limpar abraços

01-02-2016 às 05:23 Responder

RONAN MACEDO FERREIRA

Em resposta a Weverton

boa tarde Weverton, você poderia disponibilizar essa adaptação que fez para angularJS?? ficaria muito grato se fosse possível.

16-05-2016 às 16:15 Responder

Guilherme

E ae Rodolfo, parabéns mesmo pelo site. Este post me ajudou a construir uma integração com a API do maps facilmente.Ótimo trabalho!!

12-02-2016 às 18:39 Responder

Rodrigo

Excelente post. Ajudou MUITO. Valeu!!!!

27-02-2016 às 00:45 Responder

Fernando

Rodolfo me ajude começei fazer sistemas de informação to curando a materia
projeto integrado 1 , to quase pirando tenho q mostra um projeto que localiza, tipo Guinchos tenho q manda minha localização para recerber o socorro tem como me ajuda fera com alguma ideia alguma funçao para manda minha localização. abração

05-03-2016 às 18:50 Responder

gustavo

hola buenas tardes de me ayudas a crear una aplicacion donde pueda agregar marcadors, con php y mysql

11-03-2016 às 18:04 Responder

Diego Rosa

Parabéns pelo tuto, muito bem explicado.
Me ajudou muito.

12-04-2016 às 13:52 Responder

Brasilio

Parabéns cara, script muito bem montado !!!

Se eu quiser fazer isso por lote, via endereço ou cep tem como ? Por exemplo, pegar lat e long por lotes de 100 ou mais registros..

abraços

15-04-2016 às 13:06 Responder

Paulo Aguiar

Muito bom Rodolfo! O post já tem 4 anos, mas continua atual.

Parabéns pelo post.

15-04-2016 às 19:56 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Paulo Aguiar

:)

27-04-2016 às 02:39 Responder

Daniel de Moura

Em resposta a Rodolfo Pereira

Seu artigo foi de grande serventia meu amigo! consegui aplicar o que aprendi em meu site http://www.rastreamentocorreios.biz/

27-04-2016 às 21:09 Responder

Godero

Em resposta a Rodolfo Pereira

Parabéns pela iniciativa e ajuda... o que passou está sendo de grande ajuda, consegui fazer exatamente como explicou e funcionou..
Estou tendo problemas, assim como vários aqui na lista.. em conseguir inserir no banco de dados.

É no arquivo .js que devo inserir o nome do campo do meu banco de dados ?

Segue o final do .js que você passou e está funcionando, mas quando clico no botão fica somente dando mensagem com nome da rua e latitudes.

$("form").submit(function(event) {
  event.preventDefault();

  var Address = $("#txtAddress").val();
  var latitude = $("#txtLatitude").val();
  var longitude = $("#txtLongitude").val();

  alert("Endereco: " + Address + "\nLatitude: " + latitude + "\nLongitude: " + longitude);
});

Espero que possa me ajudar.. e parabéns novamente...

28-04-2016 às 01:38 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Godero

É, basicamente você vai colocar uma requisição para o seu servidor, passando o que você deseja inserir: Address, latitude e longitude. Algo assim:

var Address = $("#txtAddress").val();
var latitude = $("#txtLatitude").val();
var longitude = $("#txtLongitude").val();


$.ajax({
  method: "POST",
  url: "meuarquivo.php",
  data: { address: Adress, latitude: latitude, longitude: longitude }
})
.done(function() {
  alert("Done!");
});

 

 

03-05-2016 às 07:57 Responder

Emerson

Olá Rodolfo,

Gostei bastante desse código que você postou, estou tentando fazer de modo que quando o usuário inserir o endereço, ao clicar em enviar, seja possível enviar os valores do endereço,latitude e longitude para outra página php via post, ou senão armazenado no banco de dados para usar futuramente tem como fazer isso?

13-05-2016 às 15:53 Responder

Juliano Caetano

Uso já tem um tempo, porém estou tentando colocar o mapa dentro de uma janela modal do bootstrap e simplesmente o mapa não carrega, alguém sabe como resolver?

08-06-2016 às 09:06 Responder

Akassio Silva

Olá Rodolfo eu tenho um site de Guia comercial, que é de uma plataforma, mais o auto completar dele é muito lento, teria que ser instantaneo tipo o Guia Mais,, o que voce acha que possa ser? www.divulgamt.com

10-06-2016 às 15:59 Responder

Felipe Nicolodi

Boa noite Rodolfo, sou iniciante em HTML, fiz o download de todos os arquivos e estou tentando testar em localhost, porém ao digitar o nome da cidade não é apontado nenhuma sugestão... É necessário fazer algo mais no código? Alguma implementação relacionada a banco de dados? Se sim, quais dados são necessário armazenar/estarem armazenados no banco de dados? Obrigado.

09-07-2016 às 22:06 Responder

ALISSON DIAS

Excelente explicação, irei utilizar no TCC.
Grato!

19-07-2016 às 22:15 Responder

Washington Antunes

Prezado Rodolfo.
Faz bastante tempo que preciso de um tutorial como este, mas nunca o procurei diligentemente como hoje. Este é quase perfeito para o que preciso. Estou disposto a pagar o preço de um arquivo completo como este, de modo que eu possa baixar e começar a usar em minha página, mas preciso que seja assim: Dois campos como estes, com autocomplete. Em cada um deles será digitado um endereço diferente, com o objetivo de obter a distância em KM entre os dois. O que preciso, é da distância em KM.
Se estiver disposto a me ajudar, por favor me diga quanto vai me custar.
Muito grato.

26-08-2016 às 21:33 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Washington Antunes

Opa, manda um e-mail para contato@princiweb.com.br :)

20-09-2016 às 10:00 Responder

Washington Antunes

Em resposta a Rodolfo Pereira

Preciso de ajuda.
Obtive as API's do Google Maps, obtive uma chave e está funcionando. Mas tem um problema:

Se digito um endereço, com nome de rua, nº, etc, tudo funciona. O autocomplete funciona e o endereço pesquisado também é encontrado.

Mas se digito um local, por exemplo: "Restaurante do Bolinha", não rola nem o autocomplete e nem o endereço é encontrado. Além disto, ainda quando digito apenas um local, o autocomplete sempre traz resultados de outra cidade, menos a de São Paulo, que é o que me interessa.
Peguei as API's erradas ?

23-09-2016 às 14:45 Responder

Lucas

Otima iniciativa em ajudar Rodolfo!!

Cara estou com dificuldades sou meio leigo ainda em programação web, como faço pra chamar o meu arquivo maps.js em meu html 'index' (ou no meu arquivo principal) ??

08-09-2016 às 10:49 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Lucas

Fala Lucas, beleza?

Dê uma olhada aqui.

Abs!

20-09-2016 às 09:59 Responder

Anderson Paixão

Parabéns amigo,

Muito bom o tutorial!

Consegui aplica-lo para um projeto.

Felicidades!

12-09-2016 às 16:57 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Anderson Paixão

:)

20-09-2016 às 09:57 Responder

Washington Antunes

Preciso de ajuda com APIs Google Maps.
Necessariamente, minha página terá de encontrar "lugares" , como restaurantes, teatros, pontos turísticos, etc.

A API que baixei só encontra endereços com nome de rua, nº, etc. Não encontra, por exemplo, um restaurante pelo nome.

Isso pode significar que estou com a API errada ?

Se nessa página tem, como faço para obter ?
http://www.tarifadetaxi.com/sao-paulo

23-09-2016 às 14:59 Responder

Mecias

Em resposta a Washington Antunes

Olá, eu criei um método para posicionar o mapa no endereço atual, usando o geolocation, agora eu só preciso atualizar o input com o endereço, como eu faria isso?

function SetarLocalNoMapa() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position)
{ var ponto = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
marker.setPosition(ponto);
map.setCenter(ponto);
map.setZoom(13);
//$('#txtEndereco').val(marker.formatted_address); ???
});
}
}

23-05-2017 às 16:59 Responder

Talles

Olá Rodolfo,
Li seus posts sobre mapas na aplicação e achei muito bons parabéns!

Eu quero tirar uma dúvida com você, eu preciso fazer um Mapa que tenha um campo de "input" onde o usuário possa colocar o endereço ou cidade e simplesmente crie um marcador naquele ponto indicado.

Na verdade a marcador que ele indicar no mapa eu preciso armazenar as informações de latitude e longitude de cada marcador.


Você tem algum exemplo ou sabe me direcionar como fazer ?

Muito obrigado.
Abraços

29-09-2016 às 15:57 Responder

Joni de Campos

Estou utilizando place.address_components para obter os dados do autocomplete, mas o google maps api não retorna o CEP completo.

13-12-2016 às 10:54 Responder

Washington Antunes

Olá, Rodolfo. Muito obrigado por tantas informações, mas será que poderia tentar me ajudar ?

Tenho uma paginazinha que usa API do Google Maps, mas tem um probleminha:

Se meu cliente digitar, por exemplo, "Hotel Unique", o autocompletar exibe uma lista de probabilidades. Ao clicar na opção que interessa, o item clicado traz o endereço sem o número do prédio. Será algo na configuração ?

O Hotel Unique fica na Avenida Brigadeiro Luís Antônio, 4700 - Jardim Paulista, São Paulo - SP, Brasil.

Só que o número 4700 não é selecionado quando se clica na opção. Você teria como me ajudar com isso?

Muito agradecido.

20-12-2016 às 19:40 Responder

Peter Kell

Ola, sou recém-aprendiz na praia do Java, mas muito legal sua função, e muito compreensivel suas explicações, ainda não tentei rodar, mas acho que vai ser bem bom. Ainda tenho que aprender como gerar distância da rota em "maps", por outro lado, gostaria de preencher o endereço de origem (onde esta o passageiro) automaticamente, e deixar por conta dele digitar o endereço de destino, assim terei origem/destino para solicitar a distancia e assim calcular a "previsão de custo" do transporte.

16-01-2017 às 14:34 Responder

Clebson

Rodolfo parab&#233;ns pelo post e pelo site!!!!<br /><br />N&#227;o estou conseguindo fazer a aplica&#231;&#227;o funcionar, criei uma p&#225;gina no visual studio, quando eu uso o seu exemplo index.html ele funciona, por&#233;m quando insiro as informa&#231;&#245;es da minha p&#225;gina default.aspx o mapa n&#227;o carrega e o autocomplete n&#227;o funciona.<br /><br /><br /><br /><br />&lt;%@ Page Language=&quot;C#&quot; AutoEventWireup=&quot;true&quot; CodeBehind=&quot;Default.aspx.cs&quot; Inherits=&quot;BDCRUD.Default&quot; %&gt;<br /><br />&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;<br />&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;<br /> &lt;head&gt;<br /> &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;<br /> &lt;title&gt;Google Maps API v3: Busca de endere&#231;o e Autocomplete - Demo&lt;/title&gt;<br /><br /> &lt;link href=&quot;http://fonts.googleapis.com/css?family=Open+Sans:600&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot; /&gt;<br /> &lt;link href=&quot;estilo.css&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot; /&gt;<br /><br /> &lt;script type=&quot;text/javascript&quot; src=&quot;http://maps.googleapis.com/maps/api/js?sensor=false&quot;&gt;&lt;/script&gt;<br /> &lt;script type=&quot;text/javascript&quot; src=&quot;jquery.min.js&quot;&gt;&lt;/script&gt;<br /> &lt;script type=&quot;text/javascript&quot; src=&quot;mapa.js&quot;&gt;&lt;/script&gt;<br /> &lt;script type=&quot;text/javascript&quot; src=&quot;jquery-ui.custom.min.js&quot;&gt;&lt;/script&gt;<br /><br /> &lt;/head&gt;<br /> <br /> &lt;body&gt;<br /><br /> &lt;div id=&quot;apresentacao&quot;&gt;<br /><br /> &lt;h1&gt;Google Maps API v3: Busca de endere&#231;o e Autocomplete - Demo&lt;/h1&gt;<br /> <br /> &lt;form method=&quot;post&quot; action=&quot;Default.aspx&quot; &gt; <br /> &lt;fieldset&gt;<br /><br /> &lt;legend&gt;Google Maps API v3: Busca de endere&#231;o e Autocomplete - Demo&lt;/legend&gt; <br /> <br /> &lt;div class=&quot;campos&quot;&gt;<br /> &lt;label for=&quot;txtEndereco&quot;&gt;Endere&#231;o:&lt;/label&gt;<br /> &lt;input type=&quot;text&quot; id=&quot;txtEndereco&quot; name=&quot;txtEndereco&quot; /&gt;<br /> &lt;input type=&quot;button&quot; id=&quot;btnEndereco&quot; name=&quot;btnEndereco&quot; value=&quot;Mostrar no mapa&quot; /&gt;<br /> &lt;/div&gt;<br /><br /> &lt;div id=&quot;mapa&quot;&gt;&lt;/div&gt;<br /> <br /> &lt;input type=&quot;submit&quot; value=&quot;Enviar&quot; name=&quot;btnEnviar&quot; /&gt;<br /> <br /> &lt;input type=&quot;hidden&quot; id=&quot;txtLatitude&quot; name=&quot;txtLatitude&quot; /&gt;<br /> &lt;input type=&quot;hidden&quot; id=&quot;txtLongitude&quot; name=&quot;txtLongitude&quot; /&gt;<br /><br /> &lt;/fieldset&gt;<br /> &lt;/form&gt;<br /><br /> &lt;div class=&quot;autores&quot;&gt;<br /> &lt;p&gt;Criado por: &lt;a href=&quot;http://twitter.com/rodolfoprr&quot; target=&quot;_blank&quot;&gt;Rodolfo Pereira&lt;/a&gt; | Estilizado por: &lt;a href=&quot;http://twitter.com/jofelipe_&quot; target=&quot;_blank&quot;&gt;Jonathan Felipe&lt;/a&gt;&lt;/p&gt;<br /> &lt;/div&gt;<br /><br /> &lt;/div&gt;<br /> <br /> &lt;/body&gt;<br /><br />&lt;/html&gt;<br />

16-03-2017 às 16:21 Responder

Marcus Guarani

Bom dia Rodolfo, tudo bem meu amigo
gostaria de saber como faço para fazer essa busca via banco de dados na qual tenho 15 lojas espalhadas, como faço para fazer a busca por elas, tipo digito loja 15, loja 18 e ai me faz uma busca do ponto exato dessa loja, vc poderia me ajudar nisso. no aguardo, obrigado

03-04-2017 às 10:56 Responder

Maicol

Belo Post, me quebrou um galho e tanto aqui

01-05-2017 às 18:14 Responder

Thiago

Gostei muito do post. Como eu faria para calcular a distancia entre 2 pontos e pagar essa distancia?

29-05-2017 às 21:43 Responder

cleber muniz

Olá, eu estou precisando fazer algo similar, mas ao usuario inserir o endereço preciso que apareca empresas cadastradas

14-06-2017 às 01:08 Responder

Rogério De Oliveira

Obrigadão, cara!! ajudou pra caramba, o trabalho do técnico era exatamente isso xD

19-06-2017 às 19:32 Responder

Mario

Alguem consegue fazer isso para mostrar cruzamentos?

20-07-2017 às 14:53 Responder

Rodrigo

Boa Noite estou utilizando este tutorial e verifiquei que a longitude vem com números a mais pode verificar o que pode estar acontecendo obrigadi

21-07-2017 às 23:33 Responder

Leonardo

Rodolfo existe alguma maneira por exemplo de eu fazer uma requisição através de uma função no php(existente ou eu criaria se fosse o caso) e através dela eu obter as informações de Latitude e Longitude pra assim eu estar armazenando no banco de dados e estar usando como referência depois.

02-08-2017 às 17:23 Responder