Map not shown on NextJS app #569
Description
Hi! I used the example to wrap my component:
import '../../styles/globals.css'
import type { AppProps } from 'next/app'
import AuthProvider from '../providers/AuthProvider'
import "antd/dist/antd.css"
import MenuProvider from '../providers/MenuProvider';
import Script from 'next/script';
import { Wrapper, Status } from "@googlemaps/react-wrapper";
function MyApp({ Component, pageProps }: AppProps) {
const render = (status: Status) => {
console.log("STATUS MAPS", status )
return <h1>{status}</h1>;
};
return (
<div>
<AuthProvider>
<MenuProvider>
<Wrapper render={render} apiKey={"MYKEY"}>
<Component {...pageProps} />
</Wrapper>
</MenuProvider>
</AuthProvider>
</div>
)
}
export default MyApp
and my home:
import React, { useEffect, useRef } from 'react';
import type { NextPage } from 'next'
import Head from 'next/head'
const Home: NextPage = () => {
const ref = React.useRef<HTMLDivElement>(null);
const [map, setMap] = React.useState<google.maps.Map>();
React.useEffect(() => {
if (ref.current && !map) {
setMap(new window.google.maps.Map(ref.current, {}));
}
}, [ref, map]);
return (
<div>
<Head>
<title>Home</title>
</Head>
<h1>HOME</h1>
{/* <div style={{width: "100%", height: "100%"}} ref={ref} id="map" /> */}
<div ref={ref} />
</div>
)
}
export default Home
Just the basic to show the map.
The status is ever Loading. I look into Google Maps Api and it has requested many times (as I refresh the page), so, the wrapper and the api is working.
But in the home screen I cant see anything.
I'm using NextJS. IS there.a problem? Can anyone help?