Como usar a API do "Google Maps" para o preenchimento automático de texto

Escrito por veronica summers | Traduzido por gisel soto
  • Compartilhar
  • Tweetar
  • Compartilhar
  • E-mail

Interaja com os visitantes do seu website, permitindo-lhes entrar em uma localização específica, através de seu mapa do Google personalizado. Usando a terceira versão da API (Interface de Programação de Aplicativos) do Google Maps, você pode criar um campo de texto para que os usuários digitem um endereço ou o nome de uma empresa. Com base no texto digitado, o Google Maps irá oferecer sugestões e preencher automaticamente o campo. Adicione o recurso "Preenchimento automático de localizações" em seu mapa personalizado do Google usando o construtor "Autocompletar".

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

Instruções

  1. 1

    Acesse seu arquivo HTML e localize seu código do "Google Maps".

  2. 2

    Defina a variável de entrada do usuário após o código de inicialização de seu mapa. Por exemplo, digite:

    var user_input = document.getElementById('searchTextField');

  3. 3

    Especifique as opções para a entrada de caracteres. Elas incluem a definição dos limites, que restringe a latitude e a longitude para a busca, e também a definição do tipo de entrada, que permite que o usuário pesquise um nome comercial ou um endereço geocodificado. Por exemplo, digite:

    var options = { bounds: defaultBounds, types: ['geocode'] };

    Neste exemplo, os usuários podem procurar por endereço e os limites são irrestritos.

  4. 4

    Crie o controle de "Autocompletar". Por exemplo, digite:

    userAutocomplete = new google.maps.places.Autocomplete(input, options);

  5. 5

    Modifique a etiqueta no campo de entrada, em seu código HTML. Por exemplo, digite:

    <input id="searchTextField" type="text" size="50" placeholder="Por favor, indique uma localização:">

  6. 6

    Salve o arquivo e teste-o. O Google Maps irá monitorar o campo de entrada e preenchê-lo automaticamente quando o usuário começar a digitar.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível