How to run Google Maps API in React 18 ?

#react #googlemapsapi #googlecloud #javascript

Hi guys, I've been trying to get a new React project running with the Google Maps API (https://www.npmjs.com/package/google-map-react) for several hours now. Can someone help me?
!
Image description

Top comments (3)

Rense Bakker • Aug 21 '22

Are you sure you need that library? It's for a pretty specific use-case, rendering your own React components on a google map.

If you want to use the google maps API in a React application: developers.google.com/maps/documen...

ReneKutter • Aug 21 '22

I would like to use the library I mentioned because it is used in every tutorial on YouTube. This is important to me because I'm just beginning to learn ReactJS. Alternatively, I would also use React 17, I just need a working installation to learn.

Rense Bakker • Aug 22 '22

Here's a video tutorial on how to use the Google Maps React API:
youtube.com/watch?v=9e-5QHpadi0

Don't worry too much about the differences between React 17 and React 18. For a beginner, there arent really any except for the way in which you render your application:

// React 17
ReactDOM.render(<App />, document.getElementById('root'))

// React 18
ReactDOM.createRoot(document.getElementById('root')!).render(<App />)

DEV Community

How to run Google Maps API in React 18 ?

Top comments (3)

Read next

Learn How To Build A Translator App With API Using HTML, CSS, And JavaScript

Unlock Security: OTP Generator with Email Verification using JavaScript

Day 4: Enhancing UX with a Custom Cursor Using GSAP 🚀🎨

Closures in JS🤯