Como geocodificar um endereço no google maps javascript

Google Maps é hoje uma das mais poderosas ferramentas para a criação e ferramentas de manipulação de mapa dinâmico disponível. Há usos quase ilimitadas para o Google Maps, e um bom ponto de partida no seu caminho para um ótimo lugar é encontrar uma maneira de obter uma localização no mapa a partir de uma única direção. Siga os passos abaixo e têm a capacidade de criar seu próprio site intuitivo e interativo, usando Mapa API javascript do Google. Cada passo mostra uma tela com o código exato usado em tal Paso pode clicar em cada imagem para ampliar.

passos

1

Comece com uma página web que você adicionou Google map API javascript.



cria um caixa de texto onde os usuários colocar o endereço. Endereço: um botão para o usuário a clicar e geocodificar o endereço Crea. Define uma variável fora da função de inicialização para torná-lo disponível em qualquer código javascript, este irá armazenar a classe geocoder objeto. Define a variável var geocoder geocoder- igual a uma instância do geocoder classe de Google Maps como uma função nova Google Maps Geocoder () dentro de inicializador (). geocoder = new google.maps.Geocoder () - Adiciona um segunda característica ao seu código javascript e nomear codeAddress. Esta não será atribuído qualquer valor. função codeAddress () {} Certifique-se a primeira linha usar a função getElementById para obter o endereço da caixa de texto e colocá-lo dentro da variável que chamamos sAddress.var sAddress = document.getElementById (" inputTextAddress") .value- Geocodificação Chamada objeto método de geocoder, vai demorar dois parâmetros. O primeiro é GeocoderRequest, isso indica que tipo de aplicação está a ser feito e qual é o valor da aplicação. A segunda é a função de retorno (retorno) para ser utilizado para processar os resultados. geocoder.geocode ({ `endereço`: sAddress}, function (resultados, status) {}) - A função de retorno de chamada deve primeiro verificar o valor de status da função de retorno de chamada. Use uma instrução IF para testar o resultado e ver se o estado é igual a google.maps.GeocoderStatus.OK. também acrescenta uma cláusula else para IF.if instrução (status == google.maps.GeocoderStatus.OK) {} else {} Se o estado é igual OK, chame setCenter mapa método variável. Você deve completar este método para obter os resultados do primeiro local geométrica.map.setCenter (results.geometry.location) - Em seguida, use o mesmo resultado da localização geométrica de adicionar um marcador para mapear variável. Criar uma nova variável chamada oMarker- que será guardada como um novo google.maps.Marker. O novo método usa dois parâmetros, o primeiro é o mapa que você está adicionando o marcador e a segunda é a posição em que a referida etiqueta está localizada, que é novamente o resultado da localização geométrica.var marcador = novas google.maps. marcador ({mapa: mapa, a posição: results.geometry.location}) - Finalmente, adicione uma mensagem de alerta dirigida a outra pessoa para deixar o usuário quando o geocoder não funcionar como deveria. Você pode usar o Estado para fornecer mais informações ao invés de dizer simplesmente não funcionó.alert ("Geocode não foi bem sucedida pelo seguinte motivo:" + Status) - Agora você pode tentar! Digitar um endereço ou o nome de uma cidade e estado ou mesmo apenas o nome do Estado. Você vai ver que o mapa irá mostrar o novo local e adicionar marcador.La lá para um site usado para este exemplo pode ser visto e usado, seguindo o link encontrado na parte inferior na seção de Referências.

dicas

  • Se uma mensagem de erro aparece, use console.log em combinação com seu depurador favorito (como o Firebug) para depurar seu javascript.
  • Alternativamente, você pode tentar o seguinte. Se uma mensagem de erro aparece, digite o comando, alerta lugar ("") - Assim, você pode ver o quão longe o código veio antes de falhar.
  • javascript é sensível ao uso de maiúsculas e minúsculas assim que você deve ter cuidado com o tipo e formato erros.
  • erros de javascript pode ser difícil de detectar. Peça a um amigo ou colega para revisar o código não funciona. Às vezes, um par de olhos é tudo o que é necessário.

    • avisos

    • Certifique-se de usar o Google Maps, nos termos e condições de utilização estabelecidas.

    Coisas que você precisa

    • Web site com mapa do Google Maps API habilitado
    • conhecimento básico de javascript

    RELACIONADOS

    Artigos Relacionados