DEV Community

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...
Collapse
 
titivermeesch profile image
PlayBossWar

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 ;)

Collapse
 
cuzureau profile image
Christophe Uzureau

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

Collapse
 
titivermeesch profile image
PlayBossWar

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

Thread Thread
 
Sloan, the sloth mascot
Comment deleted
 
cuzureau profile image
Christophe Uzureau • Edited

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

Collapse
 
mqshaikh8 profile image
Mohammed Shaikh

thanks

Collapse
 
vitarox profile image
VitaRox

Great tutorial, thank you!

Collapse
 
codingmage profile image
Yusuf Kehinde Hussein

Wow this is what I have been looking forrrrrr

Collapse
 
mrmicrowaveoven profile image
Benjamin Zagorski

Ugh, thanks so much for making this. The examples on the Google Maps docs were confusing and dumb. Got it done in 2 minutes once I found this.

Collapse
 
am_stevenanongo profile image
stevenanongo

This was really helpful to me thanks a lot

Collapse
 
sanjayjb profile image
sanjayjb

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 :)

Collapse
 
dschulz1227 profile image
Damon Schulz

I am trying to hide my API key by putting it in a default.json in a Config folder and hiding it. it's under my 'src' folder, but when I go to import it to my Map component, it says it is outside of the project '/src' directory. I've tried numerous ways, do you have any idea what I should do?

Collapse
 
sarabs3 profile image
Sarabjeet Singh

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

Collapse
 
jessicabetts profile image
jessicabetts

Glad I can help!

Collapse
 
sayanmondal2098 profile image
PH3N1X

Thanks for it.

Collapse
 
jothamardel profile image
jothamardel

Awesome.

Collapse
 
fra profile image
Flavio Fraschetti

Thank you!

Collapse
 
shrsabin profile image
Sabin Stha

Is it possible to use legends on it.

Collapse
 
jessicabetts profile image
jessicabetts

Not sure! Never tried!

Collapse
 
arinze090 profile image
arinze090

For some weird reason, my browser keeps saying “Loading maps”

Did exactly the same thing as displayed.
Any help ?

Collapse
 
richwag profile image
Rich Wagenknecht

Nicely done! Very clear and to the ponit.

Collapse
 
jessicabetts profile image
jessicabetts

Thank you!

Collapse
 
hawicaesar profile image
HawiCaesar

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 ?

Collapse
 
barcarel profile image
anncarel

Very well done! Thanks for sharing.

Collapse
 
rosscatley72 profile image
Ross Catley

Great article. I'm stuck on a specific next step, I wonder if anyone can help me.

I've added a polyline to the map, and want a user to be able to edit it. That bit is fairly straightforward you use the {Polyline} component and add it to the map the same way as the Marker in the article, and set the editing prop to true.

What I've been trying to find the answer to for days now is how I then access the getPath() method once the user has finished editing the line to access the LatLng points that the user has edited on the line.

I've tried adding a ref={} on the polyline itself, and although I can access the coordinates of the line from that, after editing the coordinates return the original coordinates and not the user edited LatLng of the updated polyline.

I'm trying to keep to using functional hooks, and all the examples I can find (and there are only a couple of them) seem to use the native Javascript API within classes rather than a react component. If that's the only way to do it then I'll stick to that, but I can't find any documentation that talks about the React library and the getPath() method, or the "set_at" or "insert_at" events that fire on the path of the polyline when a user moves or adds a new point.

Has anyone done this or knows how to do it, I would be really grateful for any help.

Collapse
 
btcbot_in profile image
BtcHodler

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

Collapse
 
urielbitton profile image
Uriel Bitton

I followed this exactly, but all i get is "Map loading..." any ideas why?

Collapse
 
arinze090 profile image
arinze090

Same with me too. Have you been able to resolve it ?

Collapse
 
endyinthesun profile image
Vlad Kalenikov

Hi, thnx very much for your guide. I have a question - how to add a label nearby marker? I try to add "label" properties, but I think that's not right because it isn't in documentation.

Collapse
 
sandy1565 profile image
sandy1565

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

Collapse
 
matt_bevis16 profile image
Matthew Bevis

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?

Collapse
 
bharathnallamothu profile image
bhaRATh

how to implement MarkerClusterer in react

Collapse
 
kazujini profile image
KazuJin Initiative • Edited

export default GoogleApiWrapper({
apiKey: 'TOKEN HERE'
})(MapContainer);

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

What is the content of this.props.google ?

Collapse
 
jessicabetts profile image
jessicabetts

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

stackoverflow.com/questions/364265...

Collapse
 
mardiansn profile image
mardiansn

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!

Collapse
 
reangeloj profile image
Re-Angelo Jarvis

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%;
}

Collapse
 
adamwakif profile image
Adam WaƘiƑ

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

Collapse
 
ashadjohnson profile image
Ashad

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?

Collapse
 
jessicabetts profile image
jessicabetts

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

Collapse
 
mosescode1 profile image
Moses

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

Collapse
 
saviocarval profile image
Saviocarval

how can i add an InfoWindow

Collapse
 
sobowalebukola profile image
Sobowalebukola
Collapse
 
kamalhossain profile image
Kamal Hossain

Is it possible to add direction feature?

Collapse
 
osamayousuf90 profile image
Osama Yousuf

Hey jessicabetts thanks for sharing code you save my life really it help alot for me...i have question if i want to add window when i click on icons how can i ? someone pls explain

Collapse
 
sweetestshuga profile image
Eze Sugar 👩‍💻

There is an undeclared veriable as mapcontainer, and it really throws up errors, i wish to know more on that