I really need some help about this. My react project is not working with react google maps that well. I tried my other projects that has it and still works but now I am creating a new one it does not work. Whenever I look at the google console, the requests are not adding up and my react project is still blank. I have also already setted in css the div's width to height: 100vh and width: 100%
Component Code
import React, { useState, useEffect } from 'react'
import '../css/Home.css';
import { GoogleMap, withScriptjs, withGoogleMap, Marker, InfoWindow } from 'react-google-maps'
import Axios from 'axios';
function Map(){
const [coords, setcoords] = useState({ lat: "", lng: "" });
// navigator.geolocation.watchPosition((position) => {
// console.log(position);
// })
return(
<GoogleMap
defaultZoom={15}
defaultCenter={{ lat: 14.706010, lng: 121.086983 }}
>
</GoogleMap>
)
}
const WrappedMap = withScriptjs(withGoogleMap(Map));
function Home() {
return (
<div id='div_home'>
<WrappedMap
googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=MY_KEY_I_JUST_REMOVED_IT`}
loadingElement={<div style={{height: '100%'}} />}
containerElement={<div style={{height: '100%'}} />}
mapElement={<div style={{height: '100%'}} />}
/>
</div>
)
}
export default HomeI have solved my issue. Turns out that I have a react and react-dom v.18 something and I installed the 17.0.2 version and it totally worked! Just having troubles with the version.