import { ReactNode } from 'react';
import { useGoogleMapsScript, Libraries } from 'use-google-maps-script';
export function App() {
return (
<LoadScript googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_API_KEY}>
<SearchBox />
</LoadScript>
);
}
interface LoadScriptProps {
googleMapsApiKey: string;
children: ReactNode;
}
const libraries: Libraries = ['places'];
function LoadScript({ googleMapsApiKey, children }: LoadScriptProps) {
const { isLoaded, loadError } = useLoadScript({
googleMapsApiKey,
libraries,
});
if (!isLoaded) return <div>Loading script</div>;
if (loadError) return <div>Error loading script</div>;
return children;
}
function SearchBox() {
return <div>Search Box which relies on google maps script.</div>;
}