Traçando rota utilizando API do Google Maps para Javascript

Quantos sites vemos pela internet que possuem uma página de contato e também a localização daquele lugar ou evento. Uma interação interessante que você pode fornecer ao visitante é a possibilidade dele traçar a rota até este local, abreviando o tempo que ele teria para abrir o Google Maps e localizar e descobrir como chegar. Neste vídeo tutorial ensino passo-a-passo como utilizar a API do Google Maps para traçar a rota do ponto de origem informado pelo usuário e o destino utilizando JavaScript.

9 Comentários

  1. Nishiya Responder

    Excelente explicação!

  2. Alex Responder

    Boa noite Paulo!
    Parabéns pelo vídeo, muito bem explicado.
    Segui exatamente a sua explicação no vídeo, mas no lugar do mapa aparece apenas um fundo cinza.
    Ao inserir um endereço para traçar a rota, ele traça a rota e mostra no mapa perfeitamente.
    O que pode ser? Já revisei o código atrás de erros diversas vezes e está tudo como no vídeo.
    Desde já agradeço a ajuda.

    • Paulo Rodrigues Responder

      Olá Alex, muito obrigado por assistir ao vídeo. Sobre o problema, é difícil saber pois é algo bem simples se levar em conta somente a exibição do mapa, que é onde você está tendo problema.

      Você chegou a baixar (http://goo.gl/9HgKG) o exemplo que fiz deste próprio tutorial? Veja que deu tudo certo, a partir dele você pode comparar com o seu. Somente o método initialize() que cria este mapa inicial, talvez seja em algum trecho deste.

      Se ainda assim tiver algum problema, mande pra mim o seu código que eu posso dar uma analisada melhor para identificar o erro.

  3. Junior Nascimento Responder

    Paulo, parabéns pelo tutorial!

    Só uma dica, deixe os códigos na página para fazer o passo-a-passo, fica mais fácil pro leitor testar 😉

  4. Olivio Responder

    Excelente tutorial.
    Paulo, me diz uma coisa como eu poderia ter alguns pontos em uma determinada rota e calcular essa rota de onde eu estiver, ou seja buscar um ponto mais próximo de onde eu estiver.

  5. Marllon Ramos Responder

    Muito bom vídeo, Paulo!
    Talvez vc possa me ajudar. Gostaria de saber como eu faço para recuperar o endereço de um ponto para uma textbox assim que eu arrasto um marker de uma rota no maps.

    • Paulo Rodrigues Responder

      Olá Marllon, para isso você vai fazer um “reverse geocoding”, passando a latitude e longitude que você vai obter com seu marcador e então recuperar o endereço. Note aqui na documentação (https://goo.gl/knb1ux), que através do método “geocoder.geocode” você passa location como parâmetro e recuperar várias possibilidades, como logradouro, cidade, país e etc.

      Espero que tenha ajudado, mas se ainda assim tiver dúvidas, tentarei solucionar para você.

  6. DIEURE DE OLIVEIRA Responder

    Gostaria de saber como Traçar várias direções…tipo ponto a ponto

Deixe uma resposta