DEV Community

How to Integrate the Google Maps API with React.js

TalOrlanczyk on August 29, 2020

In my journey to find how to integrate Google Maps with ReactJS, I stumble a lot of articles recommended to use the npm google-maps-react. ...
Collapse
 
masakudamatsu profile image
Masa Kudamatsu

One year passed since your article was written, and it's still true that most articles on using Google Maps APIs with React assume the use of google-map-react.

Like you I try not to rely on third-party libraries. And also like you, after figuring out how, I've written a similar article to yours, but in my case with Next.js. ;-)
dev.to/masakudamatsu/3-gotchas-of-...

Collapse
 
talorlanczyk profile image
TalOrlanczyk

Thanks I read your article its great

Collapse
 
deadmor39411089 profile image
❌ Dead Moroz ❌

I can only second Mulweli's comment. The article not only is extremely hard to follow but has some serious errors in code.

  • unnecessary pair of closing brackets }) in GoogleMap function;
  • undefined variable googleMap in createGoogleMap function;
  • undefined method setGoogleMapInfo in getLatLng function.

It goes without saying that the code is not properly formatted and - as the result - is quite hard to understand. DEV.TO says you have 4 years of experience in FE technologies. I can only assume that actual coding is not included in this timeframe, otherwise it's quite hard to understand why such experienced developer is writing such code and posting it publicly. Sorry if this offended you in some way.

Collapse
 
talorlanczyk profile image
TalOrlanczyk • Edited

When I wrote this I didn't notice those mistakes, I code all those 4 years thank you for showing me the problem so I can edit it.
next time I will look up for those mistakes.
it's was just a problem of copy and paste from my source code because I split the code a little so the Component itself will look much more cleaner. so I had to build it up by blocks and I see now it was a big mistake

Collapse
 
ajibadeabd profile image
ajibadeabd

You should have added how to get one's current location

Collapse
 
talorlanczyk profile image
TalOrlanczyk

Great idea.
even thought to make this basically there are services that by an api tel you where you are but can be un accurate
and by the user approve the geolocation
like in mobile that you need to approve location to access or it wont work

Collapse
 
ajibadeabd profile image
ajibadeabd

It will work if the user approve it

Thread Thread
 
talorlanczyk profile image
TalOrlanczyk

As almost every api.
Basically you get lat and lng and then you put it as cord

Collapse
 
genecodefx profile image
Mulweli

Very very hard to follow

Collapse
 
talorlanczyk profile image
TalOrlanczyk

Thanks for your comment I would like to know what makes you feel like this, so I can change how I write in the future

Collapse
 
harrydeanstanton profile image
Jan Ancukiewicz

Great stuff! Is it possible to display two maps with this component (with different centers), or at least two markers?

Collapse
 
talorlanczyk profile image
TalOrlanczyk

I think you can do more then one just add new windows.google.maps
Didn't do it but its looks like it gonna work like this

Collapse
 
marcosmol204 profile image
Marcos Molina

Amazing post!

Collapse
 
yanshiyason profile image
Shiyason

Thank you for sharing! Super useful!