1

Fala pessoal,

estou com dificuldades de integrar o Google maps no React. Vi muita gente com essa dúvida, apesar da documentação da api ser bem completa, a maioria dos exemplos que vi está dentro do modelo de classes ou usando alguma biblioteca de terceiros.

Alguém que já tenha tido essa experiência já fez isso usando Javascript puro?

Segue o código do meu componente:

import React from 'react';


const OverviewMap = () => {

  const script = document.createElement('script');
  script.defer = true;
  script.src = 'https://maps.googleapis.com/maps/api/js?key=CHAVE_AQUI'
  
  document.head.appendChild(script)
  
  const map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8    
    })  
  
  return (
    <>
      <h1>Olá mundo!</h1>
      <div id='map'>
        {map}
      </div>
    </>
  );

};

export default OverviewMap;

Como fazer com que o mapa seja instanciado no momento em que a página carrega? E porquê eu tenho esse erro 'cannot find name google'?

2
  • observou o exemplo que eu postei?
    – novic
    Commented 17/09/2020 às 0:33
  • 1
    @VirgilioNovic sim, acabei de ler amigo! Consegui renderizar o mapa depois de algum esforço, obrigado! :D. Achei as bibliotecas um pouco instáveis, inclusive com problemas de manutenação. Preferi usar algo mais genérico, apesar de ser mais verboso, né?
    – Curi
    Commented 17/09/2020 às 0:59

1 Resposta 1

1

Dessa forma existe alguns problemas um deles é que o componente ainda não está carregado e com isso as variáveis também não, fazer do jeito normal do javascript é muito problemático, deve seguir como o ReactJs está projetado, enfim o correto deve seguir o seguintes passos ou modelo:

No arquivo que está dentro da pasta public/ o index.html adicione a referencia dentro da tag <head>:

<script src="https://maps.googleapis.com/maps/api/js?key=key"></script> 

após essa referencia agora é a hora de preparar o componente:

import React, { useEffect, useRef } from 'react';

function MapView() {
  const mapRef = useRef();
  useEffect(() => {
    new window.google.maps.Map(mapRef.current, {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
    });
  }, []);
  return <div ref={mapRef} style={{ width: 1000, height: 1000 }}></div>;
}

export default Map;

explicado que no useEffect vai ser responsável que no momento após o carregamento do componente execute e carregue as funções da instância new window.google.maps.Map, dentro desse codigo no seu construtor indique o objeto a ser carregado o mapa então tem que usar o useRef para passar a referencia a </div> que vai carregar o mapa e a mesma deve ter tamanho (largura e altura) para exibir o mapa.

Do jeito que está na sua pergunta eu consegui fazer funcionar, mas, tem muita gambiarra e tem que colocar um setTimeout para carregar mediante a um determinado tempo, o problema é se falhar, então a melhor forma é a de cima ou com componentes prontos, exemplo:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .