I made a brand new version showing both Google Maps and Google Places in React together for 2020... new packages, using hooks and modern react. Check it out! th-cam.com/video/WZcxJGmLbSo/w-d-xo.html Check out my new course called Next Level Next.js! A full stack course covering GraphQL, TypeScript, Apollo, Prisma, auth and lots more! next.leighhalliday.com
Leigh una pregunta hay forma de filtrar lugares especiales, por ejemplo hospitales con Google place, es que necesito terminado un proyecto y no encuentro la forma de filtrar hospitales y trazar una ruta
Thank you so much Nikhilesh! I have a never version of this video which covers a different library and also google places if you're interested! th-cam.com/video/WZcxJGmLbSo/w-d-xo.html
This is exactly what I was looking for! I'm working on a Street Trees project with Vancouver's Open Data. Thank you so much! Explained very well. Keep up the good work.
Great tutorial! Thanks for sharing! I’ve been struggling with this all day, and here you made it look so easy, and did it all in 25 minutes. 😂 Wish I’d have found this earlier. Look forward to watching your other tutorials.
literally you made my day. I go through this and succeed in showing the map and sweeping through different props.. I will soon get used to it. Thanks a lot Sir.
What a great video! explain clearly and calmly, to the point ! this is exactly what I was looking for. you are better then the docs. I hope you will have a great year!
Hey ar! I have something even better for you... an updated 2020 version of this video! th-cam.com/video/WZcxJGmLbSo/w-d-xo.html And also how to add a backend and database to the map! th-cam.com/video/Bqacj0iOL68/w-d-xo.html
Thanks Lip!! I appreciate the support! By the way, there is a new/updated google maps in react video linked to in the description of this one, check it out!
Woohoo!! Thanks for watching, Deborah! You may like this newer Google Maps in React video as well! It covers some different topics and is a bit more modern: th-cam.com/video/WZcxJGmLbSo/w-d-xo.html
Hi Leigh, even after generating an API key, I am unable to populate the map - it shows Oops somthing went wromg after a second of display of the map. Can you help me figure out why is that happening?
I came across the same problem. If I used the key right in my googleMapURL it worked but as soon as I used the .env.local version by adding the ${process.env etc.} it gave me the oops error. I found in the create-react-app.dev/docs/adding-custom-environment-variables/ that you need to restart you dev server if it's running. That fixed the error for me. Good Luck!
@@vinnnnnny12345 on my Mac I press control and letter C while in the terminal to stop the server and then type npm start again and that should take care of it. I don't know the commands for windows... sorry
Hi Leigh. Thanks so much for the awesome video. I have one issue though. When I click a marker the first time an empty infoWindow appears over the corresponding infoWindow with the information. The other infoWindows open correctly when clicked and clear the intial infoWindow with the information but the empty infoWindow remains and needs to be manually exited.
@@leighhalliday Thanks for the response! This stack overflow post helped me solve it (in case someone else is stuck) stackoverflow.com/questions/62124512/react-google-maps-calls-empty-infowindow I implemented what i learned from it and then removed the position property from infowindow and it worked ! Thanks again
Hi , can I add number positioning in the markers...i mean numbers on markers? I tried passing child component inside marker component...but that did not work. could you please help.
I can't see how to do it with this google maps in react library, you may want to try this one: google-map-react, which seems to allow this a lot easier. Here's an article/video which uses numbers as the marker: www.leighhalliday.com/google-maps-clustering
Hey if you could make a video about adding triggers in Google maps, as in while our location is moving(vehicle) and as soon as we come near to that specific location it will get triggered and give us an alert.
Thank you so much for the tutorial!!! 🏆One question do you know how to trigger InfoWindow from separate element? Like I have these markers on map and on separate component like "list of parks" and when I click on park's name it should show (open InfoWindow) it on the map.
Спасибо! Очень понравился стиль изложения, все шаг за шагом с подробным объяснением. Жалко не наткнулся на это видео 1,5 года назад, как раз было пару прототипов с Google Maps.
Had to Google Translate this hehe... but thank you! Glad you enjoyed the video! There is a newer/updated one pinned to the top of this video if you'd like to check that out.
@@leighhalliday Еще раз СПАСИБО! Почитал tomchentw.github.io/react-google-maps/#documentation, вполне понятно стало (по крайней мере начало;) накидал пример padavan-itbeard.github.io/react_google_map/. Добавил ссылки на Вас и Ваш канал в readme %) p.s. Google Translate наше все!
Hey Anurag! The truth is that I'm not sure! It's not something I've worked with before. If you check it out, let me know what you find! If not, maybe that's a great idea for something I could dive into in the future.
I did not see where you got your skatepark data from, I am building a similar app where I plan on showing nearby basketball courts, I am having trouble with the nearbySearch function of the Google Places API
Hey Bartek! I got it from the city of Ottawa (Canada)... they had a website that listed it all as JSON data. Hmm... off the top of my head I'm not sure what the issue would be, but I didn't use the google places api in this vid, unless I am remembering incorrectly haha which is totally possible.
Hey Leigh! Hope your fine, I followed your toturial i have problem to access map object to add custom controls in map. This map object exist in withGoogleMap state but not in Map component
Hey Amir! Try using the ref prop on GoogleMap, it should give you access to the map. Search for the phrase "onMapMounted" on this page and you'll see some examples: tomchentw.github.io/react-google-maps
@@leighhalliday no :/ . But, I used google maps API for javascript and added it to my react project. You can handle whatever you want there. I think it is more customizable but you have to add more lines of code and understand hooks and react lifecycle if you want to manage infowindow, markers, etc. :)
Nice one. After creating my app, I didn't find a way to access to the original 'map' object, in order to call such methods like panTo. Do you have any idea of how to do that? Coudlnt find the right post in the net.
Hey Leigh! can u please make another video for further processing like route directions and alternative route,optimized route, just like route direction in UBER... using react-google-maps
Yup! For sure. It's just in React, and I have another video about Google Places, it's just a matter of combining them... maybe easier said than done but it is possible for sure.
@@leighhalliday Ok nice.. I am working on this project that requires me to fetch data from google places but looking for any tips or guidance how to get it done.
Thanks Leigh this is exactly what I needed, this has been invaluable for my uni project. One only thing I'm struggling with now is getting users to place their own marker on the map. How would I go about letting a user for instance add their own skatepark marker in an onClick event? I have the lat and lng posting to console onClick okay, but I can't seem to get a fresh marker to show.
Hi Halliday. Thanks for your awesome job. Here I have a question when using the update version @react-google-maps/api that how can I set the icon size of Marker because didn't find propery 'google' on window.(:
Hello Leigh, Very great tutorial. Actually, I was trying to build a Search bar to lookup the location names and render the pins conditionally only when the search matches. Could you please tell me how I go about that given your logic.Many thanks
Hey Siddharth! You might want to check out this video and take a stab at combining the places input and its results with how to render markers as shown in this video: th-cam.com/video/uJYqQdnw8LE/w-d-xo.html
Very helpful tutorial. Can i ask if its possible to also use the googlemaps feature to for example collect all the skatepark locations from the map to be put into say a database or object/store in order to list each of the skateparks on my website rather than showing the map (kinda like how information is taken from an API stored into a redux store or context api store and then dispatched onto the page in a list). Sorry if this makes zero sense lol
Hey Daré! Thanks for your comment. If I understand, I think you could tackle it a few ways. Instead of importing and using the file locally, you could fetch the JSON from its URL (link to data is in video description), and then once you have the data you could put it into a Redux store or however you want to store it. Once you have the data in your store, you could choose to list out the data rather than displaying it on a map. Orrrr... you might want to load the data into a database and fetch it from a Node server or something like that... it depends I guess what you want to do with the data in the list, if you want to be able to edit/manage the data, etc...
Hey, Leigh! It would be fantastic if you find the time to record a tutorial where you go over adding a search bar and filtering results on the map through specific queries!
Hi Leigh, Great video. I love your videos and how you explain things. I've watched a couple of other videos you've done and I like your style. By the way, do you know if Montreal has anything similar to what Ottawa is doing? I've been searching for something similar to what Ottawa is doing but no luck.
Hey Helio! I'm honestly not sure! If you find anything for Montreal or Toronto (where I live near), let me know :D Thanks for watching! I'm glad you are enjoying/learning from them.
Hi Iby! This is something specific to the city of Ottawa, Canada... but if you want basketball courts in Ottawa, here is the data: data.ottawa.ca/dataset/basketball-courts
@@leighhalliday It show the map first correctly and then the message show allover the sceen and the screen is black and they just say This is for developer Mode.
Sumair, did you get it working? Did you enable the "Maps JavaScript API"? Can you show me how you are embedding the key in your app? Does it give any other details in the browser console?
Leigh Halliday yes my .env file has the code inside with white text showing it’s not working properly, and when I wrote &key=REACT_APP_GOOGLE_KEY, it shows the entire thing In brown.
Hey Leigh, I posted a little while ago here but I had another question for you. I am running into an odd error where, if I load the map up in a thin screen, say a mobile phone view, and I expand it, there are blank white spaces where the map should be but does not go to. This does not happen when I refresh the page with the map open at the largest width and height. I can shrink it, expand it and those unrendered spaces do not appear. Any ideas? Please let me know! Thank you!
Hey Jake! Hmm... I went back and looked at the code, and I saw some funky things where I set the divs to have a height of 100% which doesn't make a ton of sense :D but I don't think that would be related to changing the width. I'm honestly not sure! Sorry...
Leigh Halliday thanks Leigh no problem. I actually was able to solve it. I had to create an event listener for a resize of the window, and then when it was trigged I called map.resize(). Question for you though: what’s the difference between ReactMapGL and ReactMapboxGl? Also, I can’t remember if this was for ReactMapGL or ReactMapboxGl or what, but I see a lot of mapboxs being instatiated as object first. Like: const mapbox = ReactMapGl({ ...params }), do you know the differences between that and the method you did in your video? Sorry for the long response, but I appreciate your videos! They are really great! :) keep it up!
Hey Jesper! If I'm being honest I would check out MapBox - th-cam.com/video/JJatzkPcmoI/w-d-xo.html if you're looking to dynamically control map with props/state... the Mapbox implementation is much more declarative where the state/props dictate the map... not so much with the google maps implementation. With google maps in React you're stuck with imperative methods like "panTo", so you have to watch for changes to your state/props and then call that method yourself rather than letting the state dictate the map directly.
@@leighhalliday Thanks for a quick reply, will definetly check out MapBox, i the meantime I got my own code running :D I used the google-maps-react package which had a center prop to its map view. That renders the new position.
Nice video thanks I used some of your code but it does not work its depreciated and I needed to add the "selectedPark" variable into the array argument of the useEffect hook so that the useEffect only gets called when the "selectedPark" variable changes.
Great video! I recently used this same google maps library on a project and I’m tired of seeing the warning about renaming componentWillMount. So I tried to update the code in node_modules but still getting this warning. Also, I can’t get the ref to the map to work, which I need for the getBound() function thanks!
Hey David! Thank you :) You may want to try a different maps/react library. This one has less downloads but gives you a ref to the map: www.npmjs.com/package/@react-google-maps/api and this one seems to give you access as well via a callback: www.npmjs.com/package/google-map-react
error: Legacy context API has been detected within a strict-mode tree. The old API will be supported in all 16.x releases, but applications using it should migrate to the new version. Please update the following components: withGoogleMap(Map) What can I do ?
Hey Leigh. It would be pretty cool if you demonstrated how to use the search to populate the map with markers. For example let's say that I want to show a map with all the local churches but I don't necessarily have the jason file to fill the information
Yes! Fine to use. Google maps hasn't changed that much recently. There are newer packages, but with much fewer downloads... feel free to try 'em out though :D Let me know if they work better than the one we covered. I wanted to cover the most popular one out there today even if it isn't the newest.
Thanks for the video. My application won't read the variable from the .env.local file without adding the line "require('dotenv').config()" to the App.js file. Do you know why this might be?
@@leighhalliday I've matched your naming convention. I had to run the "npm install env" command to get to that point. Sorry if this is elementary - if there are prerequisites not explicitly stated in the video, I'm not aware of them.
Hey Brandon! Nope, it's not elementary... I'm not sure why it isn't working :D Maybe take a look at this page and see if you pick up on something we didn't think of yet: create-react-app.dev/docs/adding-custom-environment-variables/
Sorry, I don't :D It'd be cool if something already exists, but if not, I would try to find out the bounding box of all the markers, and then see if there is a google maps function for zooming/panning for a certain bounding box.
Awesome tutorial man. This really helps the beginners.
Thank you, Apurv!
How more aweeesoome u can be ???? Tyyy so much for this!!! Much appreciated !!
Thank you! This couldn’t be more straightforward. I’m definitely refactoring my implementation to match your code!
I made a brand new version showing both Google Maps and Google Places in React together for 2020... new packages, using hooks and modern react. Check it out! th-cam.com/video/WZcxJGmLbSo/w-d-xo.html
Check out my new course called Next Level Next.js! A full stack course covering GraphQL, TypeScript, Apollo, Prisma, auth and lots more! next.leighhalliday.com
Leigh una pregunta hay forma de filtrar lugares especiales, por ejemplo hospitales con Google place, es que necesito terminado un proyecto y no encuentro la forma de filtrar hospitales y trazar una ruta
Thanks, Leigh Halliday. All your video tutorials are very clear, easy to follow and helpful.
Thank you so much Nikhilesh! I have a never version of this video which covers a different library and also google places if you're interested! th-cam.com/video/WZcxJGmLbSo/w-d-xo.html
Leigh Halliday 👍
This is exactly what I was looking for! I'm working on a Street Trees project with Vancouver's Open Data. Thank you so much! Explained very well. Keep up the good work.
Nice! That's awesome! :) Thank you for watching!!
THANK you SO much for this video, I completed my first personal project thanks to you!
Awesome!!! You did the hard work though, not me. Keep it up!!
Great tutorial! Thanks for sharing! I’ve been struggling with this all day, and here you made it look so easy, and did it all in 25 minutes. 😂 Wish I’d have found this earlier. Look forward to watching your other tutorials.
Thanks Lekker! Hope you enjoy some of the other ones... there are lots now!
Great !!! Super explaination Leigh 🙌
literally you made my day. I go through this and succeed in showing the map and sweeping through different props.. I will soon get used to it. Thanks a lot Sir.
Hey Humayun, I actually have a newer video covering react and google maps as well if you're interested :) th-cam.com/video/WZcxJGmLbSo/w-d-xo.html
Incredibly helpful! This was exactly what I was looking for
Awesome! I have a newer video about google maps too, it's linked to in this one, check it out!
What a great video! explain clearly and calmly, to the point ! this is exactly what I was looking for. you are better then the docs. I hope you will have a great year!
Thanks Daniel! 2021 is going to be great! I have a newer version of this video linked to from description if you're interested.
Very detailed and well explained, really impressed!
Exactly what I was looking for. Loved the tutorial. Thanks a lot:)
Thanks so much for this Leigh, I really found it helpful. You're a pleasure to watch!:)
Thanks Jeanne! I have a newer/updated video showing Google Maps if you'd like to check that out :) th-cam.com/video/WZcxJGmLbSo/w-d-xo.html
dude ... literally u explained all i wanted :))
Hey ar! I have something even better for you... an updated 2020 version of this video! th-cam.com/video/WZcxJGmLbSo/w-d-xo.html
And also how to add a backend and database to the map! th-cam.com/video/Bqacj0iOL68/w-d-xo.html
@@leighhalliday 😍😍😍😍
Thank you soo much... this was exactly what I needed. Keep the great work going.
Thanks Tarun! I have a newer video about Google maps I think in the description there is a link :)
@@leighhalliday thank I'll have a look
Oh dude you're simply a genius..!! Thanks for teach us that 💙💙
Awesome. The best tutorial. You saved my time. Good library
Thank you Сергей! Glad you are enjoying the videos!
This video is very good. It explained the concepts behind the code. And it helps a lot for my project. Thank you!
Thanks Roy!! I have a newer Google Maps video (linked to in description) if you'd like to check it out.
Thank you so much! Explained very well. Keep up the good work. Capo!!
Thank you, Juan!
Super awesome buddy! Thanks for the great tutorial!
:D Thanks Sepehr! Glad you enjoyed it.
Oh Man!!!!!! i really love you ,great job
Thank you Marina! I have a newer Google Maps video if you check the description :D
Thank you so much! You are a wonderful teacher. You just got another subscriber.
Thanks Lip!! I appreciate the support! By the way, there is a new/updated google maps in react video linked to in the description of this one, check it out!
This is brilliant, thank you so much! Literally the first tutorial that made me ACTUALLY understand React! You are awesome, I really learnt a lot!
Woohoo!! Thanks for watching, Deborah! You may like this newer Google Maps in React video as well! It covers some different topics and is a bit more modern: th-cam.com/video/WZcxJGmLbSo/w-d-xo.html
Thanks for the awesome tutorial Larry.
Hehe, first time I've been called Larry :D
This is very useful! Thanks, buddy!
You're very welcome! There is a newer version of this video linked to in description if interested.
Thank you Hero for the well explained video
I can be your hero, baby
I can kiss away the pain
I will stand by you forever
You can take my breath away 😂
Thank you so, so much! It helps me a lot. I'm from Brazil :)
Hey Alyne! I'm from Canada :) Thanks for watching! I've been to Brazil 3 times... love it! (Iguazu, Ilha Grande, Tabatinga - Amazonas)
Fantastic teaching! Congratulations for the awesome job.
Thank you Emerson!
Please make more videos on maps,
This was super useful and informative
Thank you!! More maps videos coming!
amazing building blocks when you teach !!!thank you very much
Thanks Basu! I have a newer version of this available as well if you'd like to check it out th-cam.com/video/WZcxJGmLbSo/w-d-xo.html
Leigh Halliday yes watching that next. Thanks a ton for clear step by step addition of features
Absolutely amazing!
Hey Sridhar! There is a newer video you'll probably want to check out: th-cam.com/video/WZcxJGmLbSo/w-d-xo.html
@@leighhalliday Yeah added to my playlist already. Thanks for the Video.
It was really helpul. Thanks a lot Leigh.
You're welcome, Gautam! Glad you enjoyed it :)
When I click on the marker two info windows show up. One with the information and one that's blank, any idea how to fix that?
Same happening to me. Maybe it's a bug
Hi James, i get the same error too! Did you find a solution?
@@ThomasGUILLAUXprofile Unfortunately I did not
Hey guys! Sorry! Off the top of my head I don't know the reason...
@@leighhalliday it's actually because of the strictmode. When passing it to fragments, the issue disappears :)
Hi Leigh, even after generating an API key, I am unable to populate the map - it shows Oops somthing went wromg after a second of display of the map. Can you help me figure out why is that happening?
I came across the same problem. If I used the key right in my googleMapURL it worked but as soon as I used the .env.local version by adding the ${process.env etc.} it gave me the oops error. I found in the create-react-app.dev/docs/adding-custom-environment-variables/ that you need to restart you dev server if it's running. That fixed the error for me. Good Luck!
Thanks for lending a hand Borsi2010!
@@Borsi2010 how do you restart dev server? Im still getting same error when I ctrl + c then running dev server again
@@vinnnnnny12345 on my Mac I press control and letter C while in the terminal to stop the server and then type npm start again and that should take care of it. I don't know the commands for windows... sorry
13:08
it says
TypeError: Cannot read properties of undefined (reading '1')
Can some one help?
Great Tutorial! Very well written
What a great explanation, thank you!
Glad I could help! I have a newer version of this video if you're interested... linked to in description.
Thanks Leigh Halliday . ^^
You're very welcome! I actually have a newer Google Maps video as well if you'd like to check it out: th-cam.com/video/WZcxJGmLbSo/w-d-xo.html
Hi Leigh. Thanks so much for the awesome video. I have one issue though. When I click a marker the first time an empty infoWindow appears over the corresponding infoWindow with the information. The other infoWindows open correctly when clicked and clear the intial infoWindow with the information but the empty infoWindow remains and needs to be manually exited.
Hey Jon! That's a very good question :D Maybe you can share your code so we can take a look. Off the top of my head I am not sure though.
@@leighhalliday Thanks for the response! This stack overflow post helped me solve it (in case someone else is stuck) stackoverflow.com/questions/62124512/react-google-maps-calls-empty-infowindow
I implemented what i learned from it and then removed the position property from infowindow and it worked ! Thanks again
@@jonlaboy7209 Thanks Jon for sharing the link. The same issue was coming to me. Now it's fixed.
Hi , can I add number positioning in the markers...i mean numbers on markers? I tried passing child component inside marker component...but that did not work. could you please help.
I can't see how to do it with this google maps in react library, you may want to try this one: google-map-react, which seems to allow this a lot easier. Here's an article/video which uses numbers as the marker: www.leighhalliday.com/google-maps-clustering
Sure I ll try this !!
Just awesome. Keep it up
You got it! I won't let you down.
Hi, in google maps how to zoom based on markers if one is in California and if another is in newyork. So that both the markers are visible
Very Easy To understand thank you very much
Thank you so much for this amazing video. Great tutorial, its exactly what i need :D
Happy I could help, Alexis! Thanks for saying hi :)
Nice stuff and Go Sens Go
I think you mean Go Leafs Go!
Hey if you could make a video about adding triggers in Google maps, as in while our location is moving(vehicle) and as soon as we come near to that specific location it will get triggered and give us an alert.
nice one Dmitry
Thank you so much for the tutorial!!! 🏆One question do you know how to trigger InfoWindow from separate element? Like I have these markers on map and on separate component like "list of parks" and when I click on park's name it should show (open InfoWindow) it on the map.
Why map component (child)is unstable and flickering while typing anything in parent component and also while we auto drag and please can u resolve
can you please suggest me how can i add css to infoWindow tag??
suppose i want to bring that infoWindow at the top of the Icon.
Great job. Keep it up!
Thanks Dhruvil, I'm glad you enjoyed the video!
Great Video, But I face an issue. After putting the 'API Key' in 'googleMapURL', "For Development Purpose Only" watermark is still showing on Map.
You may have to enable this API within your API console settings and/or you may have to enter your credit card info (even if you won't be charged).
Спасибо! Очень понравился стиль изложения, все шаг за шагом с подробным объяснением. Жалко не наткнулся на это видео 1,5 года назад, как раз было пару прототипов с Google Maps.
Had to Google Translate this hehe... but thank you! Glad you enjoyed the video! There is a newer/updated one pinned to the top of this video if you'd like to check that out.
@@leighhalliday Еще раз СПАСИБО! Почитал tomchentw.github.io/react-google-maps/#documentation, вполне понятно стало (по крайней мере начало;) накидал пример padavan-itbeard.github.io/react_google_map/. Добавил ссылки на Вас и Ваш канал в readme %) p.s. Google Translate наше все!
@@leighhalliday It remains to rate the new version%) Success!
Thanks for this great video. Wanted to know if there is away add directions functionality to it too?
Hey Anurag! The truth is that I'm not sure! It's not something I've worked with before. If you check it out, let me know what you find! If not, maybe that's a great idea for something I could dive into in the future.
Super helpful video! Very well taught ! (I am also from Ottawa!! Its nice to get a shoutout!)
Niiice! Hello fellow Canadian!
Awesome bro .....your voice are so smooth
Haha, thanks Pankaj! Hopefully it didn't put you to sleep.
I did not see where you got your skatepark data from, I am building a similar app where I plan on showing nearby basketball courts, I am having trouble with the nearbySearch function of the Google Places API
Hey Bartek! I got it from the city of Ottawa (Canada)... they had a website that listed it all as JSON data. Hmm... off the top of my head I'm not sure what the issue would be, but I didn't use the google places api in this vid, unless I am remembering incorrectly haha which is totally possible.
why do my map still get greyed out with those message "development purpose only" even i put a key inside the gmap url?
Have you enabled billing and the correct APIs for that key?
@@leighhalliday ah i see. the api is right but i've not enabled the bill. Tq
@@hafidznugroho520 how much should be paid
Hey Leigh! Hope your fine, I followed your toturial i have problem to access map object to add custom controls in map. This map object exist in withGoogleMap state but not in Map component
Hey Amir! Try using the ref prop on GoogleMap, it should give you access to the map. Search for the phrase "onMapMounted" on this page and you'll see some examples: tomchentw.github.io/react-google-maps
i added an svg file on public folder but i cant get it rendered on the map, please assist
managed to get it, had to set the scaledSize value
Nice :)
u deserve my like and subscribe. great jobs thanks
On creating the const WrappedMap = withScriptjs(withGoogleMap(Map)) i get an error "TypeError: Object(...) is not a function" What should I do?
Hey Priyanka! Can you share me a gist of the entire file? It might be something else that is causing the issue!
@@leighhalliday I created a new file on my project to add the maps. However here is a test setup codesandbox.io/embed/optimistic-rhodes-8nwbw
Perrrrfect, thank you! The issue is that the package should be "react-google-maps" instead of "google-maps-react" lol... hard one to find!!
@@leighhalliday Oh! Ok. Will update that. Thanks for your help!
one question, is there a possibility to render the infoWindow above the marker???
Her Gerson! Were you able to find any options in the documentation on changing the position of the info window?
@@leighhalliday no :/ . But, I used google maps API for javascript and added it to my react project. You can handle whatever you want there. I think it is more customizable but you have to add more lines of code and understand hooks and react lifecycle if you want to manage infowindow, markers, etc. :)
Nice one. After creating my app, I didn't find a way to access to the original 'map' object, in order to call such methods like panTo. Do you have any idea of how to do that? Coudlnt find the right post in the net.
Hey Alvaro! Try to save the map to a ref using the useRef hook, then you can access it later.
Hi thanks for tutorial , how to rotate the marker icon to specific angle? please tell me I need in project urgently
Hey Siddharth! I am not sure! You'll have to look at the docs.
i can't customize my map styles at all. is that because i do not have billing set up?
Woah, subscribed
Hey Leigh! can u please make another video for further processing like route directions and alternative route,optimized route, just like route direction in UBER... using react-google-maps
Great idea, I'll add it to my list!
Thank you so much! You are a life saver
Hi Leigh Halliday can you use google places with this as well
Yup! For sure. It's just in React, and I have another video about Google Places, it's just a matter of combining them... maybe easier said than done but it is possible for sure.
@@leighhalliday Ok nice.. I am working on this project that requires me to fetch data from google places but looking for any tips or guidance how to get it done.
Thanks Leigh this is exactly what I needed, this has been invaluable for my uni project.
One only thing I'm struggling with now is getting users to place their own marker on the map. How would I go about letting a user for instance add their own skatepark marker in an onClick event?
I have the lat and lng posting to console onClick okay, but I can't seem to get a fresh marker to show.
Hi Halliday. Thanks for your awesome job. Here I have a question when using the update version @react-google-maps/api that how can I set the icon size of Marker because didn't find propery 'google' on window.(:
Hey Web Dev! Sorry... I'm not really sure off the top of my head
Did someone else found problem installing the library ?
Hepful!!!! Do you have an example with the Directions Renderer?
Hey Wishow, thanks! Sorry, I haven't worked with that before.
It didn't work for me, I don't know why it skipped many packages when installing react-google-map some said not supported
Hey there! I actually have an updated video with updated packages if you'd like to take a look th-cam.com/video/WZcxJGmLbSo/w-d-xo.html
Great video, thank you very much!
Thanks Aleksandar! If you search my channel you'll find an updated Google Maps in React video too!
Hello Leigh,
Very great tutorial. Actually, I was trying to build a Search bar to lookup the location names and render the pins conditionally only when the search matches. Could you please tell me how I go about that given your logic.Many thanks
Hey Siddharth! You might want to check out this video and take a stab at combining the places input and its results with how to render markers as shown in this video: th-cam.com/video/uJYqQdnw8LE/w-d-xo.html
Very helpful tutorial. Can i ask if its possible to also use the googlemaps feature to for example collect all the skatepark locations from the map to be put into say a database or object/store in order to list each of the skateparks on my website rather than showing the map (kinda like how information is taken from an API stored into a redux store or context api store and then dispatched onto the page in a list). Sorry if this makes zero sense lol
Hey Daré! Thanks for your comment. If I understand, I think you could tackle it a few ways. Instead of importing and using the file locally, you could fetch the JSON from its URL (link to data is in video description), and then once you have the data you could put it into a Redux store or however you want to store it. Once you have the data in your store, you could choose to list out the data rather than displaying it on a map. Orrrr... you might want to load the data into a database and fetch it from a Node server or something like that... it depends I guess what you want to do with the data in the list, if you want to be able to edit/manage the data, etc...
Leigh Halliday thanks for the response. I’ll be sure to try this out
how to colour states of a country using this library ? Please help !
Hey, Leigh! It would be fantastic if you find the time to record a tutorial where you go over adding a search bar and filtering results on the map through specific queries!
Good idea, Alex! I'll try to do something around that them in the future :)
Hi Leigh,
Great video. I love your videos and how you explain things. I've watched a couple of other videos you've done and I like your style. By the way, do you know if Montreal has anything similar to what Ottawa is doing? I've been searching for something similar to what Ottawa is doing but no luck.
Hey Helio! I'm honestly not sure! If you find anything for Montreal or Toronto (where I live near), let me know :D Thanks for watching! I'm glad you are enjoying/learning from them.
Where could I find the same data for say Basketball courts? I was looking for notes on how you found the skatepark data but couldnt find it.
Hi Iby! This is something specific to the city of Ottawa, Canada... but if you want basketball courts in Ottawa, here is the data: data.ottawa.ca/dataset/basketball-courts
Great Video. And I've question. Did I've to enable billing account to use the API key??
Hmmm... good question. If you try it without entering billing info, what happens?
@@leighhalliday It show the map first correctly and then the message show allover the sceen and the screen is black and they just say This is for developer Mode.
Hey Fatima! Did you get it working? Did you enable the "Maps JavaScript API"?
Sumair, did you get it working? Did you enable the "Maps JavaScript API"? Can you show me how you are embedding the key in your app? Does it give any other details in the browser console?
Thanks . Can we use this method in react native web?
the syntax for google api key is not working for me
Hey lazy loafs! What is the problem? If you put a console.log, can you see it? Did you put it in your .env file with the right prefix?
Leigh Halliday yes my .env file has the code inside with white text showing it’s not working properly, and when I wrote &key=REACT_APP_GOOGLE_KEY, it shows the entire thing In brown.
Hey Leigh, I posted a little while ago here but I had another question for you. I am running into an odd error where, if I load the map up in a thin screen, say a mobile phone view, and I expand it, there are blank white spaces where the map should be but does not go to. This does not happen when I refresh the page with the map open at the largest width and height. I can shrink it, expand it and those unrendered spaces do not appear. Any ideas? Please let me know! Thank you!
Hey Jake! Hmm... I went back and looked at the code, and I saw some funky things where I set the divs to have a height of 100% which doesn't make a ton of sense :D but I don't think that would be related to changing the width. I'm honestly not sure! Sorry...
Leigh Halliday thanks Leigh no problem. I actually was able to solve it. I had to create an event listener for a resize of the window, and then when it was trigged I called map.resize(). Question for you though: what’s the difference between ReactMapGL and ReactMapboxGl? Also, I can’t remember if this was for ReactMapGL or ReactMapboxGl or what, but I see a lot of mapboxs being instatiated as object first. Like: const mapbox = ReactMapGl({ ...params }), do you know the differences between that and the method you did in your video? Sorry for the long response, but I appreciate your videos! They are really great! :) keep it up!
I am getting two info window on clicking one marker. What is the reason behind that?? @Leigh
Hey Sujan! Can you share your code? Maybe I can spot why.
@@leighhalliday same problem. just copy-pasted your code from github. dropmefiles.com/77RYf p.s. thanks a lot for your lessons
Thanks for this wonderful tutorial. :)
Glad you enjoyed it!!
Is it possible to pass props/state into the default center? In case I have data coming from an other component so I can render the map dynamically
Hey Jesper! If I'm being honest I would check out MapBox - th-cam.com/video/JJatzkPcmoI/w-d-xo.html if you're looking to dynamically control map with props/state... the Mapbox implementation is much more declarative where the state/props dictate the map... not so much with the google maps implementation. With google maps in React you're stuck with imperative methods like "panTo", so you have to watch for changes to your state/props and then call that method yourself rather than letting the state dictate the map directly.
@@leighhalliday Thanks for a quick reply, will definetly check out MapBox, i the meantime I got my own code running :D I used the google-maps-react package which had a center prop to its map view. That renders the new position.
Nice video thanks I used some of your code but it does not work its depreciated and I needed to add the "selectedPark" variable into the array argument of the useEffect hook so that the useEffect only gets called when the "selectedPark" variable changes.
Great video! I recently used this same google maps library on a project and I’m tired of seeing the warning about renaming componentWillMount. So I tried to update the code in node_modules but still getting this warning. Also, I can’t get the ref to the map to work, which I need for the getBound() function thanks!
Hey David! Thank you :) You may want to try a different maps/react library. This one has less downloads but gives you a ref to the map: www.npmjs.com/package/@react-google-maps/api and this one seems to give you access as well via a callback: www.npmjs.com/package/google-map-react
Awesome tutorial.
Thank you Sumit!
can we make marker selectable like checkbox onClick ?
error:
Legacy context API has been detected within a strict-mode tree.
The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.
Please update the following components: withGoogleMap(Map)
What can I do ?
Hey! I have a newer video linked to in the description and pinned comment which uses a different Google Maps library that doesn't have this issue.
@@leighhalliday thanks for your answer, that's to nice you write reply yet :)
Hey Leigh. It would be pretty cool if you demonstrated how to use the search to populate the map with markers. For example let's say that I want to show a map with all the local churches but I don't necessarily have the jason file to fill the information
Great idea! I just launched a Google Places autosuggest video, but it just found a single location. It would be cool to combine that with the map.
this package is not maintained anymore, its ok use it?
Yes! Fine to use. Google maps hasn't changed that much recently. There are newer packages, but with much fewer downloads... feel free to try 'em out though :D Let me know if they work better than the one we covered. I wanted to cover the most popular one out there today even if it isn't the newest.
@@leighhalliday I Found this one www.npmjs.com/package/@react-google-maps/api, but the old one is a little bit more easy to use :)
Thanks for the video.
My application won't read the variable from the .env.local file without adding the line "require('dotenv').config()" to the App.js file. Do you know why this might be?
What is your ENV var called? Create React App only looks for ENV vars starting with REACT_APP_
@@leighhalliday I've matched your naming convention.
I had to run the "npm install env" command to get to that point.
Sorry if this is elementary - if there are prerequisites not explicitly stated in the video, I'm not aware of them.
Hey Brandon! Nope, it's not elementary... I'm not sure why it isn't working :D Maybe take a look at this page and see if you pick up on something we didn't think of yet: create-react-app.dev/docs/adding-custom-environment-variables/
Do you have any suggestions for automatic zoom to make sure all markers are in bounds?
Sorry, I don't :D It'd be cool if something already exists, but if not, I would try to find out the bounding box of all the markers, and then see if there is a google maps function for zooming/panning for a certain bounding box.