Campo de busca

Categoria Programação

Google Maps API v3: Criando rotas entre múltiplos pontos

Google Maps API v3: Criando rotas entre múltiplos pontos

Por | 22 de outubro, 2013 | 311 comentários

Fala pessoal, tudo certo?

Continuando a nossa aventura pela API do Google Maps, agora é hora de aprendermos a fazer rotas entre dois ou mais endereços previamentes definidos pelo usuário.

Nesse tutorial, você irá ver como desenhamos as rotas no Google Maps e exibimos de forma textual as suas instruções, obtendo a posição atual do usuário como ponto de partida.

Reencontrando velhos amigos

Como você já aprendeu nos posts anteriores sobre a API do Google Maps, iremos utilizar alguns velhos conhecidos, como o Geocoder e o LatLng. Por causa disso, se você não possui nenhuma experiência com o básico da API do Google Maps, recomendo que você dê uma lida nos posts Google Maps API v3: Criando um mapa personalizado e Busca de endereço e Autocomplete antes de prosseguir.

Gente nova no pedaço

Para obtermos a rota entre dois pontos e exibí-la no mapa, utilizaremos o Serviço da Google Directions API. Lendo a sua documentação, perceba que agora faremos dois novos amigos: O google.maps.DirectionsService e o google.maps.DirectionsRenderer.

Começando pelo google.maps.DirectionsService, o seu funcionamento é bem simples: Basta nós passarmos um objeto google.maps.DirectionsRequest, o qual irá conter o ponto de origem e o ponto de destino, e o meio de transporte, que podemos definir entre carro, a pé, bicicleta ou transporte público, que ele irá nos retornar um objeto google.maps.DirectionsResult, o qual contém as informações da rota, e o google.maps.DirectionsStatus, que por sua vez define o estado final da nossa requisição, ou seja, ele pode indicar sucesso (DirectionsStatus.OK), sem resultados (DirectionsStatus.ZERO_RESULTS), erro (DirectionsStatus.INVALID_REQUEST ou DirectionsStatus.REQUEST_DENIED), etc.

Já o google.maps.DirectionsRenderer, basicamente, fica responsável por renderizar o resultado fornecido pelo google.maps.DirectionsService. Simples, não?

Botando a mão na massa

Para colocarmos em prática o que vimos até agora, vamos criar uma simples página, a qual irá possuir um formulário, onde a pessoa irá digitar um endereço de partida e um endereço de chegada, e o nosso mapa. Ao enviar esse formulário, vamos mostrar no mapa a rota entre esses dois endereços. Vejamos a nossa página:

<form method="post" action="index.html">
   <fieldset>
      <legend>Criar rotas</legend>
               
      <div>
         <label for="txtEnderecoPartida">Endereço de partida:</label>
         <input type="text" id="txtEnderecoPartida" name="txtEnderecoPartida" />
      </div>
               
      <div>
         <label for="txtEnderecoChegada">Endereço de chegada:</label>
         <input type="text" id="txtEnderecoChegada" name="txtEnderecoChegada" />
      </div>
               
      <div>
         <input type="submit" id="btnEnviar" name="btnEnviar" value="Enviar" />
      </div>
   </fieldset>
</form>
   
<div id="mapa" style="height: 500px; width: 700px"></div>
       
<script src="js/jquery.min.js"></script>
 
<!-- Maps API Javascript -->
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<!-- Arquivo de inicialização do mapa -->
<script src="js/mapa.js"></script>

Perceba que aqui você pode otimizar a experiência do usuário: Ao digitar os endereços, ofereça algumas sugestões baseadas no Google Maps, através da API de busca de endereço. Você quer aprender como fazer isso? Dê uma olhada no post Google Maps API v3: Busca de endereço e Autocomplete.

Em nosso arquivo mapa.js, vamos utilizar o jQuery para manipular o evento .submit() do formulário, cancelando a sua ação original, e pegando os valores de partida e chegada para passarmos para o directionsService.route, que irá nos retornar a rota entre esses dois endereços:

var map;
var directionsDisplay; // Instanciaremos ele mais tarde, que será o nosso google.maps.DirectionsRenderer
var directionsService = new google.maps.DirectionsService();

function initialize() {
   directionsDisplay = new google.maps.DirectionsRenderer(); // Instanciando...
   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);
   directionsDisplay.setMap(map); // Relacionamos o directionsDisplay com o mapa desejado
}

initialize();

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

   var enderecoPartida = $("#txtEnderecoPartida").val();
   var enderecoChegada = $("#txtEnderecoChegada").val();

   var request = { // Novo objeto google.maps.DirectionsRequest, contendo:
      origin: enderecoPartida, // origem
      destination: enderecoChegada, // destino
      travelMode: google.maps.TravelMode.DRIVING // meio de transporte, nesse caso, de carro
   };

   directionsService.route(request, function(result, status) {
      if (status == google.maps.DirectionsStatus.OK) { // Se deu tudo certo
         directionsDisplay.setDirections(result); // Renderizamos no mapa o resultado
      }
   });
});

Ahá! Olhe só o resultado:

Google Maps API - Rotas

Que os GPSs sem cuidem!

O legal aqui é que podemos personalizar a nossa rota, como por exemplo, definir que queremos evitar pedágios ou estradas no nosso trajeto, utilizar pontos de referência no meio do percurso, prover rotas alternativas, tornar os pontos arrastáveis e muito mais! As possibilidades são muitas, e devido a isso, não irei mostrar aqui o código de todas elas, senão esse post iria ficar gigante. Caso você queria ver um exemplo específico, deixe um comentário que eu atualizo o post ;-)

Exibindo a rota em texto

Quando nós fazemos uma rota no próprio site do Google Maps, temos o seu resultado desenhado no mapa (como acabamos de fazer), e temos o trajeto em texto também, o que é legal caso o usuário queira imprimir para levar na sua viagem, por exemplo. Através da API, também conseguimos disponibilizar essa funcionalidade para o usuário.

Primeiro de tudo, vamos criar um elementro div, o qual irá armazenar as informações a serem exibidas do percurso:

...

<div id="mapa" style="height: 500px; width: 700px"></div>
       
<div id="trajeto-texto" style="height: 300px; width: 200px"></div> // Elemento para exibição

...

Após isso, vamos falar para o DirectionsRenderer qual é esse elemento, para que ele possa colocar as informações dentro dele:

...

map = new google.maps.Map(document.getElementById("mapa"), options);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("trajeto-texto")); // Aqui faço a definição

...

Como resultado, temos:

Google Maps API - Rota em texto

Criando rotas em múltiplos pontos

Até agora vimos como criar rotas entre dois pontos. No meu post Google Maps API v3: Criando um mapa personalizado, algumas pessoas me perguntaram como criar rotas com múltiplos pontos, e é o que veremos agora.

Para isso, utilizaremos o DirectionsWaypoints, que são alguns pontos pré-definidos no meio do nosso trajeto. Veja que continuaremos a ter os dois pontos que vimos até agora, mas aqui só iremos adicionar alguns pontos no meio desses dois. Vejamos:

var request = {
   origin: enderecoPartida,
   destination: enderecoChegada,
   waypoints: [{location: 'Rodoviária, Campinas'}, {location: 'Taquaral, Campinas'}],
   travelMode: google.maps.TravelMode.DRIVING
};

Nesse caso, adicionei dois pontos os quais o trajeto tem que passar para chegar até o ponto de chegada. O resultado do mapa ficará assim:

Google Maps API - Múltiplos pontos

Utilizando a localização atual do usuário

Que tal pegarmos o endereço atual do usuário e colocá-lo automaticamente como ponto de partida? Faremos isso através da Geolocation API do HTML5:

if (navigator.geolocation) { // Se o navegador do usuário tem suporte ao Geolocation
   navigator.geolocation.getCurrentPosition(function (position) {

      pontoPadrao = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); // Com a latitude e longitude que retornam do Geolocation, criamos um LatLng
      map.setCenter(pontoPadrao);
  
      var geocoder = new google.maps.Geocoder();
  
      geocoder.geocode({ // Usando nosso velho amigo geocoder, passamos a latitude e longitude do geolocation, para pegarmos o endereço em formato de string
         "location": new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
      },
      function(results, status) {
         if (status == google.maps.GeocoderStatus.OK) {
            $("#txtEnderecoPartida").val(results[0].formatted_address);
         }
      });
   });
}

Finalizamos! Agora temos um mapa que mostra a rota entre dois ou mais pontos e que sugere a localização atual do usuário como ponto de partida. Se você foi mais aplicado, terá feito também o autocomplete nos campos de endereço, pegando direto do Google Maps! Vai dizer que não ficou da hora?

Como de costume, deixo o código completo no meu GitHub, para caso você queira estudar melhor o código ou fazer alguma alteração.

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!

 

[311] Comentários  

Diego Souza

Muito bom o projeto, acho que sera bem util para várias pessoas, parabéns ae Jesus. E coloca o "multiplos pontos" na demo também ajudaria bastante a visualização na pratica do mesmo ;)

23-10-2013 às 11:14 Responder

Fernando Silva

Rodolfo tudo bem ?
Ola Rodolfo, seguinte : vamos supor que eu tenha múltiplos endereços, mas de repente eu informo o google sobre o endereço "Rua Alvaro. O google identifica que existem outros endereços que começam com Rua Alvaro..... (ai minha dúvida, qual API que pode me mostrar a "sugestão " de endereço correto? Obrigado Fernando.

01-11-2013 às 22:21 Responder

Alan Jhonson

Cara, tu é muito fera. Obrigado pelos tutoriais. Gostaria só fazer uma pergunta. Se eu quiser colocar o ponto B como meu endereço fixo. Para que cada pessoa que faça uma busca no meu site só coloque seu endereço e receba o trajeto até minha loja como eu devo fazer isso?

11-11-2013 às 09:53 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Alan Jhonson

Nesse caso, eu definiria o destination como um objeto LatLng, o qual irá conter a latitude e longitude do seu endereço fixo.

Para pegar os números de latitude e longitude, recomendo que você entre nessa demo http://www.princiweb.com.br/demos/google-maps-api-v3-busca-endereco-autocomplete/, faça a busca do endereço e clique em "Enviar".

Depois que você tiver esses números, modifique o destination de:

destination: enderecoChegada,

para

destination: new google.maps.LatLng(numeroLatitude, numeroLongitude),

02-12-2013 às 14:08 Responder

Marlon

Tudo bom Rodolfo? Gostaria de saber se o google disponibiliza outra maneira de exibir a Rota em Texto, pois precisava fazer uma maneira que fosse possível editar a saída deste Texto, personalizando ela mais.
Muito obrigado.

10-12-2013 às 12:20 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Marlon

Edite-o através do JS. Após o "directionsDisplay.setDirections(result);", você terá no seu documento HTML todo o texto disponibilizado pela API, daí em diante é só manipulá-lo através do JS.

06-01-2014 às 17:00 Responder

Matheus Munareto

Parabéns cara, muito legal, gostaria de saber se tens como fazer isso, não só partindo pela web, mas com uma aplicação feita em Java. Exeplo: Eu criei uma aplicação no netbeans que quero que informe o tempo e os Km de uma cidade de origem para a Destino se comunicando com as API. Tem como? Se possível mail-me

11-12-2013 às 16:27 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Matheus Munareto

Tem como sim, já que a API de rotas independe da tecnologia utilizada. Basta fazer uma requisição à API e tratar o retorno para a sua aplicação.

06-01-2014 às 16:52 Responder

nilton

Otimo projeto !!!

Gostaria de entender como funciona o recurso para troca de rota arrastando o trajeto para outros pontos...

Obrigado

10-01-2014 às 10:47 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a nilton

Antes de declarar o map, coloque:

var rendererOptions = {
   draggable: true
};

E dentro da função "initialize", onde você inicializa o objeto "DirectionsRenderer", passe para ele como parâmetro o "rendererOptions":

directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

13-01-2014 às 16:48 Responder

Thiago

Em resposta a Rodolfo Pereira

Não deu certo, será pq estou usando múltiplos waypoints?
Parabéns pelo post, material excelente.

11-08-2014 às 16:35 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Thiago

Fiz um teste com waypoints, e foi normal. O seu código está assim?

function initialize() {    

    var rendererOptions = {
       draggable: true
    };

    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

15-10-2014 às 10:42 Responder

Marco Tulio

Em resposta a Rodolfo Pereira

Obrigado funciona perfeitamente assim como tudo que disponibiliza.

19-11-2015 às 13:52 Responder

Osvaldo Filho

Criei um mapa em que o cliente digita o endereço dela(A) e o mapa cria a rota a minha empresa(B), o mapa cria a rota corretamente, porem à informação mostrada em (B) estão errada(Rua Padre Américo Ceppi, 138-208 - Brasil, Uberlândia - MG, 38400-672, Brasil) o certo seria (Rua Ricardo Siquierolli Tucci, nº1-nº2 - Brasil, Uberândia - MG, 38400-722, Brasil). Há como alterar às informações mostrada em (B) colocando as informações correta ou retirar (B) e usar somente meu marcador personalizado? link: http://uberlan.portalbrasilcentral.com.br/index.php?pa=comochegar

13-01-2014 às 16:39 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Osvaldo Filho

Pelo que eu vi, o ponto B está na Rua Padre (...) e por isso que ele pega esse endereço. Basta você alterar para a Rua Ricardo (...).

13-01-2014 às 17:02 Responder

Osvaldo Filho

Em resposta a Rodolfo Pereira

Rodolfo Pereira, poderia verificar novamente, pois eu não tinha terminado de fazer o upload do novo arquivo para servidor. segue a imagem: http://imageshack.com/a/img577/4296/81vb.jpg

13-01-2014 às 17:27 Responder

Osvaldo Filho

Em resposta a Osvaldo Filho

a como alterar a informação que aparece no ponto B

20-01-2014 às 11:48 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Osvaldo Filho

Bom, primeiro de tudo você terá que remover os marcadores padrões da API, já que você irá utilizar um próprio com uma caixa de informações personalizada.

Para remover os marcadores padrões da API, basta criar uma estrtutura rendererOptions com suppressMarkers: true e passá-la para o google.maps.DirectionsRenderer, ficando:

var rendererOptions = {
   suppressMarkers: true
}

directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

Após isso, vamos colocar nossos dois pontos personalizados, um no início da rota e outro no término:

directionsService.route(request, function(result, status) {
   if (status == google.maps.DirectionsStatus.OK) {
 
      var leg = result.routes[0].legs[0];
    
      var markerInicio = new google.maps.Marker({
         position: leg.start_location,
         map: map,
         icon: "http://www.seusite.com.br/marker.png"
      });

      var markerTermino = new google.maps.Marker({
         position: leg.end_location,
         map: map,
         icon: "http://www.seusite.com.br/marker.png"
      });

      directionsDisplay.setDirections(result);
   }
});

Por último, no marcador final você adiciona uma caixa de informação, que você pode aprender a colocar aqui: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html

28-01-2014 às 10:12 Responder

Osvaldo Filho

Em resposta a Rodolfo Pereira

Obrigado pela ajuda, no mapa consegui configurar corretamente, mas inda estou tendo dificuldade na rota em texto, há como alterar os ícone dos pontos (A e B) e no ponto B alterar o texto.

04-02-2014 às 14:46 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Osvaldo Filho

Sim. Depois que você chama o "directionsDisplay.setPanel", você tem liberdade total sobre o HTML gerado do texto da rota.

A partir disso, manipule as duas tags das imagens e troque os ícones.

20-02-2014 às 17:22 Responder

Samuel Quiteque

Em resposta a Rodolfo Pereira

Ola rodolfo, preciso da tua ajuda, gostaria muito que envias este exemplo a funcionar numa pagina.
Estou a fazer um projecto onde objectivo é cria uma rota A e B com
descrição dos pontos vindo do ficheiro pontos.json

14-07-2014 às 08:19 Responder

Allan Gaspar

Em resposta a Rodolfo Pereira

Rodolfo e se eu tivesse vários waypoints como eu poderia setar um marcador para eles, digamos que minha rota pode ter de 1 a 8 waypoints (que é o limite do google) como eu poderia setar o marcador para eles?

04-12-2014 às 16:47 Responder

Bruno Gaudard

Em resposta a Rodolfo Pereira

Rodolfo, Boa Tarde!

Estou tentando emplementar marcadores para vários Waypoints, porém não consegui nem emplementar este exemplo que você deu para os marcadores de início e de fim de rota. teria como me ajudar por favor?

29-08-2016 às 17:23 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Bruno Gaudard

Sim! Qual é o problema que está acontecendo? :)

20-09-2016 às 10:00 Responder

DIEGO TELLES

Boa noite!

Rodolfo;

Excelente Post, me ajudou e muito estou com um projeto na empresa para criar um aplicativo que pega a localização atual do usuário e traça o destino que é uma localização fixa.
Obrigado pelo Post parabéns.

24-01-2014 às 21:23 Responder

Luiz Guilherme Palazzo

Olá Rodolfo, beleza?
Cara estou a um mês quebrando a cabeça para resolver isso, como faço para exibir os pedágios existentes na rota? Se você puder me ajudar ficarei muito grato!

06-02-2014 às 01:28 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Luiz Guilherme Palazzo

Cara, por padrão na rota em texto, são exibidos os pedágios. Aí a pessoa pode clicar no item da rota em texto que tem o pedágio, para vê-lo no mapa, porém não é uma marcação precisa.

20-02-2014 às 16:56 Responder

Luiz Guilherme Palazzo

Em resposta a Rodolfo Pereira

Então cara, é que preciso criar uma página com cálculo de viagens, onde o cliente irá digitar a origem e o destino, preciso retornar o valor total dos pedágios

20-02-2014 às 17:15 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Luiz Guilherme Palazzo

Entendi. Até dá para saber a quantidade de pedágios pelo Google Maps, mas os valores de cada um deles não... aí complica.

20-02-2014 às 17:30 Responder

José Carlos

Em resposta a Rodolfo Pereira

Boa tarde Rodolfo,
Você disse em um post, que é possivel saber q quantidade de pedagios que existem entre 2 pontos, como faço isso usando API do google?

30-06-2014 às 15:49 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a José Carlos

Não conheço nenhuma forma elegante de fazer isso, mas como a rota em texto traz avisos de pedágios, você pode pegar essa rota em texto e contar quantas vezes aparece o texto "Estrada com pedágio em alguns trechos".

22-07-2014 às 15:57 Responder

Kleiton Lucas

Muito bom o tutorial!
Estou desenvolvendo um aplicativo para comparar distâncias, você sabe como faço para usar apenas a distância da rota? Quero atribuir essa distância a uma variável.

06-02-2014 às 08:47 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Kleiton Lucas

Observe a variável "distanciaEmMetros":

directionsService.route(request, function(result, status) {
   if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
      var distanciaEmMetros = result.routes[0].legs[0].distance.value;
   }
});

20-02-2014 às 16:51 Responder

Kleiton Lucas

Em resposta a Rodolfo Pereira

Deu certo a aplicação! Muito obrigado pela ajuda e atenção.

20-02-2014 às 18:14 Responder

osmar

muito bom projeto, estou começando mexer nele
queria uma opinião sua, estou montando agendamento de visita
com rota em múltiplos pontos, preciso ter resultado depois das visitas do percurso ja percorrido exemplo 3 visita so conseguiu fazer 2

07-02-2014 às 09:47 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a osmar

Hm, não entendi. Tem como explicar melhor?

20-02-2014 às 16:46 Responder

carlos

onde esta as rotas? no exemplo só tem (A B) vc pode me ajudar a fazer as outras? sem ter um campo de input. e sim com variaveis!!!!1

15-02-2014 às 18:42 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a carlos

Leia a parte do "Criando rotas em múltiplos pontos" nesse post, está lá.

20-02-2014 às 16:30 Responder

Márcio Batista

Em resposta a Rodolfo Pereira

Olá Rodolfo, parabéns pelo seu excelente trabalho!

Tenho uma dúvida e ficarei muito grato caso você possa me ajuda. A dúvida é a seguinte:
Consigo fazer uma requisição de rota entre dois pontos para o Google, obter e decodificar a polyline recebida, bem como obter as coordenadas da polyline e traça a rota no mapa. O meu objetivo agora é montar uma consulta que apresenta essas rotas para um determinado usuário dependendo da proximidade dele com alguma das coordenadas dessas rotas (500 metro por exemplo). Ou seja o servidor mostra as opções de rotas próximas a ele independente da direção e sentido. Caso eu pegue as coordenado do usuário e faça uma consulta em todas as coordenadas de rotas armazenadas no banco de dados, com certeza vou obter um resultado, porém essa não é a forma mais otimizada de se realizar essa consulta caso eu tenha milhões de coordenadas de rotas.

Em fim a dúvida: como posso otimizar uma consulta para que o meu servidor com base nas coordenadas do usuário, faça uma pesquisa apenas em rotas que possam esta próxima dele ao invés de pesquisar as coordenadas de todas as rotas existentes no banco de dados?

19-03-2014 às 16:20 Responder

ROnaldo

é possível pegar as coordenadas latitude e longitude de todo o trajeto?

19-03-2014 às 11:03 Responder

Felipe Nagai

Parabéns pelo tutorial Rodolfo!

Eu tenho uma dúvida e talvez uma sugestão para o próximo tutorial.
Estou criando um aplicativo para o transporte publico, e estou com um problema:
Utilizando o Google Directions você pode receber mais de 1 possibilidade de rota, no caso seriam LEGS diferentes. Teria alguma maneira de visualizar essas rotas, dependendo da seleção do usuário? Eu consigo dar o display de apenas 1 das rotas...e provavelmente a API quem defini. Tem alguma maneira de mudar essa rota?

Obrigado pela atenção.

28-03-2014 às 17:31 Responder

Lennon

Olá amigo, vamos supor que eu tenha as coordenadas mas eu precise da cidade e do estado armazenados em variáveis, como posso fazer isso?
Parabéns pelo post.

01-04-2014 às 03:54 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Lennon

Cidade e do estado de onde?

09-04-2014 às 20:17 Responder

Lennon

Em resposta a Rodolfo Pereira

Olá, eu já resolvi, estava querendo saber o estado e cidade independente da coordenada para armazenar os endereços em um BD, eu peguei as coordenadas com o geolocation do html5 e passava um parametro para http://maps.googleapis.com/maps/api/geocode/json?latlng="Latitudeaqui","longitudeaqui"&sensor=true e recebia as informações de endereço em json(php). Obrigado pela atenção.

09-04-2014 às 20:30 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Lennon

Boa! :D

09-04-2014 às 20:38 Responder

Romário

Curti o tutorial ajudou bastante... \o

cara tenho uma situação e queria ver se tu podes me ajudar...

Tenho origem e destino em latitudes e longitude e também os pontos do qual passa essa origem e destino seria como você fez pra adicionar os pontos no trajeto do seu tutorial, o problema é que tenho um veículo com latitude e longitude retornada pelo WS de Rastreamento seria possível eu saber se meu veículo está fora de Rota?

01-04-2014 às 11:26 Responder

Junior

Rodolfo.. tem como eu editar a aparencia dos pontos e do infobox traçado nas rotas?

08-04-2014 às 17:36 Responder

Lennon Santos

Olá Rodolfo, parabéns pelo post. Criei uma aplicação utilizando a rota em vários pontos só que encontrei um problema, como eu pego os endereços de um bd não é possível organizar qual endereço é mais perto ou mais longe, as vezes o ponto B é do outro lado da cidade e o ponto C próximo ao ponto A, ai o mapa em vez de ir primeiro no ponto C e depois no ponto B, ele vai no ponto B que é do outro lado da cidade e volta para o C, queria saber se tem como criar um mapa mais inteligente que vai ordenando a rota através dos pontos mais próximos, qualquer ajuda já é bem vinda, obrigado.

08-04-2014 às 21:18 Responder

Lennon Santos

Em resposta a Lennon Santos

Olá, amigos, para quem interessar resolvi o meu problema, o google maps tem uma opção em que ele organiza a melhor rota automaticamente, olhem abaixo, a diferença esta em optimizeWaypoints: true.

var request = {
   origin: enderecoPartida,
   destination: enderecoChegada,
   waypoints: [{location: 'Rodoviária, Campinas'}, {location: 'Taquaral, Campinas'}],
   optimizeWaypoints: true,
   travelMode: google.maps.TravelMode.DRIVING
};

09-04-2014 às 16:51 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Lennon Santos

Opa, valeu pela dica :D

09-04-2014 às 19:57 Responder

Wison Roberto

Em resposta a Rodolfo Pereira

Rodolfo boa tarde, gosto muito do seu site, sou da cidade de Bauru, trabalho na prefeitura aqui da cidade e já consegui montar um sistema em access onde ele pega um monte de endereços e converter em lat e lng, para depois jogar no google maps, graças ao seu site, agora quero montar um outro com base nesses endereços que já contem as lat/lng e traçar uma rota inteligente. Vou ver se consigo explicar, aqui anotamos todas as coletas de galhos solicitadas onde é nos fornecido o endereço pelo munícipe, quando este endereço é cadastrado no sistema, ele pesquisa no google e captura a lat/lng, pois bem tenho um monte dessas lat/lng, queria saber se é possível montar uma rota inteligente de forma a economizar o tempo de percurso do caminhão para atender mais em menos tempo...

17-04-2014 às 08:17 Responder

Heitor

Em resposta a Rodolfo Pereira

Tenho que realizar varias visitas para uma empresa de distribuição. Preciso de rotear estas visitas mas que saiam em word para depois digitar em um GPS. Pode me ajudar ? Obrigado.

18-04-2014 às 18:25 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Heitor

Sim, envie os detalhes dessa aplicação para o e-mail contato@princiweb.com.br :)

30-04-2014 às 18:46 Responder

Marcelo

Em resposta a Lennon Santos

Boa noite Lennon, você pode me enviar o programa pronto com a rota inteligente?

Obrigado.

27-04-2014 às 22:42 Responder

Lennon

Em resposta a Marcelo

Marcelo eu não tenho um programa de "rota inteligente", oque eu fiz foi adaptar o google maps em meu projeto(php), e no meu projeto tem o mapa com as rotas ordenadas de forma inteligente, me apresente seu problema por email ( lennonsbueno@gmail.com ) e talvez posso ajuda-lo, abs.

28-04-2014 às 12:08 Responder

Diogo

Parabéns cara... vou precisar de algumas dicas ai combinamos a cerveja... abraço

30-04-2014 às 21:20 Responder

Mario Delfino

Fala aí Rodolfo!!
Faz tempo que voce postou esses projetos, mas estava procurando algo relacionado e acabei achando o seu projeto, muito legal, parabens!!
Gostaria de saber se é possível, fornecer como parametro uma lista de CEPs, e alem de obter suas respectivas coordenadas (lat / lng), essas seriam usadas para colocar todos seus respectivos marcadores no mapa do Google Maps.

06-05-2014 às 14:29 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Mario Delfino

Você quer criar rotas entre esses endereços (CEPs) ou quer apenas colocar os respectivos pontos no Google Maps?

23-05-2014 às 18:04 Responder

Mario Delfino

Em resposta a Rodolfo Pereira

Olá Rodolfo!!
Quero apenas colocar os respectivos pontos no Google Maps.

obrigado

27-05-2014 às 08:54 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Mario Delfino

Dá uma olhada aqui http://projetos.cajucomunicacao.com.br/cep/, eles fizeram isso :)

10-07-2014 às 15:53 Responder

caio

parabéns, ficou melhor que no google developers.
Obrigado.

07-05-2014 às 14:17 Responder

Gabriel

Saudações Rodolfo.Depois de procurar muito na internet achei essa explicação a melhor e mais completa. tenho uma dúvida. Gostaria de que ao entrar no link como chegar da minha página, automaticamente a rota do local onde está o usuário e a minha empresa fosse traçada. Eu especificaria a localização da minha empresa (fixa) e a posição atual do usuário seria de forma automática. Como poderia fazer isso, sem clicar em nenhum botão, somente entrando em um determinado link? Desde já agradeço.

08-05-2014 às 16:44 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Gabriel

Vamos lá:

1. Para pegar a localização atual do usuário de forma automática, utilize o código descrito no tópico "Utilizando a localização atual do usuário";

2. Para colocar o endereço da sua empresa, basta atribuir esse endereço para a variável "enderecoChegada" no JS;

3. Para que tudo isso funcione ao carregar a página, basta tirar o evento "$('form').submit".

23-05-2014 às 17:53 Responder

Gabriel

Em resposta a Rodolfo Pereira

Perfeito. Muito obrigado pela explicação.

24-05-2014 às 08:56 Responder

Gabriel Dias

Olá Rodolfo, estava a procura de um projeto similar ao seu pra fazer uma pagina de contato com o endereço da empresa.
Na verdade quase tudo do seu projeto me ajudou bastante, mas eu queria saber se da pra fazer que o ponto de destino já apareça na tela sem o usuário precisar executar nenhuma ação, e se o usuário quisesse saber como chegar nele é só preencher o ponto de partida.

Eu até consegui fazer isso, deixei somente o input de partida e passei o endereço dentro da variável destino, mas não sei fazer para que o ponto de destino já apareça, o mapa ele vem padrão sem nenhum ponto, minha duvida é essa como deixar o mapa vir com o destino marcado na tela...

12-05-2014 às 15:37 Responder

Gabriel Dias

Em resposta a Gabriel Dias

Como faço pra integrar o projeto Criando pontos personalizados a esse?

Queria que apresenta-se no mapa vários de uma rede de empresa, tentei seguir os exemplos dos tutoriais de (Criando um mapa personalizado) e (Criando rotas em múltiplos pontos)...

Já tentei de tudo mas sem sucesso os resultados são o mapa não aparece ou não surte efeito algum em criar as rotas...

20-05-2014 às 21:58 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Gabriel Dias

Mas o que especificamente você quer fazer?

23-05-2014 às 17:33 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Gabriel Dias

Acho que para você exibir o ponto quando carregar a página, você pode usar esse tutorial: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html

23-05-2014 às 17:46 Responder

Gabriel Dias

Em resposta a Rodolfo Pereira

Olá Rodolfo, muito obrigado por sua resposta, eu consegui fazer o que eu queria,
agora só tem outra coisa me pegando, eu deixei o mapa de um tamanho e quando o usuário quer saber como faz o trajeto pra chegar na loja o mapa é renderizado para outro tamanho, menor e mostra o resultado com o trajeto de texto ao lado.... até ai tudo bem...

O que me pega é que os pontos traçado no mapa não fica centralizado com o novo tamanho, como faço isso?

vaja como está http://producao.worldtoth.com.br/munitex/contato.php
aguardo resposta, vlws!!

24-05-2014 às 02:38 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Gabriel Dias

O "centralizado" que você diz, é que os dois pontos não ficam visíveis dentro do mapa, né? Se sim, veja o post abaixo, no item "Zoom automático para caber todos os pontos na tela":

http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html

25-06-2014 às 17:46 Responder

Thiago Mágero

Sempre salvando vidas hein cara! Parabéns!!!

26-05-2014 às 11:35 Responder

Guilherme Marques

Rodolfo, muito bom o post.

Você saberia como fazer um sisteminha para que usuários possam inserir pontos via input?

Semelhante ao feito aqui: http://www.ondefuiroubado.com.br/
É meio que um "post".

Preciso para um TCC.

Abraço!

26-05-2014 às 18:07 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Guilherme Marques

Este post http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-busca-de-endereco-e-autocomplete.html te servirá como ponto de partida.

Após isso, basta salvar os dados (em um banco de dados, por exemplo) e exibí-los no mapa: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html

10-07-2014 às 15:55 Responder

André Dias dos Santos

Boa tarde Rodolfo.

Ótimo tutorial, parabéns!

Só tenho uma pequena dúvida: Após adicionar rotas ao mapa como faço para removê-las? Ou seja, limpar o mapa.

27-05-2014 às 14:52 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a André Dias dos Santos

Para remover do mapa:

directionDisplay.setMap(null);

Para remover do "panel" que tem a lista de instruções:

directionDisplay.setPanel(null);

10-07-2014 às 15:50 Responder

Hugo Oliveira

Rodolfo, primeiramente, parabéns pelo ótimo POST.

Gostaria de tirar uma dúvida: Eu consigo utilizar múltiplos pontos utilizando rota aéreas junto com ônibus, carro, etc?

Exemplo: Saiu de uma cidade, chego em São Paulo utilizando carro, e de São Paulo pego voo até Lisboa? Mostrando esse trajeto no mapa?

10-06-2014 às 16:29 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Hugo Oliveira

Hm, creio que a API de rotas não tenha a opção de voos. Nesse caso, você mesmo teria que desenhar o trajeto do voo.

24-06-2014 às 11:42 Responder

Hugo Oliveira

Em resposta a Rodolfo Pereira

Opa, Muito obrigado pela atenção.

Vou tentar usar o DirectionsService com Polylines.
Acredito que deve funcionar.

24-06-2014 às 11:50 Responder

Diogo

Muito bom.
Tenho uma duvidda.
Quando marco a rota eo traçado entre ... tem como tirar a indicação C D E F G que o google marca?
e deixar só a de inicio e fim A e B

10-06-2014 às 21:19 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Diogo

Ué, aqui ele só marcou o ponto A e ponto B. Faça um teste na demo: http://www.princiweb.com.br/demos/google-maps-api-v3-criando-rotas/

24-06-2014 às 11:41 Responder

Fernando Antunes

Opa blz Rodolfo, acompanho seu script a algum tempo, e tive a necessidade de traçar os pontos, já fiz o exemplo anterior que marca os pontos no mapa com o marcador, e agora preciso colocar o tracado em todos os pontos que se encontra no mapa, alguma dica para aplicar no exemplo que já fez? vlwsss

11-06-2014 às 17:07 Responder

walter

opa eae mano, blz?
to tendo um erro q ta me deixando louco, ele buga o maps, ñ aparece nd, ai eu coloquei o firebug para que me falasse onde esta o erro, me da o resultado de reference error pd, porem tentei com duas keys diferentes, de usuarios diferentes, e ñ resolve, copiei seu codigo adicionando minha key e nd
vc sabe o q é?
comecei a ter esse problema qnd utilizei a função para transformar lat e lng passando um string como parametro

24-06-2014 às 14:29 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a walter

Tem como colocar o seu app online para eu ver?

24-06-2014 às 17:05 Responder

walter

Em resposta a Rodolfo Pereira

então, arrumei o problema, só q ñ entendi como ele funciona sem a key, tem algum problema em deixar sem? pela questão dos acessos, q se ñ me engano são 25000 por dia, obg.

24-06-2014 às 17:16 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a walter

Não tem problema não usar a key. Ela só serve para você monitorar seu app ou caso você queira comprar um limite maior de requisições.

24-06-2014 às 17:24 Responder

Cassia

Primeiramente parabéns pela tua inciativa os tutos são muito bons!!
E uma pergunta como posso fazer essa rota sugerida editável?
Tipo usuário vai no mapa,arrasta a rota sugerida e a extensão do itinerário é atualizada.

26-06-2014 às 16:10 Responder

Iury Salino

Boa tarde, primeiramente seus posts são muito bons! Eu gostaria de saber como posso estar puxando os ponto de latitude e longitude que estão salvos no meu banco de dados e exibir o ponto no mapa, eu estou com uma aplicação pra consulta de preços que é meu TCC e o ultimo objetivo específico é esse eu já tenho os pontos salvos no banco mais não consigo pucha e setar no mapa, eu queria tracar rota mais está muito em cima decidi só marcar o ponto, gostaria muito da sua ajuda, eu estou usando as seguintes tecnologias, Java, JPA, Primefaces, Primefaces Mobile, JSF, GlassFish, PostgreSQL. obrigado pela atenção!

26-06-2014 às 20:50 Responder

Marco Túlio

deu erro ai debuguei e esta e a mensagem: max_waypoints_exceeded

teria um limite para estes pontos?
estou usando 22 pontos ou seja unicial +20 + o ponto final

01-07-2014 às 14:43 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Marco Túlio

https://developers.google.com/maps/documentation/javascript/directions

"MAX_WAYPOINTS_EXCEEDED: indica que foram fornecidos muitos DirectionsWaypoint na DirectionsRequest. O número máximo de pontos de referência permitidos é oito, além da origem e do destino. Clientes da API do Google Maps para Empresas podem ter 23 pontos de referência além da origem e do destino. Rotas de transporte público não têm suporte para pontos de referência."

22-07-2014 às 16:02 Responder

Diego Bispo

Parabéns Jesus, Deus deve estar muito contente em você está ajudando seus irmãos! rsrsrsrssrsr..... Zueira a parte.... muito bom post.... mas queria saber se existe a possibilidade de ter as informações do pedagio? Já vi em alguns sites, mas não sei como eles fazem essas informações de valores dos pedagios.....

02-07-2014 às 12:33 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Diego Bispo

Talvez se você usar uma API diferente do Google Maps, onde é retornado os valores dos pedágios, aí creio que seja possível. Mas utilizando somente a API do Google Maps, creio que não seja possível fazer isso.

22-07-2014 às 16:03 Responder

Samuel Quiteque

ola Rodolfo, como ficar traçar rota com json

10-07-2014 às 11:21 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Samuel Quiteque

Utilize as Polylines: https://developers.google.com/maps/documentation/javascript/examples/polyline-simple?hl=pt-br

10-07-2014 às 16:22 Responder

Samuel Quiteque

Em resposta a Rodolfo Pereira

obrigado pela ajuda rodolfo, sera que é possivel polylines mostra descrição da rota?

14-07-2014 às 06:24 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Samuel Quiteque

A descrição em texto? De forma automática, não. Aí você mesmo tem que escrever isso.

16-07-2014 às 17:31 Responder

Samuel Quiteque

Ola rodolfo, Estou a fazer um projecto onde objectivo é cria uma rota A e B com descrição dos pontos A e B vindo do ficheiro pontos.json.
Gostaria que envias mapa.js e pontos.json resolvido.

15-07-2014 às 04:49 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Samuel Quiteque

Opa, manda um e-mail para contato@princiweb.com.br com o máximo de detalhes do que você precisa, aí a gente manda um orçamento :)

16-07-2014 às 17:28 Responder

Samuel Quiteque

Ola Rodolfo, é um trabalho de Escola, area onde estou mapear os pontos não estão no google maps, quando traço as rotas com coordenadas no teu mapa, quando clicando no ponto A ou B da uma descrição errada do ponto. Como faço para alterar esta descrição.

Utilizador Osvaldo Filhos comentou: a como alterar a informação que aparece no ponto B.
Rodolfo respondeu: Para remover os marcadores padrões da API, basta criar uma estrtutura rendererOptions com suppressMarkers: true e passá-la para o google.maps.DirectionsRenderer, ficando:

var rendererOptions = {
   suppressMarkers: true
}

directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

Após isso, vamos colocar nossos dois pontos personalizados, um no início da rota e outro no término:

directionsService.route(request, function(result, status) {
   if (status == google.maps.DirectionsStatus.OK) {

      var leg = result.routes[0].legs[0];

      var markerInicio = new google.maps.Marker({
         position: leg.start_location,
         map: map,
         icon: "http://www.seusite.com.br/marker.png"
      });

      var markerTermino = new google.maps.Marker({
         position: leg.end_location,
         map: map,
         icon: "http://www.seusite.com.br/marker.png"
      });

      directionsDisplay.setDirections(result);
   }
});

Estou ter dificuldade em mostrar esta ideia. Gostaria que Rodolfo mim envias mapa.js com esta ideia funcionando. Por favor Rodolfo.

17-07-2014 às 05:02 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Samuel Quiteque

Você tem algum link para que eu possa ver o que você fez até agora?

30-07-2014 às 15:52 Responder

Samuel Quiteque

Ola Rodolfo, como faço para altera as informações que aparece nos. pontos A e B?

19-07-2014 às 11:03 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Samuel Quiteque

Quais informações?

30-07-2014 às 16:09 Responder

julio

Rodolfo é possível traçar mais de uma rota nesta api do google ?!

19-07-2014 às 13:13 Responder

Thiago Dorneles

Olá! Muito bom o artigo.
Fiquei com uma dúvida que não consegui resolver aqui.

Vamos dizer que recebo um Json com 4 pontos e coloquei eles no mapa.
Depois disso ao clicar no botão "Rota" quero que o google maps faça a rota entre todos os pontos que estão no mapa (pontos A, B, C e D).
Como posso fazer isso?

Sem usar o waypoints, pois não tenho um valor fixo, nem sei quantos pontos no mapa terei.

Abraço

29-07-2014 às 14:44 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Thiago Dorneles

Sem usar o waypoints, só tem como traçar uma reta entre os pontos... o ruim é que essa reta vai passar por cima de casas, prédios, rios, etc, hehe, ou seja, ela não seguirá o fluxo das ruas, avenidas, etc.

Abs!

20-08-2014 às 18:18 Responder

RICAROSSI

Rodolfo. Muito útil este tutorial. Parabéns.
A minha aplicação está rodando, mas o cliente pediu para trocar de carro (driving) para transporte publico (transit). Fiz a alteração mas não funcionou. Devo estar esquecendo alguma mudança. Tem algum tutorial que funcione?
Outra dúvida é que não consigo dar um submit de outra página. Sempre tenho que dar desta mesma página e isto deixa minha solução estranha.
Agradeço a atenção.

29-07-2014 às 22:36 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a RICAROSSI

Hm, o "transit" não está disponível para todos os lugares, deve ser por isso que não funcionou.

Sobre o submit, você pode usar ajax ou passar os endereços de partida e de chegada pela querystring.

20-08-2014 às 18:20 Responder

Samuel Quiteque

Ola Rodolfo, como faço para altera as informações que aparece nos pontos A e B?
As informações que aparece ao clica no ponto: Unnamed Road. As rotas é traçado com coordenadas.

31-07-2014 às 01:01 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Samuel Quiteque

Tem algum exemplo live disto?

27-08-2014 às 11:24 Responder

Chiquito

Olá Rodolfo, ants de mais nada seu post é incrível cara..muito bom!
Contudo, tô com um problema nervoso...insiro diversos markes no mapa com diversos endereços diferentes...quando o usuário escreve o endereço dele no campo autocomplete eu preciso que ele pegue o endereço do usuário e compare com os endereços dos markers já inclusos no mapa e trace a rota com o marker mais próximo do endereço dele? Poderia me dar uma luz de como fazer essa comparação de distâncias entre diversos pontos?

31-07-2014 às 12:35 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Chiquito

Veja se o código abaixo te ajuda:

function calcularPontoMaisProximo(markersQueEstaoNoMapa, latitudeDoEnderecoDoUsuario, longitudeDoEnderecoDoUsuario) {
  function rad(x) {
    return x * Math.PI / 180;
  }

  var lat = latitudeDoEnderecoDoUsuario;
  var lng = longitudeDoEnderecoDoUsuario;
  var R = 6371; // radius of earth in km
  var distances = [];
  var closest = -1;

  for (i = 0; i < markersQueEstaoNoMapa.length; i++) {

      var mlat = markersQueEstaoNoMapa[i].position.lat();
      var mlng = markersQueEstaoNoMapa[i].position.lng();
      var dLat = rad(mlat - lat);
      var dLong = rad(mlng - lng);
      var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(rad(lat)) * Math.cos(rad(lat)) * Math.sin(dLong / 2) * Math.sin(dLong / 2);
      var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
      var d = R * c;
      distances[i] = d;

      if (closest == -1 || d < distances[closest]) {
          closest = i;
      }
      
  }

  if (closest != -1)
  {
    // aqui, o markersQueEstaoNoMapa[closest] será o marker mais próximo da lat e long do endereço do usuário
  }

}

27-08-2014 às 11:26 Responder

Bruno Torres

Ótimo post Rodolfo,

Está me ajudando bastante, porém, ainda não consegui achar nada relacionado à Pedágios, e você menciona que é possível realizar essa chamada. Tem algum exemplo ou ajuda que acha interessante eu olhar?

03-08-2014 às 22:45 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Bruno Torres

Fala Bruno,

Mas o que exatamente você quer com os pedágios? Criar uma rota sem pedágios? Calcular o número de pedágios em uma rota? Calcular o valor dos pedágios de uma rota?

Abs!

15-10-2014 às 10:17 Responder

Bruno

Em resposta a Rodolfo Pereira

Rodolfo,

É a ultima opção, quero calcular o valor do pedagio de uma rota.

É possivel?

Agradeço desde já.
Obrigado

15-10-2014 às 10:29 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Bruno

Usando só a API do Google Maps, não é possível. Para isso você teria que ter um outro serviço que fornecesse os valores dos pedágios.

15-10-2014 às 10:33 Responder

Evaldo

Rodolfo, muito bom o seu script, parabéns pela iniciativa de postar e comentar seus scripts.
Aproveitando a oportunidade, estava analisando seu script para tentar adaptar a uma necessidade que tenho de calcular a rota, mostrar a kilometragem e o tempo gasto, exatamente o que voce disponibilizou.
Porem não estou conseguindo utiliza-lo apresenta alguns erros.
Você poderia me dar um suporte ?
Aguardo um retorno via e-mail contato@cdmix.com.br
Grande abraço e muito obrigado pela atenção

11-08-2014 às 08:24 Responder

Evaldo

Em resposta a Evaldo

Tenho uma dúvida, ref. ao sistema "Google Maps API v3: Criando rotas entre múltiplos pontos".

Vi que você respondeu a um post ref. a duvida de atribuir a uma variável a distancia entre os dois pontos da rota traçada.

-----

directionsService.route(request, function(result, status) {

   if (status == google.maps.DirectionsStatus.OK) {

      directionsDisplay.setDirections(result);

      var distanciaEmMetros = result.routes[0].legs[0].distance.value;

   }

});

------

?Minha dúvida é: Como faço para salvar esta variável em uma espécie de "session" para utiliza-la em outro local de um sistema que estou desenvolvendo em asp?

Agradeço pela sua colaboração

11-08-2014 às 10:16 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Evaldo

Fala Evaldo,

Vejo três opções:

1. Salvar isso em Cookie através do JS;

2. Fazer um post disto para uma URL a qual irá salvar o valor em Session no ASP;

3. Colocar o valor em um campo escondido e passar este valor por POST ou GET para a outra página.

Abs!

15-10-2014 às 10:35 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Evaldo

Fala Evaldo,

Manda o link do seu app por aqui mesmo, que eu dou uma olhada.

Abs!

15-10-2014 às 10:33 Responder

Thiago

Bom dia, muito interessante este post, gostaria de saber como seria possível deixar o usuário alterar a rota arrastando, muito obrigado.

11-08-2014 às 10:25 Responder

Allan Gaspar

Olá Rodolfo,

Sou iniciante no mundo Web e seu post é excepcional, gostaria de saber se há como mostrar no mapa multiplas rotas? tipo rotas 1 com multiplos pontos, rota 2 com multiplos pontos e etc.?

Grato Desde já.
Allan Gaspar

14-08-2014 às 15:19 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Allan Gaspar

Fala Allan,

Nunca fiz isso, mas procurando um pouco, achei isto: http://clokey2k.com/demos/multiple-routes-on-google-maps/

Espero que ajude.

Abs!

15-10-2014 às 10:50 Responder

Allan Gaspar

Em resposta a Rodolfo Pereira

E aí Rodolfo (Salvador) hehehe,

cara conseguir implementar este exemplo que você citou, se alguém precisar posso disponibilizar, só to com uma ultima questãozinha que é a seguinte,
para criar o mapa multiplas rotas eu envio via Session um objeto json do tipo:
[
{

"Pontos1": [
"(-3,756763, -38,6031563)",
"(-3,7430325, -38,5911439)",
"(-3,7358897, -38,59147)",
"(-3,7332411, -38,5868147)",
"(-3,7267301, -38,5869722)",
"(-3,7239056, -38,6031895)",
"(-3,7099665, -38,6057798)",
"(-3,6990948, -38,5874294)",
"(-3,7183943, -38,5433948)"
],

"Pontos2": [
"(-3,756763, -38,6031563)",
"(-3,7430325, -38,5911439)",
"(-3,7358897, -38,59147)",
"(-3,7332411, -38,5868147)",
"(-3,7267301, -38,5869722)",
"(-3,7239056, -38,6031895)",
"(-3,7099665, -38,6057798)",
"(-3,6990948, -38,5874294)",
"(-3,7183943, -38,5433948)"
]
}
]
até aí beleza mostro o mapa, as rotas, os pontos, meu problema vem por quer preciso mostra no infobox informações desse pontos na verdade uma informação que é o código do cliente, aí meu pegou direitinho pois não sei como irei mandar esta informação no json de forma que eu possar identificar por exemplo que o código 0001 pertence ao ponto "(-3,756763, -38,6031563)", da rota 1 por exemplo, me fiz entender ???
cara muito obrigado pela ajuda meu sistema de roteirização está quase pronto se eu conseguir desenrolar esta questão posso enviar o projeto para criação de um post de múltiplas Rotas que é bem interessante.

20-11-2014 às 12:08 Responder

Fabio Herval

Muito bom o post Rodolfo, parabéns!
Gostaria de saber se é possível você me enviar um script com um funcionamento um pouco diferente: Ele recebe a localização do usuário e um endereço final e mostra o mapa sem os inputs, de forma automática. Obrigado pela atenção.

15-08-2014 às 20:01 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Fabio Herval

Fala Fabio,

Eu te enviar o script pronto não vai rolar... tente fazê-lo, e caso tenha alguma dificuldade, eu te ajudo! :D

Abs!

15-10-2014 às 11:04 Responder

Allan Gaspar

Olá Rodolfo,

Mais uma vez parabenizando pelo belo post, e tentando tirar mais uma dúvida,

no waypoints posso informar ao invés de endereço a georeferência (lat e lon)?
tentei fazer mas não consegui.

Atenciosamente.
Allan Gaspar

19-08-2014 às 17:48 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Allan Gaspar

Fala Allan!

Pode sim:

var request = {
   origin: enderecoPartida,
   destination: enderecoChegada,
   waypoints: [{location: new google.maps.LatLng(-23.5505199,-46.63330939999997)}],
   travelMode: google.maps.TravelMode.DRIVING
};

Abs!

15-10-2014 às 11:09 Responder

Mateus Granero

Primeiramente queria parabenizar pelo post que me ajudou muito

mas lá vai a minha dúvida...

Estou traçando uma rota otimizada entre vários pontos, porém gostaria de editar os marcadores para que assim que clicados e também na descrição da rota seja exibido por exemplo o nome da pessoa correspondente ao endereço.

20-08-2014 às 09:38 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Mateus Granero

Fala Mateus,

Entendi o que você quer... mas eu precisaria de um bom tempo para fazer isso =/

Desculpe-me por não poder ajudá-lo.

Abs!

15-10-2014 às 11:15 Responder

Adenilton

Gostaria de criar uma página, onde a gente colocasse o nome de duas cidades para saber a distância entre as mesmas. Aí em determinado campo mostrasse a distância em Km. Gostaria de ver um exemplo completo de um código.
Grato

22-08-2014 às 21:14 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Adenilton

Fala Adenilton,

A partir deste comentário www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-rotas-entre-multiplos-pontos.html#comentario-799 você irá conseguir fazer o que deseja.

Abs!

15-10-2014 às 11:18 Responder

Evaldo

Existe uma forma de guardar o valor de km e tempo do - Google Maps API v3: Criando rotas entre múltiplos pontos - em uma variável tipo session para utiliza-la em outro formulário construído em asp ?

05-09-2014 às 14:53 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Evaldo

Passando por querystring?

08-10-2014 às 12:26 Responder

Frederico Soares

Cara, muito show!
Eu que não sou programador mas tenho noções de asp consegui fazer! Legal demais. Gostaria de saber se existe como eu retirar os traçados do trajeto e deixar somente as marcações. Ah, preciso também deixar marcado mais de 1 ponto. Você pode me ajudar?

05-09-2014 às 17:06 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Frederico Soares

Fala Frederico,

Se você não quer que exiba as linhas do trajeto, apenas coloque os pontos no mapa, sem usar o serviço de rotas do Google. Para isso, leia aqui: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html

Abs!

08-10-2014 às 12:04 Responder

Jefferson Henrique

Boa Noite Rodolfo Pereira, eu acompanho o seu blog a muito tempo e sempre utilizo muito dos seus códigos, desde já obrigado, desta vez eu estou fazendo uma página para a empresa em que trabalho, e estou usando parte desse seu codigo de fazer a rota e parte de um outro que falava sobre busca de endereço e autocomplete. A questão é a seguinte eu gostaria de colocar o autocomplete no meu codigo que esta neste link já testado.
Os arquivos são em php e estão neste endereço:

https://drive.google.com/file/d/0BwkUSrv4yeadSnBIWi05NGRwSFE/edit?usp=sharing
Se você puder me ajudar ficarei muito agradecido.
Abraço e até a próxima, aguardo resposta.

11-09-2014 às 17:41 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Jefferson Henrique

Fala Jefferson,

Qual foi a dificuldade que você teve na hora de adicionar o Autocomplete?

Abs!

08-10-2014 às 11:53 Responder

João

belo trabalho Rodolfo

12-09-2014 às 09:10 Responder

mauricio

olá gostaria de saber se vc faz ou desenvolve um sistema de roterizaçao,com valor de pedagio e uma pequena planilha de custo de viagem e tbem um sistema de entrega multiplos pontos.

17-09-2014 às 17:43 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a mauricio

Fala Mauricio,

Envie um e-mail para contato@princiweb.com.br que a gente conversa melhor por lá.

Abs!

08-10-2014 às 11:30 Responder

jamir junior

Primeiramente, obrigado por compartilhar seu conhecimento!
Minha dúvida é a seguinte, quero traçar uma rota entre A e Z, como vai passar por várias cidades queria ver a distancia entre cada uma. Para complicar um pouco, queria parametrizar: se a cidade tivesse mais de 100 mi habitantes mostrar ou 500 mi, etc. Outra coisa que vi no site do http://www.maplink.com.br/ lá mostra os postos de combustiveis e os radares. Muito obrigado!

29-09-2014 às 15:24 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a jamir junior

Fala Jamir,

No caso do MapLink, creio que eles tenham essas informações cadastradas em seu sistema.

Sobre o cálculo de distância, nunca fiz isso, mas deixo aqui um link que acho que pode te ajudar: https://developers.google.com/maps/documentation/distancematrix/

Abs!

08-10-2014 às 10:38 Responder

Edson Martins

Rodolfo,

Primeiramente, Parabéns pelo post!!!

Gostaria de saber qual a solução para ter vários pontos (waypoints), na documentação diz que a API free há um limite de 8 pontos por requisição, como você faria para pegar mais que 8 pontos?

Obrigado. Abraço,
Edson Martins

09-10-2014 às 11:48 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Edson Martins

Fala Edson,

A solução é pagar o Google, hehe.

Dá uma olhada aqui: https://developers.google.com/maps/licensing

Abs!

15-10-2014 às 10:11 Responder

Edson Martins

Em resposta a Rodolfo Pereira

Fala Rodolfo,

Na versão paga, o limite ainda é muito baixo, apenas 23 waypoints.

Vamos supor que você queira pegar 50 destinos, apontar no mapa 50 lojas e mostrar a rota entre elas.

Como você adicionaria 50 pontos?

Obrigado,
Edson

20-10-2014 às 21:31 Responder

Cristiano

Em resposta a Edson Martins

Também tenho esta mesma dúvida, se for for waypoints ? como resolver?

27-10-2014 às 15:26 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Cristiano

Cristiano, veja a minha resposta para o Edson. Abs!

29-10-2014 às 14:28 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Edson Martins

Fala Edson,

Cara, um único mapa, utilizando a API de rotas, não vai rolar.

O que você pode fazer, é usar Polylines e simular a rota (mas aí você vai ter que desenhar na mão).

Abs!

29-10-2014 às 11:41 Responder

Fábio Sousa

Muito boa a iniciativa, Estou com uma grande duvida de como obter com o Google Maps API v3:- encontrando o endereço mais próximo, exemplo eu tenho dez ponto como saber o que esta mais próximo da minha localização.

28-10-2014 às 11:01 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Fábio Sousa

Fala Fábio!

Dê uma olhada aqui e veja se te ajuda: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-rotas-entre-multiplos-pontos.html#comentario-1417

Abs!

29-10-2014 às 16:08 Responder

Eudeslene Cristina

Em resposta a Rodolfo Pereira

Rodolfo,

Você tem algum exemplo com vários trajetos de um ponto a outro?

10-11-2014 às 20:53 Responder

Lennon Santos

Para ajudar a galera desenvolvi o Mymap, assim fica muito mais fácil desenvolver um mapa de um ou mais endereços.
http://www.lennonsantos.com.br/mymap/

30-10-2014 às 23:33 Responder

Newton

Boa tarde Rodolfo, estou tentando desenvolver um código para que faça uma rota e identifique se essa rota possui pedágios e caso possua eu tenho valores no banco de dados pra criar os markers com os valores do banco. Existe alguma forma de identificar de forma simples se há pedágio na rota e identificá-lo pra que eu possa comparar se é o que tem cadastrado no banco ? Parabéns pelo post, usei muito... Abs

04-11-2014 às 12:02 Responder

Guilherme

Boa Noite, parabéns pelo post, muito bom.

Cara estou em um projeto, e precisava construir uma aplicação no raspberry pi, e através dessa aplicação mandar via sms um link com a localização do aparelho. Sabe como pode ser feito isso ?

04-11-2014 às 22:32 Responder

Isaias Cruz

Parabéns !
Muito útil, aproveitei muito seus códigos.
Obrigado por compartilhar seus conhecimentos, é com pessoas como vc que o mundo está precisando, cada um de nós fazendo nossa parte, estaremos construindo para um mundo melhor.

Abraço
Isaias

05-11-2014 às 16:40 Responder

Fábio

Caro, estou usando em minha aplicação em asp.net com Web Forms e o mapa não renderiza. eu fiz exatamente igual está no seu exemplo. O que posso está fazendo de errado?

10-11-2014 às 19:13 Responder

rogerio

Oi Rodolfo, gostaria que me desse uma dica, visito na zona sul dep material construção p vendas de impermeabilizantes, por exemplo vou no bairro morumbi , puxo uma relação com 20 depósitos, como fazer p melhor roteiro entre esses 20 pontos? abraço. vlw.

07-12-2014 às 07:37 Responder

Ulisses

Em resposta a rogerio

Olá Rogério, tenho um software muito eficaz que resolveria o teu problema para encontrar o menor trajeto tranquilamente. Se quiser ajuda envie um email para ulissessd@hotmail.com

05-01-2015 às 18:52 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a rogerio

Fala Rogerio!

Para fazer um roteiro com 20 pontos, você teria que utilizar a solução paga da API do Google Maps. A solução gratuita, é limitado em 8 endereços por rota, mais a origem e destino.

Abs!

07-01-2015 às 12:21 Responder

Lucas

Parabéns por esse tutorial, está sendo muito util para mim.
Estou tentando fazer essa rota com o caminho em linha reta. Eu pesquisei e descobri que posso fazer isso usando polyline, porem não estou conseguindo buscar os endereços de origem e o destino digitados pelo usuário dessa forma. Você poderia mostrar um exemplo de como eu poderia fazer isso?

18-12-2014 às 11:00 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Lucas

Deixa eu ver se entendi: Você quer disponibilizar para o usuário dois campos, um de endereço origem, e um de endereço destino. Ao preencher os dois, quer mostrá-los no mapa, com uma linha reta entre esses dois endereços. É isso?

07-01-2015 às 11:45 Responder

Lucas

Em resposta a Rodolfo Pereira

Era isso, consegui fazer. Agora estou tentando calcular a distancia entre dois pontos em uma mesma hidrovia. Você tem alguma ideia de como eu poderia fazer isso?

09-01-2015 às 12:46 Responder

Marcelo Escobar

Em resposta a Lucas

Senhores,
Estou precisando traçar linha reta entre dois pontos. É através do polyline mesmo? No meu mapa eu tenho vários pontos e queria traçar várias linhas retas entre eles.
Obrigado!!

03-02-2016 às 08:30 Responder

Augusto

Priemiramente Parabens pelo post Rodolfo, gostaria de te encomodar um pouco rsrs, essa apiV3 do google ela é fre tem um limite de requizição ?

22-12-2014 às 21:56 Responder

Augusto

Desculpa o incomodo e parabéns pelo post gostaria de saber se tem como colocar em uma div do lado das informações de rotas, informações mais precisas como km total do ponto de saída ao ponto de chegada mesmo passando por vários pontos trazer essas informação.

23-12-2014 às 12:06 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Augusto

Se você quiser a distância entre em dois pontos, dá uma olhada aqui:

http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-rotas-entre-multiplos-pontos.html#comentario-799

Aí basta converter e pronto!

07-01-2015 às 11:38 Responder

claudia severian

Boa noite, sou transportadora escolar e preciso montar uma rota com 25 endereços... seu programa consegue traçar o melhor caminho?
por favor aguardo a resposta mesmo que seja negativa.

grta

06-01-2015 às 22:55 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a claudia severian

Oi Cladia, bom dia! :)

Devido ao limite da API de endereços por rotas, infelizmente não é possível.

Abs!

07-01-2015 às 11:26 Responder

Luis Silva

Parabéns Cara muito boas suas explicações em geral. Vejamos se pode me dar uma luz. Esta questão de limite de waypoints esta clara. Vi em algumas resposta você informando que no caso de muitos pontos um jeito era fazer com polylines porem teria que ser feito a mão. Vamos a minha dúvida, com uma relação de vários pontos próximos estou traçando varias polylines para desenhar um trajeto, porem qualquer curva ou retorno ou pelo próprio formato tortuoso das pistas faz com que o traço saia das pistas oque deixa o desenho da rota um tanto quanto desagradável. Existe alguma função para aproximar os pontos e as linhas traçadas as pistas mais próximas ou realmente apenas com esta função de rotas?

abs.

07-01-2015 às 16:05 Responder

Arnaldo Lustoa

É um belo trabalho que vc faz, parabéns. estou tentando sair da idade da pedra, gostaria de saber se tem como conseguirmos um mapa ex.: Brasília a João Pessoa,PB constando o nome das cidades no percurso.
Obrigado, e parabéns pelo belo serviço que você presta a comunidade.

13-01-2015 às 11:08 Responder

Rodrigo Cunha

Olá Rodolfo!
Gostaria de saber como fazer para que a disposição dos locais fique da forma que seja a menor distância percorrida. Entende?

15-01-2015 às 21:36 Responder

Rafael Mello

Rodolfo, beleza?

Duas dúvidas:

- Tem como colocar pontos de exclusão, ou seja, fazer com que a rota NÃO passe por determinados pontos?

- O tempo estimado da rota leva em consideração o trânsito atual? tem como fazer isso?

Obrigado!

Abraços

21-01-2015 às 17:24 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rafael Mello

Fala Rafael, beleza e aí?

Respondendo:

- Não é possível =/

- Pelo que eu li, ele não utiliza informações de trânsito para calcular a rota.

Abs!

09-02-2015 às 16:03 Responder

DYEGO

Como eu poderia traçar uma rota ótima? Por exemplo, durante a minha rota eu vários pontos de parada, mas, qual seria o melhor caminho a seguir, buscando sempre o processo otimizado... Você poderia me ajudar?

desde já, muito obrigado!

23-01-2015 às 20:56 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a DYEGO

Fala Dyego!

Dê uma olhada aqui https://developers.google.com/maps/documentation/javascript/directions#DirectionsRequests, especificamente no campo "optimizeWaypoints".

Abs!

09-02-2015 às 15:50 Responder

Fernando Gomes

Em resposta a Rodolfo Pereira

Rodolfo, excelente post.
Preciso de uma ajuda.Estou utilizando essas informações para criar um roteirizador, mas precisaria de algo que colocasse apenas o ponto de partida e ele já trouxesse a distancia entre todas as demais cidades (podendo ser a nível Brasil ou apenas do Estado), é possível?
Muito obrigado,

11-02-2015 às 08:50 Responder

Rafaela

Boa tarde tudo bem?Gostaria de saber se há alguma maneira de calcular a distância de uma cidade específica a todas as cidades brasileiras.

Att

Rafaela

11-02-2015 às 15:34 Responder

Rafael

Parabéns Rodolfo Pereira, tu é bom d+

16-02-2015 às 00:01 Responder

eddy

fala rodolpho,
cara parabéns pelo artigo, realmente fantástico, muito bem explicado e perfeito. Muito excelente trabalho.

21-02-2015 às 17:04 Responder

Ricardo Cassolatto

Cara, você explica melhor que o Google, hahahaha ! Parabéns !

Eu produzi o dobro com o seu tutorial do que lendo os docs do google !

Muito Obrigado.

24-02-2015 às 00:45 Responder

Ricardo Cassolatto

É Possivel colocar markers em cada ponto ?

É possível eu colocar um botão no marker que acione uma função ?

Muito Obrigado adiantado !

24-02-2015 às 00:49 Responder

Jefferson Cristiano

Duvidam sabe se é possível eu passar uma lista de N endereços saindo de A a Z e o google me retornar a menor rota passando pelos N endereços até Z

24-02-2015 às 12:12 Responder

André Marsola

Olá Rodolfo,
gostei muito de seus posts. São muito bem explicados...
Tenho uma pergunta.. é possível personalizar os Marcadores também quando uso o Google maps para traçar uma rota?. Por exemplo, Eu gostaria de Colocar um marcador personalizado no Ponto de Origem, de Destino, e um outro diferente num Ponto de Passagem (waypoint).

10-03-2015 às 17:20 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a André Marsola

Fala André!

Dá uma olhada neste comentário: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-rotas-entre-multiplos-pontos.html#comentario-724

Veja que o que eu faço, é retirar todos os pontos do trajeto (com o "suppressMarkers"),  e após isso, pego a posição do ínicio do trajeto (leg.start_location) e do final (leg.end_location), e coloco marcadores neles.

Sobre os pontos intermediários (waypoints), lendo aqui https://developers.google.com/maps/documentation/javascript/directions?hl=pt-br#DirectionsRequests, vi que se você passar o "stopover" igual a "true" em cada waypoint, ele dividirá o trajeto em vários trajetos (de acordo com o número de waypoints que você colocar) e com isso talvez você consiga pegar o "start" e "end" de cada um deles e criar marcadores para todos os pontos, como mostra aqui https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints?hl=pt-br lá no "// For each route, display summary information.".

Porém, nunca dividi o trajeto em vários trajetos, então não sei te dizer se isso tem algum efeito colateral no cálculo das rotas.

Abs!

06-04-2015 às 16:16 Responder

Noedir

Olá. Tem como trocar a cor da rota?

13-03-2015 às 17:30 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Noedir

Fala Noedir!

Pelo que vi aqui, você pode fazer isso através do "polylineOptions" do "DirectionsRenderer", ficando algo assim:

directionsDisplay = new google.maps.DirectionsRenderer({
  polylineOptions: {
    strokeColor: '#007000'
  }
});

https://developers.google.com/maps/documentation/javascript/reference?csw=1#DirectionsRendererOptions

https://developers.google.com/maps/documentation/javascript/reference?csw=1#PolylineOptions

Abs!

06-04-2015 às 16:02 Responder

Noedir

Em resposta a Rodolfo Pereira

Muito obrigado. Você é um gênio.

06-04-2015 às 16:29 Responder

Vitor Hugo

Cara, estou começando nessa area de programação e tals(estou terminando o curso técnico) então não manjo nada, mas sua explicação foi boa até de mais, cara parabéns!! muito obrigado por facilitar a vida hehe....

15-03-2015 às 19:01 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Vitor Hugo

Opa! :D

06-04-2015 às 16:01 Responder

fernando

seria possível fazer a leitura de um banco de dados e traçar uma rota com diversos pontos?

28-03-2015 às 12:11 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a fernando

Sim, porém depende de quantos pontos são e de como esses "pontos" estão armazenados no BD.

06-04-2015 às 14:17 Responder

Robson de Camargo Petrecca

Eu trabalho com entregas como posso usar para fazer rota de uma cidade para outra

29-03-2015 às 23:56 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Robson de Camargo Petrecca

Para isso você pode usar o próprio Google Maps, utilizando a opção de rotas. Abs!

06-04-2015 às 14:13 Responder

Diogo

Muito bom Diego, mas tenho uma dúvida.
Consigo traçar uma rota com multiplos pontos como no seu exemplo, mas ao invés de usar o ponto pelo nome (Ex.: waypoints: [{location: 'Rodoviária, Campinas'}, {location: 'Taquaral, Campinas'}]) usar por latitude e longitude?

08-04-2015 às 15:42 Responder

ALDRY LESTER

Olá Rodolfo, Temos uma pequena distribuidora, preciso fazer rotas de entrega e de vendas, não tenho conhecimento de programação, voce se interessaria em nos ajudar em troca de remuneração? Se interessar entre em contato via e-mail para conversar.

Grato

11-04-2015 às 12:23 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a ALDRY LESTER

Fala Aldry!

Para orçamentos, entre em contato conosco através do e-mail contato@princiweb.com.br e nos passe detalhadamente a sua necessidade.

Valeu, abs!

29-04-2015 às 10:19 Responder

Rafael

Olá parabéns pelos projetos! Preciso de um código que colocando multiplos destinos ele analise qual a melhor rota. Ou seja dou 5 pontos e quero que me organize a menor rota. Vc sabe algo que faça isso ou pode desenvolver? Aguardo seu email!
Valeu!

16-04-2015 às 11:57 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rafael

Fala Rafael,

Então, na documentação (https://developers.google.com/maps/documentation/javascript/directions?hl=pt-br#Waypoints) tem uma opção que você passa no "request" para ter essa rota otimizada. Aí ficaria assim:

var request = {
   origin: enderecoPartida,
   destination: enderecoChegada,
   travelMode: google.maps.TravelMode.DRIVING,
   optimizeWaypoints: true
};

Abs!

29-04-2015 às 10:00 Responder

R.w

Muito interessante este assunto!

Como posso utilizar para busca de onibus em uma determinada região?

Abs

18-04-2015 às 11:45 Responder

R.w

Sensacional!

Estou tentando fazer uma listagem de ônibus de uma cidade.
Com alguns detalhes tais como: horários, onde está no momento...

Alguma ideia?

Obrigado por compartilhar conhecimentos.

18-04-2015 às 20:15 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a R.w

Sim! Você teria que desenvolver tudo isso, hehe.

Fiz algo parecido com os dados de ônibus de Campinas: desenvolvi um script que pega todos os dados de ônibus (horário, itinerário, etc.) e armazena isso de forma normalizada em um banco de dados. A partir disso, só foi exibir esses dados em uma página.

Agora, da parte de exibir onde o ônibus está, só se ele tiver algum dispositivo o qual transmite essa informação... pelo que eu saiba, os ônibus de São Paulo tem isso, mas por exemplo, os de Campinas não tem, aí nem dá para fazer.

Abs!

29-04-2015 às 09:55 Responder

R.w

Em resposta a Rodolfo Pereira

Entendi.

Bom, vou mexer com isso e ver o que acontece.

Valeu.

Abs.

29-04-2015 às 18:31 Responder

Thales

Rodolfo,

Boa noite!
Resolvi me aventurar a criar um App (Aplicativo Mobile) para celular utilizando estes mesmos códigos para programar um localizador GPS para com múltiplos pontos.
Porém, só funcionam os formulários.
Gostaria de saber existe alguma restrição para App's ou se sou eu que estou fazendo algo errado mesmo?
Ex.: Sua aula é bem prática e constrói as estruturas em partes, creio que eu esteja alocando as etapas nas linhas erradas.
1ª) Você passa a seguinte estrutura:
var request = {
origin: enderecoPartida,
destination: enderecoChegada,
waypoints: [{location: 'Rodoviária, Campinas'}, {location: 'Taquaral, Campinas'}],
travelMode: google.maps.TravelMode.DRIVING
};
2ª) Depois esta estrutura:
if (navigator.geolocation) { // Se o navegador do usuário tem suporte ao Geolocation
navigator.geolocation.getCurrentPosition(function (position) {

pontoPadrao = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); // Com a latitude e longitude que retornam do Geolocation, criamos um LatLng
map.setCenter(pontoPadrao);

var geocoder = new google.maps.Geocoder();

geocoder.geocode({ // Usando nosso velho amigo geocoder, passamos a latitude e longitude do geolocation, para pegarmos o endereço em formato de string
"location": new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
$("#txtEnderecoPartida").val(results[0].formatted_address);
}
});
});
}
Mas em que linha deverei alocar a segunda para juntá-las?

Desde já agradeço sua atenção.

Att,
Thales Carmo

05-05-2015 às 21:05 Responder

Souza

Olá, tutorial muito bom!

Há como tirar uma dúvida? Preciso fixar o ponto B, ou seja, o usuário irá digitar apenas seu local de partida(ponto A), e automaticamente receber a rota do ponto B preestabelecida por mim. No caso o que deveria ser feito de adicional para implementar isso?

Grato!

08-05-2015 às 09:11 Responder

Robson

olá, Gostaria de usar o maps para uma aplicação com destinos apenas de minhas coordenadas salvas e estas coordenadas são de fazendas na zona rural, tem como traçar rotas?

