Google API: Cálculo de Rotas com Google Maps usando o WindSurf Editor e Inteligência Artificial

Eu sou o Dante Testa e, neste guia passo a passo, vou te mostrar exatamente como eu criei um sisteminha simples e prático para calcular rotas de entrega usando as APIs do Google Maps — tudo isso acelerado pela inteligência artificial do WindSurf Editor. Se você quer montar um sistema para calcular frete de motoboy, delivery do seu cardápio digital ou qualquer solução que precise traçar rotas e estimar custos, este artigo foi feito para você.

Quer uma Consultoria VIP me chama no Whatsapp

Vou manter a linguagem direta, didática e prática, do jeito que eu falo nos meus conteúdos: sem enrolação. Ao final você terá um fluxo completo — desde a criação do projeto no Google Cloud até a publicação do site no cPanel (eu uso a Napoleon Host). Também dou dicas de prompts que eu utilizei no WindSurf, como habilitar as APIs corretas, tratar autocomplete com Places API, incluir verificação de clima para ajustar o valor do frete e permitir múltiplas rotas para o usuário escolher.

Sumário (o que você vai aprender)

• Como preparar o WindSurf Editor para gerar o código automaticamente.
• Como criar um projeto no Google Cloud e habilitar as APIs necessárias.
• Como gerar e proteger sua chave de API do Google Maps.
• Como pedir ao WindSurf (via prompt) para criar o sistema de cálculo de rotas.
• Como corrigir problemas comuns, como o autocomplete não funcionando (Places API).
• Como adicionar lógica de cálculo de frete (taxa fixa + valor por km).
• Como integrar uma API de clima para aumentar a taxa em dias de chuva.
• Como apresentar múltiplas rotas e permitir que o usuário escolha.
• Como testar localmente e publicar em um servidor cPanel (Napoleon Host).
• Boas práticas de segurança e próximos passos para evoluir o sistema.

Step 1: Preparando o WindSurf Editor — por que usar e como instalar

Antes de qualquer coisa, eu gosto de preparar o ambiente de desenvolvimento. Eu uso o WindSurf Editor porque ele integra inteligência artificial diretamente ao editor, tem suporte a modelos potentes (CloudSone 4.5, GPT-5 Codex dependendo do plano) e recursos muito práticos como a entrada por microfone para ditar prompts — o que acelera demais o processo.

Por que usar o WindSurf?

• Integra IA para geração e modificação de código em tempo real.
• Preview integrado, server local automático e ferramentas visuais para manipular partes da interface.
• Facilidade para iniciantes: você pede em linguagem natural e a ferramenta gera o código.

Como instalar e começar:

1. Baixe o WindSurf (há versão free para começar). Crie sua conta.
2. No WindSurf, crie uma pasta local para o projeto (por exemplo: “Rotas”).
3. Ative o modelo CloudSone 4.5 (quando disponível) ou o Codex se preferir. Configure no modo “Code” para geração de código.
4. Use o microfone para ditar prompts quando quiser — é rápido e prático.

Observação: o WindSurf cobra créditos conforme rotinas de IA; se for um uso profissional, vale a pena assinar o plano. Eu considero o investimento pequeno diante do que a IA entrega em minutos — economiza tempo e dinheiro comparado a contratar um desenvolvedor do zero.

Step 2: Criando um projeto no Google Cloud Console

Agora vamos ao Google Cloud — é aqui que habilitamos as APIs do Google Maps e geramos a chave de API que a aplicação vai usar.

Passo a passo:

1. Acesse console.cloud.google.com e faça login com sua conta Google.
2. Clique em “Criar Projeto”. Dê um nome (por exemplo, mapsdante) e aguarde a criação.
3. Selecione o projeto recém-criado no topo do painel (caixa de seleção de projetos).

Pronto — projeto criado. Próximo passo: habilitar as APIs necessárias.

Step 3: Habilitando as APIs essenciais do Google Maps

Para calcular rotas, mostrar mapas no frontend e ter autocomplete de endereços você precisa habilitar algumas APIs específicas. As principais que eu uso são:

• Maps JavaScript API — para renderizar mapas e interagir com o usuário.
• Directions API — para traçar rotas entre dois pontos.
• Distance Matrix API — para calcular distância/tempo entre múltiplos pontos (útil em rotas de entrega em lote).
• Places API — para autocomplete (sugestão de endereços) e buscas por locais.
• Geocoding API (opcional) — para converter endereço em latitude/longitude e vice-versa.
• Weather API (ou outra API de clima) — para ajustar preços dependendo do tempo.

Como habilitar:

1. No Google Cloud Console, vá em “APIs e serviços” → “Biblioteca”.
2. Pesquise por “Maps JavaScript API” e clique em “Ativar”.
3. Repita para “Directions API”, “Distance Matrix API”, “Places API” e “Geocoding API” (se necessário).
4. Se quiser lógica de clima, habilite uma API de clima disponível (alguns usam Weather API de terceiros; o Google tem recursos de clima também dependendo do painel).

Dica importante: não ative APIs que você não vai usar, porque cada API tem regras de cobrança diferentes. Ative aos poucos durante o desenvolvimento.

Step 4: Gerando e protegendo sua chave de API

Assim que você habilitar a Maps JavaScript API, o Google geralmente já sugere a criação de uma chave de API. Essa chave é o que sua aplicação vai usar para autenticar requisições.

Gerar a chave:

1. Vá em “APIs e serviços” → “Credenciais”.
2. Clique em “Criar credenciais” → “Chave de API”.
3. A chave será exibida — copie e salve em local seguro.

Protegendo sua chave:

• Não exponha sua chave em repositórios públicos.
• Use regras de restrição: restrinja por domínio (HTTP referrers) quando for para web, ou por IP quando for um servidor específico.
• Durante o desenvolvimento local você pode deixar irrestrita temporariamente, mas configure as restrições antes de colocar em produção.

Importante: a chave tem custo dependendo do uso. Monitore o faturamento e configure cotas/alertas para não ter surpresa na fatura.

Step 5: Pedindo ao WindSurf para gerar o sistema — exemplo de prompt

Chegou a parte divertida: pedir para a IA gerar o código. Eu falo com o WindSurf em linguagem natural e ele gera HTML/JavaScript que integra com as APIs do Google. A ideia é ser direto e claro sobre o que eu quero.

Exemplo de prompt que eu usei (dica: caneta e microfone ajudam):

Ô GPT! Me ajuda a criar um sisteminha utilizando a API do Google Maps para criar um cálculo de rota. Eu quero fazer umas entregas aqui: meu motoboy cobra R$5 taxa fixa, mais R$2 por quilômetro rodado. Então, se eu te informar o endereço A e o endereço B, você traça a rota e me mostra na tela o valor final do frete. Cria um prompt da hora aí para mim.

Com esse tipo de instrução o WindSurf gera um index.html com integração usando a Maps JavaScript API e Directions API, campos de entrada com autocomplete (quando a Places API estiver habilitada), cálculo da distância e exibição do valor final do frete.

Dica de estrutura do prompt para qualidade:

• Informe regras claras de negócio (taxa fixa, valor por km, possíveis ajustes como clima).
• Peça para gerar arquivos separados se quiser organização (index.html, script.js, etc.).
• Peça comentários no código para entender o que cada trecho faz.

Step 6: Debug — autocomplete não aparece? habilite a Places API

Erro comum: após gerar o frontend com campos de endereço, o autocomplete não funciona e o console do navegador indica que “esta página não carregou o Google Maps corretamente” ou pede habilitação de alguma API faltante.

Como depurar:

1. Abra o console do navegador (F12) e verifique a mensagem de erro — muitas vezes ela já indica qual API está faltando.
2. Se o autocomplete não funciona, habilite a Places API no Google Cloud Console e atualize a página.
3. Verifique se a chave de API incluída no script corresponde ao projeto habilitado.
4. Cheque restrições da chave: se a chave está restrita por referrer, e você está testando localmente (localhost), a requisição pode ser bloqueada.

Depois de habilitar a Places API, o autocomplete deve começar a sugerir endereços enquanto você digita. No meu fluxo, bastou habilitar essa API e reabrir o preview no WindSurf — autocomplete funcionando perfeitamente.

Step 7: Implementando o cálculo de frete (taxa fixa + R$ por km)

Regras do exemplo que eu implementei:

• Taxa fixa: R$5,00
• Valor por quilômetro rodado: R$2,00

Fluxo do cálculo:

1. Usuário preenche endereço A (origem) e endereço B (destino) com autocomplete.
2. Ao clicar em “Calcular rota”, o sistema chama a Directions API para obter a rota e a distância (em metros).
3. Convertemos a distância para quilômetros (por exemplo, 1.19 km).
4. Aplicamos a fórmula: valor = taxa fixa + (valor_por_km * km).
5. Exibimos no front-end o mapa com a rota, a distância estimada, o tempo estimado e o valor do frete formatado (R$ X,XX).

Exemplo de lógica (conceitual):

• distanciaKm = distanciaMetros / 1000
• valorFrete = taxaFixa + (valorPorKm * distanciaKm)

Se você quiser arredondar para cima, aplicar faixa mínima ou regras de desconto, é só ajustar a fórmula. Eu recomendo também mostrar o detalhamento (taxa fixa + km * R$2) para transparência com o cliente.

Step 8: Melhorando com condição climática — adicionando taxa extra em dias chuvosos

Uma melhoria poderosa é ajustar o valor do frete com base no clima. Em dias chuvosos, é comum cobrar um adicional devido ao tempo maior de entrega e aos riscos. Eu implementei uma lógica simples:

• Se estiver chovendo, acrescenta R$1,00 por quilômetro rodado (além dos R$2 habituais).
• Você pode sofisticar: chuva fraca + R$0,50/km, chuva forte + R$2,00/km, etc.

Como integrar:

1. Habilite ou conecte uma API de clima (pode ser do Google ou um serviço externo como OpenWeatherMap).
2. Ao calcular a rota, faça uma chamada ao endpoint de clima passando as coordenadas do local (ou o ponto médio da rota).
3. Analise a resposta: verifique se há precipitação ou condição classificadora de chuva.
4. Ajuste o valor por km antes de calcular o total.

Exemplo de prompt para pedir ao WindSurf integrar o clima:

WindSurf, quero que você integre uma API de clima e utilize nossa chave de API para verificar o tempo atual na rota. Se houver chuva (qualquer intensidade), adicione R$1,00 por quilômetro ao valor do frete. Caso contrário, mantenha R$2,00 por km. Mostre no front-end se a taxa extra foi aplicada.

No meu teste eu habilitei a Weather API e pedi para o WindSurf adaptar o código. O resultado: quando eu coloquei um endereço em Caxias do Sul (cidade com chuva naquele dia), o sistema calculou a rota, mostrou “chuva leve” e aplicou a taxa extra automaticamente — exibindo a justificativa para o usuário.

Step 9: Fornecendo múltiplas rotas para o usuário escolher

Alguns clientes querem escolher a rota: a mais rápida, a mais curta ou a mais barata. A Directions API permite solicitar múltiplas rotas alternativas.

Como implementar:

1. Nas opções da Directions API, solicite alternatives=true.
2. Receba até N rotas (por exemplo, máximo 3). Para cada rota, calcule distância e tempo.
3. Calcule o valor do frete para cada rota com a mesma fórmula (incluindo possíveis ajustes por clima).
4. Apresente as rotas ao usuário com um botão para selecionar uma delas; ao selecionar, a rota escolhida fica destacada no mapa e o valor final atualizado.

No meu exemplo gerado pelo WindSurf, o sistema já trazia até três rotas possíveis. O usuário pode clicar em qualquer uma para recalcular e exibir o detalhamento (quilometragem, tempo e custo). Eu costumo mostrar qual rota é “recomendada” (por ser mais rápida/curta/mais barata).

Step 10: Testar localmente com o preview do WindSurf e resolver bugs visuais

O WindSurf permite abrir um preview (um servidor local) diretamente. Teste todos os fluxos:

• Autocomplete dos endereços.
• Traçar rota e exibir mapa.
• Cálculo de distância, tempo e valor do frete.
• Ajustes por clima.
• Exibição de múltiplas rotas.

Problemas comuns e soluções rápidas:

• Mapa deslocado ao selecionar rota: pode ser um bug de CSS/JS — ajuste o comportamento de “fitBounds” ao desenhar a rota.
• Autocomplete lento: verifique se a chave está habilitada para Places API e se não há restrições bloqueando requisições.
• Chave exposta: não deixe a chave em repositório público; use variáveis de ambiente em produção.

Step 11: Publicando no servidor cPanel (Napoleon Host) — subir o projeto pra web

