DEV Community

ReneKutter
ReneKutter

Posted on

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)

Collapse
 
brense profile image
Rense Bakker •

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...

Collapse
 
renekutter profile image
ReneKutter •

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.

Collapse
 
brense profile image
Rense Bakker •

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 />)
Enter fullscreen mode Exit fullscreen mode

Read next

martygo profile image

The best React Form's validation libraries ✅🥇

Martins Gouveia -

thinkthroo profile image

Usage of Dexie, an IndexedDB wrapper, in Lobechat

thinkThroo -

souravvmishra profile image

Adding Google Authentication in Next.js 14 with App Router: A Beginner-Friendly Guide

Sourav Mishra -

mayank_mohapatra profile image

Creating a Multilingual Expense Tracker with Tolgee

Mayank Mohapatra -