16-05-2015 às 17:53 Responder

Tadeu

Show parceiro tava com muitas duvidas . vc realmente .. preparou ótimo tutorial , aproveitando.. tens como pegar apenas a distancia em quilometro?

17-05-2015 às 21:05 Responder

Aires Amaral

Ol&#225;,<br /><br />Obrigado por compartilhar seu conhecimento e gostaria de pedir uma ajuda. Coloquei mais duas caixas de texto no html, porem o mapa n&#227;o aparece. Segue abaixo.<br /><br />&lt;!DOCTYPE html&gt;<br />&lt;html lang=&quot;pt-br&quot;&gt;<br /> &lt;head&gt;<br /> &lt;meta charset=&quot;utf-8&quot; /&gt;<br /> &lt;title&gt;Google Maps API v3: Criando rotas&lt;/title&gt;<br /> &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/estilo.css&quot;&gt;<br /> &lt;/head&gt;<br /> <br /> &lt;body&gt;<br /> &lt;div id=&quot;site&quot;&gt;<br /> <br /> &lt;h1&gt;Google Maps API v3: Criando rotas&lt;/h1&gt;<br /> <br /> &lt;form method=&quot;post&quot; action=&quot;index.html&quot;&gt;<br /> &lt;fieldset&gt;<br /> &lt;legend&gt;Criar rotas&lt;/legend&gt;<br /> <br /> &lt;div&gt;<br /> &lt;label for=&quot;txtEnderecoPartida&quot;&gt;Endere&#231;o de partida:&lt;/label&gt;<br /> &lt;input type=&quot;text&quot; id=&quot;txtEnderecoPartida&quot; name=&quot;txtEnderecoPartida&quot; /&gt;<br /> &lt;/div&gt;<br /> &lt;div&gt;<br /> &lt;label for=&quot;txtEnderecoChegada&quot;&gt;Endere&#231;o de chegada:&lt;/label&gt;<br /> &lt;input type=&quot;text&quot; id=&quot;txtEnderecoChegada&quot; name=&quot;txtEnderecoChegada&quot; /&gt;<br /> &lt;/div&gt;<br /><br /> &lt;div&gt;<br /> &lt;label for=&quot;txtEnderecoChegada1&quot;&gt;Endere&#231;o de chegada1:&lt;/label&gt;<br /> &lt;input type=&quot;text&quot; id=&quot;txtEnderecoChegada1&quot; name=&quot;txtEnderecoChegada1&quot; /&gt;<br /> &lt;/div&gt;<br /><br /> &lt;div&gt;<br /> &lt;label for=&quot;txtEnderecoChegada2&quot;&gt;Endere&#231;o de chegada2:&lt;/label&gt;<br /> &lt;input type=&quot;text&quot; id=&quot;txtEnderecoChegada2&quot; name=&quot;txtEnderecoChegada2&quot; /&gt;<br /> &lt;/div&gt;<br /> &lt;div&gt;<br /> &lt;input type=&quot;submit&quot; id=&quot;btnEnviar&quot; name=&quot;btnEnviar&quot; value=&quot;Enviar&quot; /&gt;<br /> &lt;/div&gt;<br /> &lt;/fieldset&gt;<br /> &lt;/form&gt;<br /><br /> &lt;div id=&quot;mapa&quot;&gt;&lt;/div&gt;<br /> <br /> &lt;div id=&quot;trajeto-texto&quot;&gt;&lt;/div&gt;<br /> <br /> &lt;/div&gt;<br /> <br /> &lt;script src=&quot;js/jquery.min.js&quot;&gt;&lt;/script&gt;<br /> <br /> &lt;!-- Maps API Javascript --&gt;<br /> &lt;script src=&quot;http://maps.googleapis.com/maps/api/js?sensor=false&quot;&gt;&lt;/script&gt;<br /> <br /> &lt;!-- Arquivo de inicializa&#231;&#227;o do mapa --&gt;<br /> &lt;script src=&quot;js/mapa.js&quot;&gt;&lt;/script&gt;<br /> &lt;/body&gt;<br />&lt;/html&gt;<br /><br />----------------------------------------<br />mapa<br /><br /><br />var map;<br />var directionsDisplay;<br />var directionsService = new google.maps.DirectionsService();<br /><br />function initialize() { <br /> directionsDisplay = new google.maps.DirectionsRenderer();<br /> var latlng = new google.maps.LatLng(-18.8800397, -47.05878999999999);<br /> <br /> var options = {<br /> zoom: 4,<br /> center: latlng,<br /> mapTypeId: google.maps.MapTypeId.ROADMAP<br /> };<br /><br /> map = new google.maps.Map(document.getElementById(&quot;mapa&quot;), options);<br /> directionsDisplay.setMap(map);<br /> directionsDisplay.setPanel(document.getElementById(&quot;trajeto-texto&quot;));<br /> <br /> if (navigator.geolocation) {<br /> navigator.geolocation.getCurrentPosition(function (position) {<br /><br /> pontoPadrao = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);<br /> map.setCenter(pontoPadrao);<br /> <br /> var geocoder = new google.maps.Geocoder();<br /> <br /> geocoder.geocode({<br /> &quot;location&quot;: new google.maps.LatLng(position.coords.latitude, position.coords.longitude)<br /> },<br /> function(results, status) {<br /> if (status == google.maps.GeocoderStatus.OK) {<br /> $(&quot;#txtEnderecoPartida&quot;).val(results[0].formatted_address);<br /> }<br /> });<br /> });<br /> }<br />}<br /><br />initialize();<br /><br />$(&quot;form&quot;).submit(function(event) {<br /> event.preventDefault();<br /> <br /> var enderecoPartida = $(&quot;#txtEnderecoPartida&quot;).val();<br /> var enderecoChegada = $(&quot;#txtEnderecoChegada&quot;).val();<br /> var enderecoChegada1 = $(&quot;txtEnderecoChegada1&quot;).val();<br /> var enderecoChegada2 = $(&quot;txtEnderecoChegada2&quot;).val();<br /> <br /> var request = {<br /> origin: enderecoPartida,<br /> destination: enderecoChegada2,<br /> travelMode: google.maps.TravelMode.DRIVING<br /> optimizeWaypoints: true<br /> };<br /> directionsService.route(request, function(result, status) {<br /> if (status == google.maps.DirectionsStatus.OK) {<br /> directionsDisplay.setDirections(result);<br /> }<br /> });<br />});

09-06-2015 às 01:41 Responder

Rodrigo

Boa tarde. Vc tem algum artigo sobre como atualizar pontos no GMaps sem que o mapa pisque na atualização da localização desse ponto...
Ex: um carro em movimento, com um sinal GPS que eu vou ler de um BD, e tenho que exibir no GMaps... ficou claro.
Parabéns pelo material.
Att, Rodrigo

19-06-2015 às 14:48 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rodrigo

Fala Rodrigo,

Mas qual código você implementou que o mapa pisca ao atualizar os pontos?

Abs!

26-06-2015 às 10:55 Responder

Taliton

Em resposta a Rodolfo Pereira

É muito provável que ele faça a busca no banco de dados, e atualize a pagina a cada resultado do banco de dados para atualizar no mapa conforme o BD... No caso, o que ele esta pedindo é uma forma de atualizar a lat/long sem atualizar o mapa, apenas o ponto no mapa..,

30-06-2015 às 14:17 Responder

Arnaldo Giraldo

Caro Rodolfo: o artigo, bem como os demais, são exelentes, bem estruturados e didáticos, o que me fez comprar o ebook "Google Maps JavaScript API Cookbook"
Saudações,
Arnaldo

05-07-2015 às 10:57 Responder

natanael

Da para adicionar a distancia entre um ponto e outro? Como

13-07-2015 às 02:11 Responder

Janio

Primeiro digo que seu trabalho é ótimo!
Agora quero saber pq e como corrijo minha localização pois no google o meu bairro aparece errado!
Tem uma dica de um bom e simples app de localizador gps?

13-07-2015 às 15:22 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Janio

Fala Janio, tudo bem?

Infelizmente não dá para arrumar isso... só o pessoal do Google mesmo.

Do app não conheço nenhum não :/

Abs!

24-08-2015 às 18:28 Responder

Êdo Lage

Rodolfo,
Parabéns pelo post! Você coloca as coisas tão claras que fica tudo muito simples.

16-07-2015 às 09:37 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Êdo Lage

:)

24-08-2015 às 18:27 Responder

Vanini

Olá tudo bem!
Tenho vários endereços para um trabalho e gostaria de saber se com os endereços eu consigo fazer um intinerario com esses endereços.

Obrigado.

Vanini

21-07-2015 às 12:42 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Vanini

Oi Vanini, tudo bem?

Sim, é só utilizar o "waypoints" para isso. Lembre-se que há um limite de waypoins: oito, além da origem e do destino.

Abs!

24-08-2015 às 18:23 Responder

Ricarlos

Olá, Rodolfo Pereira parabéns pelo site, gostaria de saber se consigo utilizar esse mesmo contexto de rotas quando eu passo um array de posições, tipo cada posição com sua latitude e longitude ai ele ia me mostrando a rota de acordo, deu para entender?

24-07-2015 às 16:26 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Ricarlos

Fala cara!

Deu pra entender sim. Lá no "waypoints", você vai passar essas posições que você tem... algo assim:

waypoints: [{location: new google.maps.LatLng(00.000,00.001)}, {location: new google.maps.LatLng(00.002,00.003)}],

Veja mais infos aqui: https://developers.google.com/maps/documentation/javascript/reference#DirectionsWaypoint

Abs!

24-08-2015 às 17:59 Responder

Márcio Almeida

Amigo parabéns pelos artigos sobre google maps me ajudaram muito.
Mas é o seguinte preciso gravar e depois mostrar eu outra página a rota feita pelo usuário, até já montei tudo e funciona mas o problema é quando o usuário arrasta a rota depois ao exibir essa mudança se perde. Acho que não estou gravando e lendo da forma correta, tem algum exemplo sobre isso? Obrigado.

26-07-2015 às 00:19 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Márcio Almeida

Fala Márcio, beleza?

Não tenho nenhum exemplo em relação a isso... mas a sua dificuldade está em apenas pegar a nova rota após a pessoa arrastar o marcador?

Abs!

24-08-2015 às 17:57 Responder

Mateus Ferreira Ribeiro

Boa noite!

Primeiramente parabéns e obrigado pela postagem.
Estou tentando adaptar o fonte que vc disponibilizou pra uma maneira que já inicia com vários pontos pré determinados no fonte, usando esse DirectionsWaypoints, mas como não entendo mto bem estou tendo dificuldades, poderia me dar um auxilio?

Vlwww

17-08-2015 às 00:56 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Mateus Ferreira Ribeiro

Opa, claro que sim. Tem como eu ver o código que você fez?

24-08-2015 às 17:25 Responder

Welton

Boa noite Rodolfo, seus posts são muito bons parabéns, mais ainda não consegui resolver o meu problema mesmo tentando e tentando com suas dicas ai em cima.
o meu problema é o seguinte quero traçar a rota entre o usuário e um determinado marcador ao clicar em um link ou botão dentro da infowindow do mesmo. você poderia me dar uma ajuda?

24-08-2015 às 20:32 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Welton

Opa, posso sim! Envia o código-fonte pro e-mail rodolfo@princiweb.com.br que eu vejo com mais calma. Valeu!

30-09-2015 às 13:34 Responder

Robson

Olá...Cai aqui procurando resolver um curiosidade minha, e como não achei pensei em te perguntar: E se eu tivesse os waypoints, um inicio e um final, tem alguma api que procura o melhor caminho nesse meio?
Por exemplo...eu vou do pto A ao D, passando por B e C, porém C é mais perto de A, então o caminho indicado seria A C B D???

04-09-2015 às 16:30 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Robson

No callback do "directionsService.route", no objeto "result" você tem essa informação. Ela está em "result.routes[0].waypoint_order".

Abs!

30-09-2015 às 13:51 Responder

Gabriel Dantas Sigolo

Olá Rodolfo Pereira, estou trabalhando em um projeto utilizando a API do Google Maps, e gostaria de uma ajuda. Quero traçar rotas a partir de marcadores já contidos no mapa, através do clique do mouse. Seria a idéia de quando a pessoa clicar em um marcador, a latitude e longitude serão guardadas em uma lista. quando dois marcadores forem clicados, cria a rota entre eles, e assim por diante.

09-09-2015 às 19:59 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Gabriel Dantas Sigolo

Entendi. Qual a sua dificuldade em específico nesse processo? Você já tem algum código implementado disso?

30-09-2015 às 14:38 Responder

Cléber

Olá Rodolfo, primeiramente gostaria de parabenizá-lo pelo ótimo post.
Cara me tira uma dúvida, como faria para descobrir a distância do meu local entre diversos pontos que estão no mapa e através destes valores mostrar os locais mais próximos do meu ponto?

11-09-2015 às 18:05 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Cléber

Fala Cléber!

Para mostrar os locais mais próximos de um ponto, dê uma olhada aqui http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html#comentario-664

Para calcular a distância entre os pontos, eu só sei usando este método aqui http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-rotas-entre-multiplos-pontos.html#comentario-799

Qualquer coisa é só falar.

Abs!

30-09-2015 às 14:08 Responder

Eder

Boa Tarde
Parabéns muito bom o post, já me ajudou muito.

Não conheço muito de html, jquery e js estou estudando.

Tenho uma dúvida no exemplo você manda o dados carregar quando o usuário clica no botão (submit), como eu posso passar os dados fixos ao executar o form? Ou seja ao abrir o form já mostrar os makers fixos.


hoje a estrutura do html do seu exemplo esta assim:

<fieldset>
<legend>Criar rotas</legend>

<div>
<label for="txtEnderecoPartida">Endereço de partida:</label>
<input type="text" id="txtEnderecoPartida" name="txtEnderecoPartida" value="Rua z Cidade j"" />
</div>

<div>
<label for="txtEnderecoChegada">Endereço de chegada:</label>
<input type="text" id="txtEnderecoChegada" name="txtEnderecoChegada" value="Rua x Cidade y"/>
</div>

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

Seria no Html que eu fixaria os 2 pontos? Como executar já ao abrir o form?
 

14-09-2015 às 15:04 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Eder

Fala Eder, tudo certo?

Então, tem duas maneiras de fazer isso. A primeira, é pelo evento "document.ready" do jQuery, onde quando o documento estiver pronto, você chama o evento "click" do botão de submit".

A segunda maneira (e qual eu recomendo), é no JS você definir esses dois endereços de maneira fixa no objeto de "request" e passá-lo para o "directionsService.route", assim como acontece hoje no envio do formulário.

Abs!

30-09-2015 às 16:51 Responder

Paulo Sergio Sarraino

