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'?