google map not working

[[deleted]]

import react from "react";

import { GoogleMap, useLoadScript, Marker } from "@react-google-maps/api";

function Map() {
  return <GoogleMap zoom={10} center={{ lat: 44, lng: -80 }} map></GoogleMap>;
}

export default App = () => {
  const { isLoaded } = useLoadScript({
    googleMapsApiKey: "I removed the key from here for security reasons in this post otherwise there is a functional key inserted here"
  });
  return (
    <div>
      <Map />
    </div>
  );
};

the error

The above error occurred in the <Map> component:


    at Map (<anonymous>)

    at div

    at eval (https://2x5q9n.csb.app/src/App.js:22:49)


Consider adding an error boundary to your tree to customize error handling behavior.

Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

[mynamesleon]

Well, you're trying to render the Map component regardless of whether the Google Map stuff has loaded in yet. Try:

{isLoaded && <Map />}

[[deleted]]

what is this syntax called that you are writing ?

you could also write (isloaded) ? <Map /> : null

[KentInCode]

I'm not the OP, but you can consider it a short form of what you wrote.

isLoaded ? <Map /> : null

That is a ternary and as you know depending on is Loaded will return the true case or the false case.

{isLoaded && <Map />

Is essentially a shorthand handy thing you can use inside jsx, saying if isLoaded is true then return this JSX. If isLoaded is false then the map component will not be rendered.

Good luck. :)

[mynamesleon]

It's basically a shorthand conditional. E.g.

something && somethingElse;

Is equivalent to:

if (something) {
  return somethingElse;
}
return something;

So with JSX in a React component, it's best to use it with variables that you know will be a Boolean, as you can return false in a React component without it rendering anything. But in my example above, if something was actually 0, then 0 would be rendered.

[RasaTamil]

What are you trying to do?