React Google Maps has issues with "loading" state when using StandaloneSearchBox component
P粉138711794
2023-08-29 09:07:27
<p>I have a page in my React JS 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 (<code>StandaloneSearchBox</code>) on the page because it stays in the "loading" state. This is my code: </p>
<pre class="brush:php;toolbar:false;">import {useState, useEffect} from 'react'
import { GoogleMap, StandaloneSearchBox, LoadScript } from '@react-google-maps/api';
const initialState = {
company: '',
email: '',
password: '',
isMember: true,
}
const Register = () => {
const mapContainerStyle = {
height: "400px",
width: "800px"
}
const center = {
lat: -3.745,
lng: -38.523
};
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)
}
const handleLoad = ref => this.searchBox = ref;
const handlePlacesChanged = () => console.log(this.searchBox.getPlaces());
return (
<body class="page-template-default page page-id-13">
<header class="site-header">
<div class="container">
<h1 class="school-logo-text float-left"><a href="/landing"><strong>Direct</strong> Connection</a></h1>
<div class="site-header__util">
</div>
</div>
</header>
<div class="page-banner">
<div class="page-banner__bg-image" style={ { backgroundImage: "url('connection.jpg')" } }></div>
<div class="page-banner__content container container--narrow">
<h1 class="page-banner__title">Register</h1>
<div class="page-banner__intro">
<p></p>
</div>
</div>
</div>
<div class="container container--narrow page-section">
<h2 class="headline headline--tiny">Want to join and connect with companies? Sign up and get your company out there:</h2>
<label class="header">Profile Photo:</label>
<input id="image" type="file" name="profile_photo" placeholder="Photo" required="" capture></input>
<label class="company-name">Company Name</label>
<div class="company-input">
<input text="headline headline--input" placeholder="Enter Company"></input>
</div>
<label class="company-email">Email</label>
<div class="email-input">
<input text="headline headline--input" placeholder="Enter Email"></input>
</div>
<label class="company-map">Map</label>
<div class="map-input">
<LoadScript
googleMapsApiKey='API_HERE'>
<GoogleMap
id="map"
mapContainerStyle={mapContainerStyle}
center={center}
zoom={10}
>
<StandaloneSearchBox
onLoad={handleLoad}
onPlacesChanged={handlePlacesChanged}
>
<input
type="text"
placeholder="Customized your placeholder"
style={{
boxSizing: `border-box`,
border: `1px solid transparent`,
width: `240px`,
height: `32px`,
padding: `0 12px`,
borderRadius: `3px`,
boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
fontSize: `14px`,
outline: `none`,
textOverflow: `ellipses`,
position: "absolute",
left: "50%",
marginLeft: "-120px"
}}
/>
</StandaloneSearchBox>
</GoogleMap>
</LoadScript>
</div>
</div>
<footer class="site-footer">
<div class="site-footer__inner container container--narrow">
<div class="group">
<div class="site-footer__col-one">
<h1 class="school-logo-text school-logo-text--alt-color">
<a href="/landing"><strong>Direct</strong> Connection</a>
</h1>
<p><a class="site-footer__link" href="index.html">706-263-0175</a></p>
</div>
</div>
</div>
</footer>
</body>
)
}
export default Register</pre>
<p>I tried adding more imports, such as from the <code>ScriptLoaded</code> file in the ../api/docs folder, but this caused the entire page to go blank. If I remove the <code>StandaloneSearchBox</code> from the <code>import {} from '@react-google-maps/api'</code> and the <code>LoadScript GoogleMap</code> code, It displays normally on the page, just without the search bar and markup to search for addresses (<code>StandaloneSearchBox</code>)</p>
1
365
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 theLoadScriptcode 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 (
<>
)
}
export default RegisterDirect Connection
Register
Want to join and connect with companies? Sign up and get your company out there: