Olá comunidade!
Tenho um mapa no meu site que o objetivo e adicionar novos endereços a ele.
*Estou utilizando a API do Google maps para mostrar localizações que estão no meu banco de dados. ( Consegui fazer e os endereços do banco de dados estão sendo mostrados no maps HTML).
*No meu banco de dados tenho os campos: endereço, latitude e longitude.
*A input "endereço" adiciona o nome do lugar ao banco de dados. Mas só a input não basta para que os endereços apareçam no maps do site, sendo nescessário adiciona latitude e longitude manualmente abrindo o banco de dados.
Em suma, quero criar um jeito que só basta adicionar o endereço e a latitude e longitude sejam preenchidas automaticamente com as coordenadas do endereço escrito.
Gostaria de saber se isso é possível. Obrigado!
Então vamos lá, você precisa obter então as coordenadas geográficas utilizando algum método, de preferência o Google Maps API, já que você deve ter sua API Key e etc.
Vá em Velo Tools e adicione sua API Key lá no Gerenciador de Segredos, clique em Salvar um Novo Segredo, chame-o de googleMaps.
Aí você vai precisar criar um arquivo no backend chamado google.jsw. Lá você vai criar um código pra buscar essas coordenadas de acordo com o local indicado, criando uma função (que eu dei o nome de findCoordenates()):
import { getSecret } from 'wix-secrets-backend' import { fetch } from 'wix-fetch' export async function findCoordenates(address) { //Primeiro você busca seu segredo const secret = await getSecret('googleMaps') //Depois você cria a URL que vai acessar a API do Google const baseURL = 'https://maps.googleapis.com/maps/api/geocode/json?address=' //Sua key mais a tag const apiKey = `&key=${secret}` //A URL completa ficou no fullURL const fullURL = `${baseURL}${address}${apiKey}` //Agora você faz o fetch (pega!) das informações no API do Google Maps. const find = await fetch(fullURL, { method: 'get' }) .then(response => response.json()) let location //Se o resultado for OK, ele vai pegar o primeiro resultado e retornar o objeto //A latitude e longitude se encontram em geometry e depois location if (find.status === 'OK') location = find.results[0].geometry.location //Aqui você retorna as coordenadas para alguma variável, lá onde você chamou essa função. return location }
Aí na página que você quer receber o resultado da busca, você coloca um input que vai receber a informação, fiz um exemplo aqui onde o text recebe as coordenadas.
//Importa a função criada no backend import { findCoordenates } from 'backend/google' $w.onReady(() => { //Quando a página ficar pronta... $w('#btnFind').onClick(async () => { //Após o click let address = $w('#iptAddress').value //Pega o valor do address dentro do input const find = await findCoordenates(address) //Trata o resulta da forma que você quiser $w('#txtLat').text = find.lat.toString() $w('#txtLng').text = find.lng.toString() }) })
Com isso você já consegue ter uma ideia do que fazer. Me avise se precisar de algo mais.