Parabéns Rodolfo... muito bom esse projeto... eu sou especializado com VBA/Access e há algum tempo fiz uma matéria sobre a utilização de mapas com Access (usando Google Maps e Microsoft Bing Maps)... você pode ver em http://www.usandoaccess.com.br/tutoriais/navegacao-mapas-com-googlemaps-earth-bingmaps.asp?id=1.
Porém, lá, uso apenas 1 endereço por vez e muita gente me pergunta sobre múltiplas rotas como você fez aqui... então minha pergunta é: com os conhecimentos da sua matéria, acredita ser possível adaptar para VBA? E há algum limite de uso desses recursos?

grato desde já,

22-09-2015 às 12:00 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Paulo Sergio Sarraino

Fala Paulo, tudo certo?

Pelo que eu vi no seu código, você está usando a URL da API para fazer a integração com o Google Maps, assim, você pode usar a URL abaixo para montar rotas com pontos intermediários:

http://maps.googleapis.com/maps/api/directions/json?mode=driving&origin=6170%20Thornton%20Ave,Newark,CA&destination=378%20Cambridge%20Ave,Palo%20Alto,CA&waypoints=optimize:true|60%20Wilson%20Way%20Milpitas,%20CA%2095035|411%20N%20Pastoria%20Ave%20Sunnyvale,%20CA%2094085|4701%20Great%20America%20Pkwy%20Santa%20Clara,%20CA%2095054

Veja que nos parâmetros, você passa a origem (origin), o destino (destination) e os waypoints separados por |

Com isso, você recebe um JSON o qual você pode tratá-lo e exibir o resultado desejado.

Qualquer coisa me avise.

Abs!

30-09-2015 às 16:59 Responder

Paulo Sergio Sarraino

Em resposta a Rodolfo Pereira

Valeu... e mais uma vez Parabéns!!!

30-09-2015 às 17:14 Responder

Rafael

Prezado Rodolfo

tudo bem, bom dia,vc é um gênio
achei sensacional o GoogleMapsAPIv3CriandoRotas
Gostaria que vc me ajuda-se a desenvolver uma aplicação web de delivery.
Se trata de buscar lojas pelo CEP, ou endereço
E depois calcular a rota, entre a loja fisica e o ponto de entrega, cliente final (delivery) integrar na loja virtual.
Gostaria de saber se já existe algo pronto neste sentido,
caso contrario, gostaria de saber qual seria o valor e tempo de implementação desta aplicação.
Derepente poderia puxar a localização do cliente pelo GPS do celular
agradeço desde já

Rafael

23-09-2015 às 10:41 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Rafael

Fala cara!

Se quiser um orçamento, entra em contato com o Eric pelo e-mail contato@princiweb.com.br

Abs!

26-10-2015 às 17:21 Responder

vanilson carvalho

boa tarde, parabéns Rodolfo pelo seu trabalho, estou conseguindo fazer muito através de suas dicas aqui no blog.

tenho uma duvida estou desenvolvendo um sistema onde ja irei criar as rotas e entre as rotas haveriam diversos pontos, utilizando seus exemplos consegui fazer isso, mas gostaria de fazer isso dinamicamente, onde escolherei os pontos aleatoriamente pegando do banco, ate entao ja consigo inserir tudo em um array, mais ai esta o problema nao consigo utilizar o array no "waypoints:", estou fazendo uns testes manuais para ver se consigo utilizar o valor do array no waypoints:, mas nao esta dando certo

detalhe só de passar os valores de latitude e de longitude ja da certo sem precisar usar a formula new google.maps.LatLng(-23.5505199,-46.63330939999997);

segue aqui algumas formas q tentei:
nessa forma aqui a variavel teste fica com o valor identico da estrutura necessaria do waypoints:, dei um alert nela para ver e o valor fika certo
var pontos = [] ;
pontos[0] = '{location:{lat: -20.2782612, lng: -50.2489621}}';
pontos[1] = '{location:{lat: -20.811761, lng: -49.3762272}}';

var res = pontos.join(", ");
var teste = '[' + res + ']';
alert(teste);
var request = {
origin: enderecoPartida,
destination: enderecoChegada,
waypoints: teste,
travelMode: google.maps.TravelMode.DRIVING
};


outra forma q tentei :
se eu usar assim ele nao retorna o vaor do campo e sim [object Object], [object Object];
var pontos = [] ;
pontos[0] = {location:{lat: -20.2782612, lng: -50.2489621}};
pontos[1] = {location:{lat: -20.811761, lng: -49.3762272}};

var res = pontos.join(", ");
alert(res);
var request = {
origin: enderecoPartida,
destination: enderecoChegada,
waypoints:[res],
travelMode: google.maps.TravelMode.DRIVING
};

ja tentei tambem fazer um for() dentro do waypoints: para percorrer e criar direto la os valores:
waypoints:[for (i = 1; i <= pontos.length; i++) {
if(i < pontos.length){
pontos[i-1] + ", ";
}else pontos[i-1];
}],

mas o funçao em sim nao permite q eu utilize for dentro do waypoints: ,
enfim independente da forma, nao consigo, sera que voce conseguiria me ajudar.

Desde ja agradeço.

27-09-2015 às 16:20 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a vanilson carvalho

Fala cara!

Faça assim:

var waypoints = [];

waypoints.push({ location: new google.maps.LatLng(-23.5505199,-46.63330939999997) });
waypoints.push({ location: new google.maps.LatLng(-23.5505199,-46.63330939999997) });

var request = {
    origin: enderecoPartida,
    destination: enderecoChegada,
    waypoints: waypoints,
    travelMode: google.maps.TravelMode.DRIVING
};

Abs!

26-10-2015 às 16:28 Responder

Renato

Boa noite Rofolfo,
Ótimo post, deixa eu ir alem um pouco?
É possível eu descobrir os pontos cardeais entre pontos de uma rota?
Grato.

17-10-2015 às 23:44 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Renato

Fala Renato, tudo certo?

Dei uma procurada aqui e infelizmente não achei nada a respeito disso =/

Abs!

26-10-2015 às 15:58 Responder

fabio

Belo trabalho! Gostaria de saber como se destaca uma região pesquisada.
Por exemplo se vamos pesquisar Belém-pa no mapa aparece circundada a região e destacada internamente com uma cor transparente

31-10-2015 às 17:47 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a fabio

Fala Fabio, beleza?

Cara, já fiz isso e tenho o código pronto. Mas só dá para destacar os estados. Pode ser?

Abs!

18-12-2015 às 14:40 Responder

Fabio

Em resposta a Rodolfo Pereira

Pode sim, particularidades pode deixar comigo.

18-12-2015 às 15:46 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Fabio

Fala Fabio,

Tá aqui: http://www.princiweb.com.br/demos/google-maps-api-v3-criando-rotas/maps-estados.rar

Qualquer coisa me avise, abs!

21-12-2015 às 14:08 Responder

Lucas

muito bom esse exemplo e muito bem explicado, parabéns.
me tira uma duvida, preciso que no mapa me mostre ja os dois lugares(partida e chegada).
ex: aparece uma lista de lugares para eu ir, clico em shopping. Por seguinte abriria esse mapa com a minha localização (partida) e o outro campo(chegada) viesse preenchido com endereço do shopping.

att,

01-11-2015 às 15:57 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Lucas

Fala Lucas, beleza?

Para implementar isso demora um pouco. Fica difícil eu colocar o código aqui para você.

Você já tentou implementar algo em relação a isso? Aí posso te ajudar melhor.

Abs!

18-12-2015 às 14:40 Responder

Tarcísio

Olá Rodolfo, antes de mais nada parabéns por compartilhar informações e pela atenção em responder as perguntas.

Desenvolvi um sistema que monta um HTML em função de parâmetros em banco de dados e usa a API para traçar a rota entre dois pontos e com alguns pontos intermediários. Funciona bem, sem problemas. A questão é que, por se tratar de área rural, alguns pontos não são cobertos por estradas mapeadas. A rota vai então até o ponto mapeado mais próximo. A dúvida é: quando jogo isso no site do Maps (maps,google.com) ele faz a mesma coisa mas mostra uma linha tracejada entre o último ponto de trajeto mapeado e a coordenada real que informei. Isso é perfeito pra mim, porque mostra até onde tem estrada mas mostra também as coordenadas. Pesquisei bastante mas não consegui encontrar uma forma de fazer essa linha (na verdade é uma parábola) tracejada até a coordenada final. Pode me ajudar? Obrigado.

13-11-2015 às 16:04 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Tarcísio

Fala Tarcísio, beleza?

Já tive esse mesmo problema... resolvi isso desenhando na mão essa linha que não é feita automaticamente pela API do Google Maps. Infelizmente foi a única solução que encontrei.

Abs!

18-12-2015 às 14:33 Responder

cristiano

boa noite,.. gostaria de saber se voces conhecem algum tipo de programação do google maps ou similares.. onde eu tenho coloco 100 endereços ou mais pre-determinados, e fica um campo para eu preencher onde eu estou e ele me dá (destes 100 pontos ) os mais pertos??? Vi alguma coisa parecida na busca de Assistencias técnica (alias quero fazer algo semelhante).. onde eu colocando meu endereço consigo ver quais autorizadas mais proximas... se possivel mandem comentários pelo meu e-mail cristiano.santos1306@gmail.com Obrigado

20-11-2015 às 19:45 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a cristiano

Oi cristiano, tudo bem?

Mande um e-mail para contato@princiweb.com.br que a gente conversa melhor :)

Abs!

18-12-2015 às 14:30 Responder

Agnaldo

Rodolfo gostei muito desses tutoriais, gostaria de saber se tem como fazer uma lista de clientes com endereços e através do meu ponto me mostre os mais próximos de mim que apareça como o ponto A e B do exemplo quanto tempo leva para chegar, distância e rota.
Grato

10-12-2015 às 23:07 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Agnaldo

Fala Agnaldo, beleza?

Tem como fazer sim, mas é bem complexo. Se quiser que a gente faça para você, manda um e-mail para contato@princiweb.com.br

Abs! :)

18-12-2015 às 12:04 Responder

Silva

Em resposta a Rodolfo Pereira

Rodolfo, Muito bom teu tutorial. Fiquei com uma dúvida. Ao traçar uma rota de um ponto A ao ponto B. O traçado da rota é possivel configurar a sua largura? vamos dizer que no default o google gere o mapa com largura de 400 metros, é possivel alterar para 1 Km ?

Obg
Abs

23-12-2015 às 10:02 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Silva

Hm cara, creio que não ein.

27-01-2016 às 08:29 Responder

Claudemir

Boa noite. excelente tutorial meu parabéns (y)
queria adicionar 30 pontos em um trajeto que defini.
tente adicionar no waypoints: e da erro de limites de pontos.
como eu procederia no código para consegui colocar uns 30 pontos no trajeto?

27-12-2015 às 18:41 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Claudemir

Infelizmente não há como.

A alternativa que você tem é colocar os pontos e desenhar você mesmo as rotas entre os pontos.

27-01-2016 às 08:30 Responder

Luciene Santos

Olá Rodolfo,

Parabéns pelo seu blog. Se possível, gostaria que você me respondesse algumas questões que eu tenho duvida:

- È possível colocar uma imagem overlay criada por mim na minha posição corrente que não seja uma imagem do google marker? Você teria indicação de script?
- E como fazer para que ao clicar em cima dessa imagem aparecer informações do endereço local e indicações de trajeto?
- E como fazer para que ao clicar em um outro botão de uma imagem de outra overlay ela assume a mesma posição corrente com as mesmas informações da primeira imagem?
- Como fazer automaticamente que uma terceira imagem assuma a posição da segunda depois de um determinado tempo.usando um temporizador?

29-12-2015 às 14:56 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Luciene Santos

Oi Luciene!

Sobre uma imagem overlay, tem como sim. Dê uma olhada aqui: https://developers.google.com/maps/documentation/javascript/examples/overlay-simple

Sobre os outros itens, infelizmente no momento não poderei te ajudar =/ Peço desculpas.

Abs!

27-01-2016 às 08:33 Responder

Marcos Colares

Parabéns, vai me ajudar bastante.

08-01-2016 às 14:42 Responder

Elton Ramos

Boa Noite Rodolfo, Gostaria de obter sua ajuda.
Vou tentar explicar de forma rápida e simples.
Tenho uma Lista de Postos de Combustível com Lat Long.
Queria fazer uma rota e gostaria que eles aparecessem no descritivo da rota quando a rota passar por eles. Existe uma maneira de fazer isso?

16-01-2016 às 02:48 Responder

Elton Ramos

Alguém saberia se existe algum parâmetro para mostrar o mapa com as rotas alternativas?
Este parâmetro
provideRouteAlternatives: true
mostra na descrição as rotas porem quando vc faz no site do Google Maps a rota principal fica azul e das outras ficam cinza, alguém já mexeu com isso?
abs

16-01-2016 às 09:04 Responder

Eduardo

Como faço para enviar a rota para o celular?

01-02-2016 às 10:53 Responder

Marcelo

Ola,
Como faço para traçar uma linha reta entre os pontos do mapa e não uma rota pelas ruas/estradas?
Obrigado,

02-02-2016 às 10:26 Responder

Luiz henrique

Muito bom, porém ele tem um limite de pontos que posso colocar pra fazer uma rota.. quero criar uma rota com uma quantidade de ruas e ele tem um limite de ruas que posso botar na rota.. ou estou fazendo algo errado? :D

02-02-2016 às 14:29 Responder

matheus mezzomo

Brother, maravilhoso seu exemplo.
Mas o google me limita a uma requisição de 8 pontos por endereço.

Eu ja tenho a geolocalização do meus pontos, assim não precisando requisitar a troca.

Existe como eu gerar seu mapa, utilizando a geolocalização de cada ponto, assim podendo colocar mais de 15 endereços ?

Como eu altero, os waypoints, de endereço para geolocalização ?

03-02-2016 às 10:09 Responder

Mauro

Olá Rodolfo. Em primeiro lugar, parabéns pela sua generosidade em compartilhar seus conhecimentos sem nada em troca. Gostaria de abusar dessa generosidade para lhe perguntar. Depois de criada a rota, como faço para seguí-la em um GPS no android?

24-02-2016 às 12:19 Responder

Jane Mariano Duval

Boa tarde,

Estou precisando de uma função que retorne dada a origem e destino, quais são os estados do percurso?

26-02-2016 às 14:09 Responder

Eloize

Boanoite, o que você mostra em seu site é tudo que precisava. Parabéns, maaaaaaaaaaas, gostaria de ter essas funcionalidades no Excel, ou seja, como posso colocá-lo em VBA?

03-03-2016 às 01:43 Responder

PATRICIA

Rodolfo, td bem? Gostaria de saber se existe a opção de jogar várias cidades e o maps colocar na ordem a rota?

08-03-2016 às 15:41 Responder

Márcio Rômulo

Excelente.......
Só q sou burro a pampa p criar isso. Nem sei se faço no celular ou no site.

15-03-2016 às 03:08 Responder

Lucio

Nossa cara, você ta de parabéns, ta me ajudando MUUUUUITO !!
não só com o post e o exemplo, como também com o suporte que você da aos comentários que acaba ajudando bastante, pois muitas dúvidas são comuns, muito obrigado!!!!!

30-03-2016 às 23:24 Responder

lincoln silva gadea

É possível marcar as rotas a partir das marcações fixas?

31-03-2016 às 00:35 Responder

Willian

Olá Rodolfo tudo bem?
Sei que já faz um bom tempo que fez este post "rsrsr", mas estou implementando em um sistema exatamente com esta finalidade e me surgiu uma dúvida, estou a procura de uma resposta e ainda não encontrei:

Minha intensão é mostrar não só o "Pin" mas também a "Rota" no mapa, Tipo mostrar o trajeto que foi percorrido no determinado endereço. Saberia um forma de mostrar dessa forma.

Desde de já agradeço sua atenção e aproveito para lhe parabenizar pela excelente explicação nesta postagem.

04-04-2016 às 12:43 Responder

Claudio

Rodolfo,

Primeiro parabéns pelo trabalho. Apenas uma duvida, tem limite no numero de pontos que podemos adicionar a rota?

Grato,
Claudio

12-04-2016 às 14:24 Responder

Robson

Olá!

Sou iniciante e gostaria de saber como usar a quilometragem total x valor (definido por tabela) pra fazer cálculo de rota e gerar preço

20-04-2016 às 20:04 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Robson

Fala Robson,

Para pegar a quilometragem de uma rota você pode ver como fazer aqui: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-rotas-entre-multiplos-pontos.html#comentario-799

Agora, sobre o valor... bom, não entendi direito :(

Abs!

27-04-2016 às 02:33 Responder

Othon

Olá Rodolfo.
Preciso criar mais de uma "rota de fuga" para o caso de pontos de estrangulamento, ou de pontos de protestos nas vias, coisas desse tipo.

27-04-2016 às 18:19 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Othon

Não sei se há como evitar certos lugares em um trajeto feito pela API.

03-05-2016 às 08:11 Responder

Hugo Luis

Olá Rodolfo, gostei muito do seu tutorial, mas estou com dificuldade.
Como faço para traçar a rota de forma reta (colocando uma linha) de um ponto a outro e mostrar a distância.

12-05-2016 às 20:39 Responder

IGOR

Parabéns pelos posts, você sabe se já é possível usarmos a nova função do Waze que permite prever o trânsito de acordo com a hora que precisamos enregar tal carga? O Waze verifica no histórico dele o trânsito que ocorreu no passado em dias similares, para poder prever o trânsito futuro.

Abraços,

27-05-2016 às 03:19 Responder

Walter Alves Chaga Junior

Olá Rodolfo,
gostei muito de seus posts. São muito bem explicados...

Preciso de uma ajuda. Eu estou fazendo um sistema de roteirização para controle de rota de vendedores nos clientes e notei que quando faço a validação da rota diretamente no Google Maps, alguns intinerarios ele me traz mais de uma rota. Tem uma rota que parece otimizar tempo e outra otimizar distância. Mas quando eu executo o distancematrix, via linha de comando http, ele só me traz uma rota otimizada por tempo. Gostaria de saber como eu faço para obter uma rota otimizada por distância ou por tempo via linha de comando. Há algum parâmetro adicional que tenho que incluir?

Agradeço, desde já, por qualquer ajuda que me for dada.

31-05-2016 às 16:46 Responder

Valeria

Olá, você sabe como fazer para monitorar em tempo real uma pessoa ? Ou fazer uma simulação utilizando os caminhos entre cada ponto?

04-06-2016 às 11:21 Responder

Luan Lary

Olá Rodolfo

Em primeiro lugar muito obrigado pelo post, foi de grande ajuda.
Eu estou tendo um problema com os waypoints, a google só aceita 8 sem chave de api, mas ai fui lá e ativei uma chave da api directions e mesmo assim não estou conseguindo usar o mapa, o retorno no console continua falando que o limite é oito, como seu não tivesse ativado a chave.

14-06-2016 às 22:11 Responder

Concessio

Bom dia !!!

Gostaria de saber se tem como eu criar uma rota entre dois pontos automática.
exemplo

Crio um ponto A com minha latitude e longitude atual, tipo clico em um botão e salva naquele exato momento
Depois clico em outro botão salvando minha latitude e longitude em um ponto B e me mostrado a rota é possivel isso? caso for vc tem ideia de como codificar isso?

27-06-2016 às 10:28 Responder

Gustavo

Existe alguma maneira para calcular/exibir a rota mais curta em vez da rota mais rápida?

27-06-2016 às 11:49 Responder

Israel Lopes

Código limpo e explicação ótima no tutorial. Parabéns pelo site!
Aprendo muito com este blog! Queria saber quanto a utilização dos códigos se estão como licença MIT? posso utilizá-los, modifica-los?

01-07-2016 às 10:17 Responder

Jih

Olá, muito bom seu post parabéns!
Gostaria que me indicasse algum material, eu capturo a latitude e longitude pelo Smartphone e preciso jogar esses dados e formar uma rota, dos locais que foram gravados. Desde já agradeço!

05-07-2016 às 15:42 Responder

Galileu Garcia

Olá Rodolfo, Tudo bem?
Estou com uma dúvida. Estou desenvolvendo uma aplicação híbrida e gostaria de saber como faço para ajustar o mapa a resolução da tela do dispositivo que está rodando o app. Obrigado

17-07-2016 às 14:08 Responder

Faria dos Santos

Gostei muitos posts companheiros, quero uma ajuda sobre desenvolver um mapa com resultados vindo do php mysql, para o google maps

19-07-2016 às 20:48 Responder

Robson Gomide

Estou iniciando agora com esta API e estou gostando bastante.<br />Gostaria de saber se tem como mostrar a rota e a distancia entre varios pontos, sendo um ponto em comum. Exemplo:<br />Tenho 8 pontos no mapa, quero que mostre a rota e a distancia dos sets pontos tendo o primeiro como referencia, ou seja, distancia entre o ponto 1 e 2, 1 e 3, 1 e 4, ...<br /><br />Segue meu c&#243;digo atual.<br /><br />&lt;!DOCTYPE html&gt;<br />&lt;html&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 Multiple Markers&lt;/title&gt; <br /> &lt;script src=&quot;http://maps.google.com/maps/api/js?sensor=false&quot; <br /> type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br />&lt;/head&gt; <br />&lt;body&gt;<br /> &lt;div id=&quot;map&quot; style=&quot;width: 1360px; height: 650px;&quot;&gt;&lt;/div&gt;<br /><br /> &lt;script type=&quot;text/javascript&quot;&gt;<br /> var locations = [<br /> [&#39;Ita&#237; - SP&#39;, -23.415682, -49.090914, 1],<br /> [&#39;Paranapanema - SP&#39;, -23.388182, -48.722464, 2],<br /> [&#39;Taquarituba - SP&#39;, -23.52616, -49.244169, 3],<br /> [&#39;Itapeva - SP&#39;, -23.980737, -48.879497, 4],<br /> [&#39;Taquariva&#237; - SP&#39;, -23.924509, -48.698575, 5],<br /> [&#39;Itaber&#225; - SP&#39;, -23.863604, -49.139969, 6],<br /> [&#39;Buri - SP&#39;, -23.799459, -48.601361, 7],<br /> [&#39;Ituverava - SP&#39;, -20.333215, -47.792193, 8]<br /> ];<br /><br /> var map = new google.maps.Map(document.getElementById(&#39;map&#39;), {<br /> zoom: 9,<br /> center: new google.maps.LatLng(-23.27, -48.77),<br /> mapTypeId: google.maps.MapTypeId.ROADMAP<br /> });<br /><br /> var infowindow = new google.maps.InfoWindow();<br /><br /> var marker, i;<br /><br /> for (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]),<br /> map: map<br /> });<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 /> &lt;/script&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;

27-07-2016 às 13:44 Responder

Robson Gomide

Parabéns Rodolfo, pelas suas postagens e site.

Através dos seus posts, consegui fazer um mapa que mostre várias rotas a partir de um mesmo ponto.
O que não estou conseguindo fazer, é mostrar o KM de cada rota.
Você pode me ajudar ?

segue meu código:

<html>
<!--Source code -->
<!-- Style to put some height on the map -->
<style type="text/css">
#map-canvas { height: 650px };
</style>

<!-- Load the Google Maps aPI -->
<!-- <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPk4QYh_uNfP25-JYBBN8lU-nd85XhR0A&sensor=false"></script> -->
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<!-- All of the script for multiple requests -->
<script type="text/javascript">

// Initialise some variables
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
var num, map, data;
var requestArray = [], renderArray = [], kmArray = [];

// A JSON Array containing some people/routes and the destinations/stops
var jsonArray = {
"Person 1": ["Itaí, SP", "Paranapanema, SP"],
"Person 2": ["Itaí, SP", "Taquarituba, SP"],
"Person 3": ["Itaí, SP", "Itapeva, SP"],
"Person 4": ["Itaí, SP", "Taquarivai, SP"],
"Person 5": ["Itaí, SP", "Itaberá, SP"],
"Person 6": ["Itaí, SP", "Buri, SP"],
"Person 7": ["Itaí, SP", "Ituverava, SP"]
}

// 16 Standard Colours for navigation polylines
var colourArray = ['navy', 'grey', 'fuchsia', 'black', 'white', 'lime', 'maroon', 'purple', 'aqua', 'red', 'green', 'silver', 'olive', 'blue', 'yellow', 'teal'];

// Let's make an array of requests which will become individual polylines on the map.
function generateRequests(){

requestArray = [];

for (var route in jsonArray){
// This now deals with one of the people / routes

// Somewhere to store the wayoints
var waypts = [];

// 'start' and 'finish' will be the routes origin and destination
var start, finish

// lastpoint is used to ensure that duplicate waypoints are stripped
var lastpoint

data = jsonArray[route]

limit = data.length
for (var waypoint = 0; waypoint < limit; waypoint++) {
if (data[waypoint] === lastpoint){
// Duplicate of of the last waypoint - don't bother
continue;
}

// Prepare the lastpoint for the next loop
lastpoint = data[waypoint]

// Add this to waypoint to the array for making the request
waypts.push({
location: data[waypoint],
stopover: true
});
}

// Grab the first waypoint for the 'start' location
start = (waypts.shift()).location;
// Grab the last waypoint for use as a 'finish' location
finish = waypts.pop();
if(finish === undefined){
// Unless there was no finish location for some reason?
finish = start;
} else {
finish = finish.location;
}

// Let's create the Google Maps request object
var request = {
origin: start,
destination: finish,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};

// and save it in our requestArray
requestArray.push({"route": route, "request": request});
}

processRequests();
}

function processRequests(){

// Counter to track request submission and process one at a time;
var i = 0;

// Used to submit the request 'i'
function submitRequest(){
directionsService.route(requestArray[i].request, directionResults);
}

// Used as callback for the above request for current 'i'
function directionResults(result, status) {
if (status == google.maps.DirectionsStatus.OK) {

directionsDisplay.setDirections(result);
var distancia = result.routes[0].legs[0].distance.value;

// Create a unique DirectionsRenderer 'i'
renderArray[i] = new google.maps.DirectionsRenderer();
renderArray[i].setMap(map);

// Some unique options from the colorArray so we can see the routes
renderArray[i].setOptions({
preserveViewport: true,
suppressInfoWindows: true,
polylineOptions: {
strokeWeight: 4,
strokeOpacity: 0.8,
strokeColor: colourArray[i]
},
markerOptions:{
icon:{
// path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 3,
strokeColor: colourArray[i]
}
}
});

// Use this new renderer with the result
renderArray[i].setDirections(result);
// and start the next request
nextRequest();
}

}

function nextRequest(){
// Increase the counter
i++;
// Make sure we are still waiting for a request
if(i >= requestArray.length){
// No more to do
return;
}
// Submit another request
submitRequest();
}

// This request is just to kick start the whole process
submitRequest();
}

// Called Onload
function init() {

// Some basic map setup (from the API docs)
var mapOptions = {
center: new google.maps.LatLng(-23.415682,-49.090914),
zoom: 10,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);

// Start the request making
generateRequests()
}

// Get the ball rolling and trigger our init() on 'load'
google.maps.event.addDomListener(window, 'load', init);
</script>

<!-- Somewhere in the DOM for the map to be rendered -->
<div id="map-canvas"></div>
</html>

28-07-2016 às 10:53 Responder

rodrigo faustino

Bom dia princi!
Gostei do tutorial, mas aí me veio um questão ex:
Tenho x números de pontos no meu banco de dados e gostaria que aparecesse apenas os 5 mais próximos a minha localização, com a rota para cada uma delas, é possível?

15-08-2016 às 06:47 Responder

Giovana

Olá Rodolfo primeiramente parabéns pelo site gostei muito!!

gostaria de fazer uma pergunta, tenho que implementar um código no qual eu possa definir pontos em que o usuário ao chegar perto emita um sinal se possível ou que mostre uma mensagem informando ao o usuário para não chegar perto de tal ponto, isso é possível?

22-08-2016 às 20:48 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Giovana

Sim! Basicamente você precisa calcular um raio do ponto em questão e ver se o usuário (através de geolocation) está dentro deste raio. :)

20-09-2016 às 10:03 Responder

Hugo Pablo

Bom dia amigo, é possível usar o cursor do mouse para marcar um ponto no mapa, retornando latitude e longitude do mesmo, preciso salvar essa informação

29-08-2016 às 11:24 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Hugo Pablo

Sim... veja aqui.

20-09-2016 às 10:00 Responder

Juliano

Olá Rodolfo, tudo bem?
Montei o script e funciona belezinho, porém quando eu coloco a minha Key ele não funciona da erro como "Algo deu errado".
Sabe o que pode ser?

Obrigado.

15-09-2016 às 14:50 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Juliano

Tem um print-screen do erro? :)

20-09-2016 às 09:55 Responder

William Douglas

Parabéns Rodolfo! Estou iniciando um estudo no desenvolvimento desta API, como tema em minha monografia, pesquisando e há poucos minutos encontrei seu BLOG (Excelente, mas a Exlecência está em Você), vi o prazer que expõe diversas explicações, mas com qualidade e precisão. Se encontrassemos constantemente Pessoas como Você, o mundo teria um desenvolvimento muito maior, com profissionais mais informados com a qualidade e precisão dos serviços. Que Deus te Proteja sempre e Te Ilumine para que possa levar conhecimento e apoio a todos que necessitam. Parabéns de coração.

26-10-2016 às 00:29 Responder