@@TraversyMedia actually i learned something new here, im interested in etymology, and you comment confirmed my research about the origin of letter G and why we have 2 letters for the sound (j), and how G changed and became a second J, but in reality it wasn't, its exactly what Brad said G should stay G more like hard K not becoming like J, also i dicovred why we have 2 sounds of ssss, c and s
@@algeriennesaffaires7017 Wait till you find out GIF stands for 'Graphic Interchange Format' and there's only been one correct way to pronounce it this whole time.
I applied at a start up for internship, and I was asked to build a react app, using this API to fetch random asteroid images, other stuff. This API is really good for beginners. A must do... if I may exaggerate... :).. Thank you Brad once again, for not letting me get distracted by all the crap youtube recommendation, and ofcourse making free videos for us. Respect +
For those trying to build this now, NASA has changed the API format a bit (v3), so the category id is no longer a number, and also "geometries" is now "geometry", like this: if(ev.categories[0].id === "wildfires") { return
You're not gonna make profit from a free API so calm down. In terms of ideas, u can do a lot of stuff with that, basically what google maps did with covid, u can do weather and natural phenomena in realtime, you can do email notifications based on people's area and lots of other creative stuff. But if you start with "how do I make a profit ?" in mind right from the start then you're guaranteed to fail.
@@alifadda9598 Make it look more beautiful. Make a React Native app out of it. Try mapbox instead google maps. Share it on reddit, product hunt etc. Eventually try monetizing it!
Learned React and Angular From Brad. Been Developing for a couple years. Even though this is such a simple app- I still learn a thing or two! Thanks Brad.
thanks brad , ı from turkey you know the country isnt good. nobody cares about writing code . ı love javascript and react and I am 13 years old :) Because of you I like to code 😍😘🐱💻
this project made a developer, where so far i was just writing by listening at the channel, now, I have implemented this on my own (at least 50%), still a lot to go.
Love your tutorials, bite sized and not overwhelming. You're a great teacher. Getting back into dev after a little bit of a hiatus, and the courses (paid and free) havev helped greatly. Thanks again.
sobering observation: in 1 year since this video was released the amount of wild fires has increased dramatically. My map is saturated with fire icons in many areas, and Canada now has dozens compared to only 1 in Calgary...which of course was just their hockey team.
I love this kind of easy to follow tutorials, I'm doing now your js course , and after that I want to do your react course, keep up the good work! many people are learning a lot from your work. THANK YOU!
Great work, I can’t know what’s wrong with mine though? The icon keep moving with me whenever i move the map it’s not fixed in the specific coordinates it’s centered only in the screen and keep moving….?!
Having the same issue as yours before...but I just fixed it~ Have you ever tried to remove the in your index.js/main.js? Pls let me now if it works for you 😀
He's always awesome and I really appreciate you helping millions of developers like myself trying to learn something new daily in these tough times you're truly an inspiration for me and I'm sure for many others thanks for being awesome I hope you stay safe and stay awesome always ❤️ much respect for you.
14:33 I needed useState(true) to prevent race conditions it seems. Not sure why, but the setLoading(true) in the useEffect wasn't firing fast enough, so the drilled down data from the api wasn't available in time for the return.
I have my fetchEvents function written the EXACT same way and I'm setting the state of the eventData the same way. But when I then call the fetchEvents() and then try to console.log(eventData); It returns nothing, I thought this was normal behavior but it logs on your browser just fine! Am I doing something wrong? Is there some kind of setting or something I have to change?
Had same problem, now it's working. Seemed to be error with console.log. Changed the parameter (eventData) several times to (events), etc., all with errors, then went back to console.log(eventData); and it's working. No idea why...
Has anyone been dealing with an issue where the map does not show up at like the 9:50 part of the video. My program seems to be broken even though there seems to be no difference it just shows a blank page.
What's happening is Google isn't letting the API reach your localhost env. To solve this, go into the API credentials, and add the localhost URL as an allowed url. It's weird but doing this solved the issue.
Also it says i have to enable googlemaps javascript in the Google cloud platform.. this is however not a free service , am im completely wrong or will this charge me every time i try it?
@4:45 Following along, I had some issues with installing dependencies. Because of some legacy issues, `google-map-react` couldn't install until I added the `--legacy-peer-deps` flag. No problem after that, but it took a while to sort it out. I then had to use the same flag to install the other dependencies. So, I'm wondering what is different between your setup and mine that causes me to have legacy issues with dependencies I am installing to a project on my machine 3 days after you posted this video? I'm sure it's something obvious that I just can't see, but right now it's also an irritating little thing that I know will suck up too much of my mental energy today. macOS Catalina v.10.15.7 node -v 15.2.1 npm -v 7.0.8
I had to add the same flag .. took awhile to figure that out. Not sure what the difference is, I'm on Windows 10 with the same versions. Only thing I could think of is he may have a different version of node/npm installed
Does anyone else have issues with icons not correctly staying fixed to a point on the map? All my icons stay fixed in place based on the screen, completely independent of the map. How did you fix this? Great tutorial; just a weird bug.
@23:43 - Uncaught TypeError: Cannot read properties of undefined (reading 'map') had to use optional chaining on eventData to define the array before .map() eventData? solved it, but I am not sure if that is best practices
Thank you for sharing! I just finished my implementation. Unfortunately the Nasa EONET api is not showing any wildfires here in Brazil. I'm searching another API to show data in our country. I realy enjoyed it Brad, thank you!
"Failed to compile src\components\Map.js Line 30 : 16: 'map' is not defined no-undef" always getting this error. followed along to a T several times... Edit: fixed issue @5:42 set Javascript language mode to React. now I have the map 'for dev purpose only' lol even though I put my cc in...making progress though...
Brad, thanks for putting this together, man. I'm missing something somewhere though: I have the height defined, verified my API key's right, verified Map elements/components are present in the window.. Everything's 'there', but still can't get the map to display. Thanks for the help guys.
*Edit* --> SYNTAX ERROR.. Location marker CENTER object's longitude property is 'lng' - not 'lon'... Need to learn to walk away from the screen when something's not clicking.
I got as far as installing iconify/react and unable to get the icons to appear on the map in Medford. I did notice the layover on the map says "for development purposes". I also noticed that I have to insert the dependencies from copying the code from github because I couldn't successful do it through NPM. Great video until I got stuck lol
I found the issue. In the LocationMarker.js file on line 2 I wrote import {locationIcon} but it should read import locationIcon WITHOUT THE CURLY BRACES. Took me two hours to find this mistake X-D
@@ShawnALLWorld You have a set your billing info which includes credit card info etc on your cloud console, otherwise it will show the error and that "For development purposes only" watermark all over the screen.
So I added the other events in, storms, volcanoes and icebergs, and I want to change the opacity of the storm icon each time I loop through the geometries array. How do I access the styling of the Icon from the Map component?
I'm having a hard time displaying other events. I'm trying to add icebergs, I can see them when I console.log() but I can't display the icons. How did you do it?
Go onto your cloud project dashboard. Go to APIs overview or search for google maps API. Enable the maps javascript API and then generate your API key.
any ideas why should i be having problems when adding a billing info to my google cloud platform? error says try different card and tried already with two different ones
Hey! I'm having the same issue, what worked out for me (at least for now) is: Google Cloud Platform page -> three dots up left -> Google Maps (hover over it) -> APIs -> enable the required API. I enabled the Javascript Maps API as it was what the 'error page' said when I tried to load the map after the CSS part. Let me know of that worked out for you, I'm still working on it.
Stupid question: After we create the react app using npx .. , do we change directory into the newly created app and then use npm i google-map-react .. ?
I hard to jerk around with my google cloud account to get it to work. Two things I had to do was "enable" google maps api on my "project" and to associate a billing account to that project, then generate the API key for that "project". Eventually I got that browser error message to go away. Rest assured the issue has to do with your google cloud account, not anything in Brad's code. Google's UI is challenging to navigate, so be patient.
anyone else getting an error and unable to install google-map-react as it seems its trying to find or install react @^16.0.0 but i have ^17.0.2 installed??
Quick question unrelated to this though. I have a marketplace and i want payments to go directly to each vendor is there a way to accomplish this or do i have to accept the payments then individually pay each vendor?
18:21 Don't you personally attack me Brad
😂 I knew I would catch crap for that
@@TraversyMedia actually i learned something new here, im interested in etymology, and you comment confirmed my research about the origin of letter G and why we have 2 letters for the sound (j), and how G changed and became a second J, but in reality it wasn't, its exactly what Brad said G should stay G more like hard K not becoming like J, also i dicovred why we have 2 sounds of ssss, c and s
This aggression will not stand man!
@@algeriennesaffaires7017 You are really reading into this man. My explanation: "Jif is peanut butter"
@@algeriennesaffaires7017 Wait till you find out GIF stands for 'Graphic Interchange Format' and there's only been one correct way to pronounce it this whole time.
I applied at a start up for internship, and I was asked to build a react app, using this API to fetch random asteroid images, other stuff. This API is really good for beginners. A must do... if I may exaggerate... :).. Thank you Brad once again, for not letting me get distracted by all the crap youtube recommendation, and ofcourse making free videos for us. Respect +
i got a error that code is not fetching data from nasa api . what should i do??
For those trying to build this now, NASA has changed the API format a bit (v3), so the category id is no longer a number, and also "geometries" is now "geometry", like this:
if(ev.categories[0].id === "wildfires") {
return
would this also change the fetch URL? because I'm still getting errors on how my application fails to fetch even with these changes
OK so i just figured out that the API URL has changed with version 3. the new API URL is "eonet.gsfc.nasa.gov/api/v3/events"
sir can you please help me how to resolve this
issue of google maps and nasa api
Thank you brad for all this knowledge you are constantly sharing with us
You're welcome. I really enjoy doing it :) Even after all these years. So I'm glad you guys are still watching
@@TraversyMedia thanks for your tutorials. Please do you really know why coderstape doesn't publish tutorials anymore?
"Or JIF if you're a psychopath" -- good man!
😁😁
This low key humor cracks me up lol
xD
when I hear Brad's voice I pumped up, because I know I'm going to learn something new...
The Boston accent of knowledge!
My favourite Teacher. Thanks for sharing such an amazing and excellent content with us...Love you, sir...
This guy is literally showing us how to to build a startup app from scratch
@@alifadda9598 Think. This is a brilliant idea you could expand hugeeely on.
@@alifadda9598 thier is much more to expand this app Brad told finally
You're not gonna make profit from a free API so calm down.
In terms of ideas, u can do a lot of stuff with that, basically what google maps did with covid, u can do weather and natural phenomena in realtime, you can do email notifications based on people's area and lots of other creative stuff. But if you start with "how do I make a profit ?" in mind right from the start then you're guaranteed to fail.
@@alifadda9598 part of software development is making your own ideas. critically think for a bit, don't expect everything to be handed to you.
@@alifadda9598 Make it look more beautiful. Make a React Native app out of it. Try mapbox instead google maps. Share it on reddit, product hunt etc.
Eventually try monetizing it!
Learned React and Angular From Brad. Been Developing for a couple years. Even though this is such a simple app- I still learn a thing or two! Thanks Brad.
thenewboston + Brad from Boston = No Tension
Lol, good one!
So true.😂 Expert faculties 👍
Fantastic video, you are a machine!! I get stuck for 4 hours trying to find out why a stupid modal won't load, you churn out an entire app in 30 mins!
thanks brad , ı from turkey you know the country isnt good. nobody cares about writing code . ı love javascript and react and I am 13 years old :) Because of you I like to code 😍😘🐱💻
this project made a developer, where so far i was just writing by listening at the channel, now, I have implemented this on my own (at least 50%), still a lot to go.
sir can you help me just to resolve some minor erros
Love your tutorials, bite sized and not overwhelming. You're a great teacher. Getting back into dev after a little bit of a hiatus, and the courses (paid and free) havev helped greatly. Thanks again.
I was thinking that i need to learn react and this came up
Same dude!
same
My best ever tutor for most of my coding skill I learnt
just in time when i needed a map tutorial, Traversy delivers
My final project for my coding bootcamp was a WildFire app built with React Native! It looks similar to this!
Awesome :)
The wildfires down there in South America are actually in Chile and Argentina not Brazil lol
Anyway, great video as always.
sobering observation: in 1 year since this video was released the amount of wild fires has increased dramatically. My map is saturated with fire icons in many areas, and Canada now has dozens compared to only 1 in Calgary...which of course was just their hockey team.
Awesome as always Brad! I really never understand how people downvote this kind of FREE content
At 16:54 why we call fetchevent( ) separately,as the fetchevent itself will execute when the component renders for the first time?
Dude you're legitimately a national treasure
Your content Phenomenal as always.
Thanks man
I love this kind of easy to follow tutorials, I'm doing now your js course , and after that I want to do your react course, keep up the good work! many people are learning a lot from your work. THANK YOU!
Just started react a week back this is the perfect thing I can try on!.Please do an video on express and node with a simple app like this!
My markers are moving around while i pan the map. Any solutions?
This video is uploaded before you upload it in instagram 🤩! I thought I will get this video on UA-cam !
Thank you Brad for all your efforts
Great work, I can’t know what’s wrong with mine though? The icon keep moving with me whenever i move the map it’s not fixed in the specific coordinates it’s centered only in the screen and keep moving….?!
Sir how is your events api opening? When I am trying to open events api.. it is showing 500 server error... Please help...
Having the same issue as yours before...but I just fixed it~
Have you ever tried to remove the in your index.js/main.js?
Pls let me now if it works for you 😀
Learned something new here like GOOGLE MAPS.. Thanks BRAD
it is asking for charge to access api key of google? what should i do?
good to see you back with new videos ...
He's always awesome and I really appreciate you helping millions of developers like myself trying to learn something new daily in these tough times you're truly an inspiration for me and I'm sure for many others thanks for being awesome I hope you stay safe and stay awesome always ❤️ much respect for you.
A collab with TheNewBoston Bucky will be like heaven on UA-cam "in developer's life" I'd love to see you both make something amazing
Thanks, Brad! We appreciate you making these awesome tutorials for us.
Nice. Simple little etude. I have no practical use for a google maps application at the moment, but it's still good to know.
Your tutorials are really awesome
14:33 I needed useState(true) to prevent race conditions it seems. Not sure why, but the setLoading(true) in the useEffect wasn't firing fast enough, so the drilled down data from the api wasn't available in time for the return.
"Or JIF if your a psychopath" 😂😂😂
Thankyou Brad for this free knowledge
I have my fetchEvents function written the EXACT same way and I'm setting the state of the eventData the same way. But when I then call the fetchEvents() and then try to console.log(eventData);
It returns nothing, I thought this was normal behavior but it logs on your browser just fine! Am I doing something wrong? Is there some kind of setting or something I have to change?
Same
Had same problem, now it's working. Seemed to be error with console.log. Changed the parameter (eventData) several times to (events), etc., all with errors, then went back to console.log(eventData); and it's working. No idea why...
Thanks Brad. Always enjoy your videos
I've missed your voice and teaching, Brad.
Has anyone been dealing with an issue where the map does not show up at like the 9:50 part of the video. My program seems to be broken even though there seems to be no difference it just shows a blank page.
What's happening is Google isn't letting the API reach your localhost env. To solve this, go into the API credentials, and add the localhost URL as an allowed url. It's weird but doing this solved the issue.
@@redpin14 Sorry, I'm still a little bit confused I was wondering if you could elaborate a little bit I'm having trouble doing this. Thanks
@@ishaanpuri1915 A bit delayed but if others are having this issue you need to remove from index.js for it to image
Also it says i have to enable googlemaps javascript in the Google cloud platform.. this is however not a free service , am im completely wrong or will this charge me every time i try it?
if google maps are payed what to use as its replacement
Great video! I'm going to build on this and create a tutorial for building a React Native app that tracks hurricanes! Thanks for the inspiration.
Spent time looking for this thanks bro
@4:45 Following along, I had some issues with installing dependencies. Because of some legacy issues, `google-map-react` couldn't install until I added the `--legacy-peer-deps` flag. No problem after that, but it took a while to sort it out. I then had to use the same flag to install the other dependencies.
So, I'm wondering what is different between your setup and mine that causes me to have legacy issues with dependencies I am installing to a project on my machine 3 days after you posted this video? I'm sure it's something obvious that I just can't see, but right now it's also an irritating little thing that I know will suck up too much of my mental energy today.
macOS Catalina v.10.15.7
node -v 15.2.1
npm -v 7.0.8
I had to add the same flag .. took awhile to figure that out. Not sure what the difference is, I'm on Windows 10 with the same versions. Only thing I could think of is he may have a different version of node/npm installed
Different npm versions could be the reason. Anyhow you could alternatively use YARN to install your dependencies, it will work just fine.
Thank you brad. I get php developer job becouse of your best tutorials. Thank you so much 😊
If I am using vanilla JS instead of react for my project can I follow same steps of wildlife tracking as shown in video????
Does anyone else have issues with icons not correctly staying fixed to a point on the map? All my icons stay fixed in place based on the screen, completely independent of the map. How did you fix this? Great tutorial; just a weird bug.
@23:43 - Uncaught TypeError: Cannot read properties of undefined (reading 'map')
had to use optional chaining on eventData to define the array before .map()
eventData? solved it, but I am not sure if that is best practices
Awesome video. Love your tutorials, Brad!
Thank you for sharing! I just finished my implementation. Unfortunately the Nasa EONET api is not showing any wildfires here in Brazil. I'm searching another API to show data in our country. I realy enjoyed it Brad, thank you!
Great exercise!! Love immediately usable and world relevant exercises.
"There's a couple of them here in BRAZIL..."
That's actually Chile, but ok
Excellent little tutorial project. Thanks
THIS WAS BADASS! :D Thanks Brad!
how to remove watermark that says for development purpose only
you have to activate billing in google console
@@MuhammadAyaz-mt6hw will i have enter credit card details? will it be free??
@@adityaratan7581 Yes u have to enter credit card details
@@MuhammadAyaz-mt6hw thanks man really appreciate your help
Much LOVE MY GUY!! APPRECIATE THE AWESOME CONTENT
"Failed to compile src\components\Map.js
Line 30 : 16: 'map' is not defined no-undef" always getting this error. followed along to a T several times... Edit: fixed issue @5:42 set Javascript language mode to React.
now I have the map 'for dev purpose only' lol even though I put my cc in...making progress though...
This was oretty awesome and deserves a like and subscribe
Im gonna go through it after work today!
Brad, thanks for putting this together, man. I'm missing something somewhere though: I have the height defined, verified my API key's right, verified Map elements/components are present in the window.. Everything's 'there', but still can't get the map to display. Thanks for the help guys.
*Edit* --> SYNTAX ERROR.. Location marker CENTER object's longitude property is 'lng' - not 'lon'... Need to learn to walk away from the screen when something's not clicking.
@@ephraimsmith1964 Thanks, this fixed my problem even though I wasn't getting a syntax error for some reason.
is there a way to set autozoom based on the center latlng? so that every location is visible around it
I got as far as installing iconify/react and unable to get the icons to appear on the map in Medford. I did notice the layover on the map says "for development purposes". I also noticed that I have to insert the dependencies from copying the code from github because I couldn't successful do it through NPM. Great video until I got stuck lol
I found the issue. In the LocationMarker.js file on line 2 I wrote import {locationIcon} but it should read import locationIcon WITHOUT THE CURLY BRACES. Took me two hours to find this mistake X-D
why did you imported lat lng in marker if you didn't want to use it?
Hi. I used free google API for the map but the app didn't work. didn't show the map. Do I have to pay for google map API ? Thanks for response
Great Job Brad!!!
I'm so excited to watch this!!!
Hey I wonder if you refer a book or documentation to create this. And how long does it take?
Sweet Tutorial! Love it 🤍
Can it be done with react-leaflet instead of google-map-react to avoid the billing request from google?
I received that error too, you know how to avoid it!?
@@ShawnALLWorld You have a set your billing info which includes credit card info etc on your cloud console, otherwise it will show the error and that "For development purposes only" watermark all over the screen.
I think its possible, gotta try it.
@@ShawnALLWorld did you find anything?
can it be?
Wow this was a cool video. I have yet to learn reach, but doesn't seem very complicated. 👌
So I added the other events in, storms, volcanoes and icebergs, and I want to change the opacity of the storm icon each time I loop through the geometries array. How do I access the styling of the Icon from the Map component?
I'm having a hard time displaying other events. I'm trying to add icebergs, I can see them when I console.log() but I can't display the icons. How did you do it?
Should i learn class components in react? Or hooks are enough
This tutorial reminds me of the mobile app I made on my hackathon last month. Same theme. Pretty fun time. Thanks Brad :)
Where we can find info about different APIs.
Go onto your cloud project dashboard. Go to APIs overview or search for google maps API. Enable the maps javascript API and then generate your API key.
Great explanation!!!!!! Thank you
Waiting for roadmap 2021 💓
We love you Brad
I have done the same exercise with leaflet and a bit different but its posible.
is this a complete course like as shown in title
any ideas why should i be having problems when adding a billing info to my google cloud platform? error says try different card and tried already with two different ones
in React v18 must remove for google-map-react to not throw errors
thanks this comment!you makes my day🤗 As a beginner I try to find out my error so long before see your comment 🤭
Thank you for the comment!
Maps not properly loading, which api are needed to be enabled for using maps ?
Hey! I'm having the same issue, what worked out for me (at least for now) is: Google Cloud Platform page -> three dots up left -> Google Maps (hover over it) -> APIs -> enable the required API. I enabled the Javascript Maps API as it was what the 'error page' said when I tried to load the map after the CSS part. Let me know of that worked out for you, I'm still working on it.
why in the LocationMarker component we don't use lat and lng, but despite this the icon is positioned correctly on the map ?
i have the same question!
Hey Brad, where can I buy your merch?
@18:24 classic! Totally laughed out loud. Gif...
I haven’t watched it but I like it.
Great tutorial! Thank you.
Thank you for sharing. I had the chance to see a rocket launch in 2018. Amazing experience. I uploaded a pretty cool video of the journey to my page.
Stupid question: After we create the react app using npx .. , do we change directory into the newly created app and then use npm i google-map-react .. ?
Yes, make sure you're inside the app directory and run it
My site says "This page can't load Google Maps correctly.
Do you own this website?"
You need to connect a billing account to your API key most likely. Check the console to see the error.
@@coreyw6634 do we have to pay for an API KEY?
No
I hard to jerk around with my google cloud account to get it to work. Two things I had to do was "enable" google maps api on my "project" and to associate a billing account to that project, then generate the API key for that "project". Eventually I got that browser error message to go away. Rest assured the issue has to do with your google cloud account, not anything in Brad's code. Google's UI is challenging to navigate, so be patient.
@@BobMacNeal So we have to use a credit card?
Why not filter for the wildfires after the fetch? I think it is more better this way.
anyone else getting an error and unable to install google-map-react as it seems its trying to find or install react @^16.0.0 but i have ^17.0.2 installed??
solved this, use npm i google-map-react --force
following along to a T but no matter what I do getting this error. src\components\Map.js
Line 30:16: 'map' is not defined no-undef
@@jdubhman I’ll have a look this weekend if I get a chance as I haven’t actually finished the tut yet
@@AlexG-wk3nh Thanks, I got it working, started again from scratch and changed the Javascript language mode to React like Brad does @5:40 - cheers
This was great! Thanks
Thankyou brad you're awesome
Quick question unrelated to this though.
I have a marketplace and i want payments to go directly to each vendor is there a way to accomplish this or do i have to accept the payments then individually pay each vendor?