[RESOLVIDO]Capturar em tempo real a posição e a movimentação do marker do Google Maps no ReactJS

Front-end
#1

Ótimo dia!

Podem me ajudar em uma questão por gentileza?

Estou fazendo um App para capturar em tempo real a posição e a movimentação do marker do Google Maps no ReactJS, similar ao waze, whats app, que mostra o usuário em movimento, mas estou apanhando muito nisso, já segui a documentação do Google Maps, Codelabs, diversos tutoriais etc…mas sem sucesso, segue meu código:

import { GoogleMap, Marker, useJsApiLoader } from '@react-google-maps/api';

import './styles.css';


const MapPage = () => {
  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: 'MinhaAPIKey',
  });
  
  const pos = {
    lat: -23.422284,
    lng: -45.057749,
  }

  return (
    
      <div className="map">
        {isLoaded ? (
          <GoogleMap
            mapContainerStyle={{ width: '100%', height: '100%' }}
            center={pos}
            zoom={15}
          >
            <Marker position={pos} 
            options={{
              label:{
                text:"user",
                className:"map-marker",
              },
            }}
            />
          </GoogleMap>
        ) : (
          <></>
        )}
      </div>
  );
};

export default MapPage;

Já tentei usar os React Hooks, hora sim, hora também da conflito em algum ponto e preciso voltar a estaca a zero, o código acima esta funcional, aparece o mapa, aparece o marker, mas esta estático, gostaria de deixá-lo dinâmico, acompanhando a movimentação do usuário.

Gratidão por toda ajuda!

#2

Você pode usar a API navigator.geolocation do próprio browser.

Importante:

  • Só vai funcionar utilizando SSL (HTTPS) ou localhost.
  • Quando fiz a implementação à um tempo atrás disso, não funcionava com o navegador/webapp em background. Caso vc queira isso, é bom fazer o teste tb.

Como usar:

    //verifica se tem geoLocation disponível
    if ("geolocation" in navigator) {
      console.log("Geolocation disponível");
    } else {
      console.log("Navegador não suporta geolocation");
    }

se tiver disponível vc pega as coordenadas

    //pega a posição atual do usuário
    navigator.geolocation.getCurrentPosition(function(position) {
      console.log("Latitude :", position.coords.latitude);
      console.log("Longitude :", position.coords.longitude);
    });

e pra fazer isso em tempo real:

    if (navigator.geolocation) {
      navigator.geolocation.watchPosition(function(position) {
        console.log("Latitude :", position.coords.latitude);
        console.log("Longitude :", position.coords.longitude);
      });
    }

Agora pra jogar pro React não tem segredo, ao invés de mostrar o console.log, você seta as coordenadas no useState e depois seta o state no Marker e no GoogleMap

const [coords, setCoords] = useState({lat: -23.42, lng: -45.05}); 

//...
useEffect(() => {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(function(position) {
      setCoords({lat: position.coords.latitude, lng: position.coords.longitude});
      //console.log("Latitude :", position.coords.latitude);
      //console.log("Longitude :", position.coords.longitude);
    });
  }
}, []);

//...

//usando seu proprio código 
return (
  <div className="map">
    {isLoaded ? (
      <GoogleMap
        mapContainerStyle={{ width: '100%', height: '100%' }}
        center={coords}
        zoom={15}
      >
        <Marker position={coords} 
            options={{
               label:{
                  text:"user",
                  className:"map-marker",
               },
            }}
         />
      </GoogleMap>
    ) : (
      <></>
    )}
  </div>
);

Pra cancelar o Geolocation.watchPosition(), vc pode usar o Geolocation.clearWatch()

1 curtida
#3

Gratidão Abner @rodriguesabner, vou implementar com base na sua dica de ouro e testar, dando tudo certo e acredito que agora vai depois de muito apanhar…volto aqui para te falar e por uma menção positiva.

1 curtida
#4

Ótima noite @rodriguesabner!
Perdoe-me a demora, é a correria do dia-a-dia…deu muito certo sua dica!!! Já esta pegando a localização do usuário, como é webapp tá pegando a localização pelo navegador…

Gratidão!!!

1 curtida