React Google Maps has issues with "loading" state when using StandaloneSearchBox component

Question

I have a page in my ReactJS page that I'm trying to allow companies to register with my site and add their location so other companies can come rent, buy, etc. I also need to add markup if possible. I have put a Google Map on my page, however, I cannot put the search bar (StandaloneSearchBox) on the page because it stays in "loading" state. This is my code: import{useState,useEffect}from'react'import{Go

P粉810050669 · Answer

I think the problem is that there is no library. In order to display the search box, a library is necessary. const lib = ['places']; Set places to a library that must be added to the LoadScript code that contains your API key. The updated code should have fixed the issue:

import {useState, useEffect } from 'react'
import { GoogleMap, LoadScript, StandaloneSearchBox } from '@react-google-maps/api'
const lib = ['places'];
const mapContainerStyle = {
  height: "400px",
  width: "800px"
}

const center = {
  lat: -3.745,
  lng: -38.523
};
  
const position = {
  lat: 37.772,
  lng: -122.214
}


const initialState = {
  company: '',
  email: '',
  password: '',
  isMember: true,
}

  const Register = () => {

    
    const [searchBox, setSearchBox] = useState(null);

  const handlePlacesChanged = () => console.log(searchBox.getPlaces());
  const handleLoad = ref => {
    setSearchBox(ref);
  };

    

  const [values, setValues] = useState(initialState)

  // global state and useNavigate
  const handleChange = (e) => {
    console.log(e.target)
  }

  const onSubmit = (e) => {
    e.preventDefault()
    console.log(e.target)
  }

    
      return (
        
        
              
              Direct Connection
                         
                                        
                
                

    
     
      
        Register
        
            
        
      
    


  Want to join and connect with companies? Sign up and get your company out there:
  
    Profile Photo:
      
    Company Name
      
        
      
    Email
          
          
          

     Map   

    
  
    
        
          <>
           
          
          
        
        
        

          
     

    
                  
                    
                      
                        
                          Direct Connection
                        
                        706-263-0175
                      
                    
                  
            


    )
}
  

export default Register

React Google Maps has issues with "loading" state when using StandaloneSearchBox component

reply all(1)I'll reply