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 Home

CodePudding user response：

I 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.