Com o sistema funcionando localmente, o próximo passo é publicar. Eu uso e recomendo a Napoleon Host (tenho usado há anos). Eles oferecem cPanel e DirectAdmin com suporte em português, o que facilita para quem está começando.

Como publicar via cPanel:

1. Acesse seu cPanel e entre no Gerenciador de Arquivos.
2. Dentro de public_html crie uma pasta para o projeto (por exemplo: /rotas).
3. Faça upload dos arquivos (index.html, script.js, etc.). Você pode enviar zip e descompactar no servidor para ganhar tempo.
4. Se sua aplicação depender de backend (PHP, banco de dados), configure conforme necessário (suba scripts PHP, configure conexões MySQL). No meu exemplo foi só frontend com chamadas diretas às APIs do Google.
5. Abra o domínio/dominioprincipal.com/rotas e faça testes finais.

Uma vez online, lembre-se de restringir a chave de API por domínio para evitar uso indevido.

Step 12: Boas práticas de segurança e monitoramento

Algumas recomendações que eu sempre aplico:

• Restrinja a chave de API por domínio/IP antes de colocar em produção.
• Monitore o uso no Google Cloud Console para detectar picos inesperados.
• Configure alertas de faturamento para não ter surpresas.
• Armazene chaves sensíveis em variáveis de ambiente no servidor; não deixe em arquivos públicos.
• Valide entradas do usuário no frontend e backend para evitar abusos.

Step 13: Ideias de evolução — o que você pode acrescentar depois

Depois de ter a base rodando, as possibilidades são enormes. Algumas ideias que já comecei a explorar e recomendo:

• Roteirização para múltiplas entregas (otimização de rota para vários pontos) usando a Distance Matrix API e algoritmos de otimização.
• Integração com banco de dados (MySQL) para armazenar pedidos, rastreamento de entregas e histórico de rotas.
• Autenticação com Google (OAuth) para clientes e motoboys.
• Gamificação e integração com YouTube/Gmail — eu mesmo estou trabalhando em integrar minha comunidade via APIs do Google para entregar conteúdo a quem se engaja no canal.
• Dashboard administrativo para ver rotas em tempo real, preparar relatórios e controlar custos.
• Classificação de chuva em níveis (leve, moderada, forte) e aplicação de taxas diferentes por nível.
• Suporte a cálculo por tempo estimado (além da distância), por exemplo alto trânsito pode justificar aumento de tarifa.

Step 14: Exemplo de prompts que eu usei e que você pode adaptar

Aqui estão alguns prompts que funcionaram bem no WindSurf — adapte ao seu caso:

1. Prompt inicial (gerar sistema básico de rota): “Crie um sistema web simples com um mapa do Google, dois campos de endereço com autocomplete, botão ‘Calcular rota’. Ao calcular, mostre rota no mapa, distância, tempo e calcule o frete: taxa fixa R$5 + R$2 por km. Gere index.html e um script JS comentado.”
2. Prompt para adicionar clima: “Integre uma API de clima para verificar o tempo atual no destino. Se estiver chovendo, acrescente R$1,00 por km ao valor do frete. Mostre no front-end se a taxa extra foi aplicada e qual o motivo.”
3. Prompt para rotas alternativas: “Ajuste a chamada da Directions API para retornar até 3 rotas alternativas. Para cada rota calcule distância, tempo e valor do frete. Permita que o usuário selecione a rota preferida e atualize o mapa e o valor.”
4. Prompt para debug (quando algo não funciona): “O autocomplete não está funcionando e o console mostra erro sobre a API. Verifique se falta habilitar a Places API ou se a chave está com restrição e sugira correções simples.”

Conclusão — por que isso é tão útil e o que você ganha com essa solução

Traçar rotas com o Google Maps e calcular o frete automaticamente abre uma infinidade de possibilidades: sistemas de delivery mais transparentes, tabelas de preço baseadas em distância e clima, escolha de rotas mais econômicas e integrabilidade com outras APIs (clima, place, street view, energia solar, etc.). Com o WindSurf Editor e uma boa configuração no Google Cloud você consegue montar isso em minutos, não dias.

Eu mostrei aqui o fluxo completo: preparação do ambiente, criação do projeto no Google Cloud, habilitação das APIs certas, geração do código com IA, correção de problemas com Places API, implementação de cálculo de frete com taxa fixa e valor por km, adição de ajuste climático e publicação no cPanel (Napoleon Host). Usei uma linguagem direta e prática porque acredito que qualquer pessoa, com um pouco de vontade, consegue replicar esse processo.

Se você chegou até aqui e quer que eu disponibilize o template que eu usei, comente abaixo — eu posso transformar isso em um pacote para download ou subir um repositório com instruções de deploy. E claro: se você gostou desse conteúdo, me ajude com um like, um comentário e se inscreva no canal — isso me ajuda a criar mais material prático e gratuito para você.

Abraço e até a próxima — vamos transformar ideias em sistemas reais com IA e Google APIs!

FAQ

1. O que é possível fazer com a API do Google Maps para cálculo de rotas?

Com a API do Google Maps você pode traçar rotas entre dois ou mais pontos, calcular distância, tempo estimado e até exibir múltiplas rotas alternativas. Integrando lógica de negócio, é possível calcular frete automaticamente para delivery, motoboy ou aplicativos de transporte.

2. Como calcular frete de motoboy usando Google Maps API?

Você pode criar uma fórmula simples que some uma taxa fixa com um valor por quilômetro rodado. Exemplo: R$5,00 de taxa fixa + R$2,00 por km. Com a Directions API você obtém a distância em metros, converte para km e aplica a fórmula. O valor final é exibido para o cliente junto com a rota.

3. Quais APIs do Google Maps eu preciso habilitar para calcular rotas?

As principais são: Maps JavaScript API (exibir o mapa) Directions API (traçar rotas) Distance Matrix API (distância/tempo em múltiplos pontos) Places API (autocomplete de endereços) Geocoding API (converter endereço em coordenadas, opcional)

4. O que fazer se o autocomplete de endereços não funcionar?

Esse erro é comum quando a Places API não está habilitada ou a chave de API está com restrições incorretas. Soluções: Habilitar a Places API no Google Cloud Console. Verificar se a chave de API corresponde ao projeto correto. Ajustar restrições de domínio/IP da chave.

5. Como proteger minha chave de API do Google Maps?

Restrinja o uso por domínio (referrer) ou IP. Nunca exponha sua chave em repositórios públicos. Configure alertas de faturamento no Google Cloud. Use variáveis de ambiente em produção em vez de expor diretamente no código.

6. É possível aumentar o valor do frete em dias de chuva?

Sim. Você pode integrar uma API de clima (Google Weather API ou OpenWeatherMap) e adicionar lógica condicional. Exemplo: se estiver chovendo, adicionar R$1,00 por km ao cálculo. Isso garante mais precisão nos custos de entrega.

7. Como exibir múltiplas rotas para o usuário escolher?

A Directions API permite ativar a opção alternatives=true. Assim você recebe até 3 rotas diferentes (mais rápida, mais curta, etc.). Cada rota pode ter seu custo calculado e o cliente escolhe a melhor opção.

8. Posso usar apenas HTML, JS e PHP para criar esse sistema?

Sim. Com HTML + JavaScript você já consegue integrar diretamente a API do Google Maps. Se quiser salvar pedidos ou rotas no servidor, pode adicionar PHP + MySQL. Isso é o suficiente para rodar em qualquer hospedagem cPanel, como a Napoleon Host.

9. Qual a vantagem de usar o WindSurf Editor nesse processo?

O WindSurf Editor integra IA (GPT-5 Codex, CloudSone 4.5, etc.) que gera o código automaticamente a partir de prompts em linguagem natural. Isso acelera o desenvolvimento e facilita para iniciantes que não dominam JavaScript ou APIs.

10. Como publicar meu sistema de rotas no cPanel?

Acesse o Gerenciador de Arquivos no cPanel. Envie seus arquivos (index.html, script.js, etc.). Ajuste a chave de API para aceitar o domínio. Teste acessando seudominio.com/rotas.

11. Quanto custa usar a API do Google Maps para rotas?

O Google oferece um crédito mensal gratuito de US$200, suficiente para a maioria dos pequenos projetos. Após isso, cada API tem um custo por requisição (exemplo: Directions API cobra por número de chamadas). É importante monitorar no painel de faturamento.

12. Quais melhorias posso implementar depois?

Otimizar rotas para múltiplas entregas (Delivery em lote). Criar um painel administrativo com histórico de rotas. Integrar login via Google (OAuth). Usar IA para prever atrasos com base em trânsito e clima. Adicionar gamificação e relatórios em tempo real.