How to use the Google Maps API with React.js

jessicabetts on April 25, 2019

While trying to implement the google maps API in a personal react.js project I came across a couple of examples that I found to be very complicat... [Read Full]
Editor guide

Thanks a lot for this!
I had to do a little research for the styling since I wanted to use their custom json style files.
A little tip for those who want to do this too : save it as a defaultProps and they use it as shown above ;)


Hey ! Can you tell me more about this ? Where do you pass defaultProps ?


Here is a link to the file I used it in, it will help you out I think : github.com/titivermeesch/neighbora...


Thanks a lot, it helped me !
Le Bonjour à la Belgique :)


Thanks a lot. It's very easy to follow and implement.


Glad I can help!


Hey! Thanks a lot for the Maps implementation.
I was wondering how Polygon can be used from google-maps-react to mark a triangle on the map using 3 lat and long coordinates. could you please help me out with that?
thanks in advance :)


Is it possible to use legends on it.


Not sure! Never tried!


Very well done! Thanks for sharing.


Nicely done! Very clear and to the ponit.


Thank you!


Thanks for it.


Great tutorial, thank you!


hey, can someone please help me to highlight the marker on click event outside the map? thanks in advance.


I am trying to implement the solution you have above, just with custom markers that are my own react components. Can anyone suggest or point me towards something I can follow?


how to implement MarkerClusterer in react


export default GoogleApiWrapper({
apiKey: 'TOKEN HERE'

Where can i find this file? do i have to create one myself?

What is the content of this.props.google ?


If you are unsure about what export default is I'd read this:



Hey, thanks a lot for this post. But, How to set the maps to become 'position:relative' to my custom div? Cause it's kinda frustrating because it is by default 'position: absolute'. Thanks again!


Add a container around it. Set the container around it to position relative and 100% width, height.

div:first-of-type {
position: relative;
width: 100%;
height: 100%;


hello, excuse me I did everything perfectly but there is still a JavaScript console problem even though I have a JavaScript API key in place. Can you please help


Hey Jessica, thanks for the tutorial. You've quite a lot here.

By any chance have you ever tried configuring autocomplete/places with the markers using google maps react ?


please write about google address auto suggestion fill form filed in react


Peace .. thank you .. that helps me a lot in 2020


Hi my marker class doesn't show on the map. It's rendered but it isnt appearing on the map. Should I be rendering the marker component inside of the map component?


If you observe step 6, the Marker Component is inside the Map Component.

Code of Conduct Report abuse