What a fantastic tutorial, thank you so much Leigh. I think this may even be my first RUclips comment in 10 years! Answered so many questions I had about modern usage of some Maps APIs with React, fantastic stuff. The only thing I had to tweak from your code was making the generateHouses() fn take the `office` and not the `center`, since the `center` is never updated apart from the initial page load (so the houses would always be generated away from your office location, if it were different than your initial `center`). Just in case anyone else was struggling with that :) thanks again, phenomenal tutorial!
You sir are a God sent! Thank you for such a great video. I've had so many problems with other tutorials, but your Google Maps series has helped so much! I really appreciate your videos!!!
For those having issues with markers for house not rendering around the work location. Try using the tweaked useMemo below instead const houses = useMemo(function(){ if(office) return generateHouses(office); },[office]);
These are the kind of tutorials I love! I'm tired of looking up a new technology and seeing the same tutorial over and over again Will definitely switch to this package and follow part of your tutorial Love the thumbnail btw 🤣
TNice tutorials was honestly so helpful. I’ve been working around soft, whether it be church, singing in a band, or theatre for most of my life so tNice tutorials
Sorry for interruption, but then you build your frontend app, your env vars for frontend is packaged by bundler into the code, so there is no issue to use key in place. You should protect your key by limiting domain names per key instead.
You're right, but I think it's a good habit to get in to! Especially for public repos on GitHub, having API keys exposed makes them pretty easy to find, and if you accidentally leave a backend key exposed, you're in big trouble! Better to practice good "key hygiene" all around, which I think means keeping them in ENV vars, and also limiting them to domains like you said.
I tried to do this as explaining it but all I can see is Commute? and Map on this page I don't think so but does it work on only Mac? I'm begginer.. (Anyway this lecture is so clear that I can understand the logic!! I love this!!)
Hey Leigh, I really appreciate your tutorial and the work you've done. I just have one problem in my project on which I cant find any workarouds/solutions. I have current user pin and I want it to behave exactly like in google maps ( Follow user, move map position, smooth transition, etc... ) do you have perhaps any tutorial on this subject?
Thank you very much for making amazing map videos, @Leigh Halliday, I have a question or we can say doubt if you can answer, I am experimenting on a map project, where we will have 15 million markers on the map, we are simplly adding them on the map via array.map function, which is the straightforward thing, but here is the challenge we have a filter UI where we have checkboxes, to hide/show markers based on their category, everytime we want to hide/show some markers, we filter the main array, which causes the state change, and all the 15M marker start rendering again, because of that state change, which causes the freezing issue, what do you think is the way to optimize the performance?
hi sir , i have some doubt in fetch direction , acording your code ui direction is pointing A to B even for me from lat & lang or coming correctly nut ui drection is connenting , can give me solutions for this ...
I was have no idea to use useMemo on every item to re render map, and mostly i use useEffect when these need to get rerender, many thanks sir, however the packages is different but it's very helpfully
Glad it helped Niwasika! Sometimes useMemo isn't required, it depends if the underlying component (GoogleMap in this case) is doing a shallow comparison or a deep comparison. If you do `{} === {}` in JavaScript, it's actually false, because you are comparing 2 different objects, who just happen to have the same contents... so if you need them to be identical, you can use the useMemo hook for that.
Facing this error: React Hook "useLoadScript" is called in function "map" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks
Leigh, help please. Why is the MarkerClusterer not working anymore ? No overload matches this call. Overload 1 of 2, '(props: MarkerClustererProps | Readonly): ClustererComponent', gave the following error. Type 'Element[]' is missing the following properties from type 'Element': type, props, key Overload 2 of 2, '(props: MarkerClustererProps, context: any): ClustererComponent', gave the following error. Type 'Element[]' is not assignable to type 'Element'.ts(2769) index.d.ts(378, 15): The expected type comes from the return type of this signature. index.d.ts(378, 15): The expected type comes from the return type of this signature.
hey Leight, your videos are perfect. I recently i have to make a react app what need a map to render. I choose to use google map. But since i am new to the world of map and how maps are made and rendered specially with react and google map, I was wondering if the react-google-map/api is the right package to choose? I have also seen it's documentation, it is not that much and not a big community. Could please state why are you using it? and the pros and cons of it?
Hey thanks for this tutorial, working with react is kind of amazing when you can create something like this in minutes. I have a problem though when using strictmode=true the directionrenderer kinda gets called twice and then renders the old direction (first; if new building selected) and I am not really sure why. I mean with strictmode: false everything works it is just a little confusing to me.
yourFunction(e)} draggable={true} /> and then extract lat and lng from the event (e) object in the function you create i.e. yourFunction. and target e.latLng.lat(), e.latLng.lng()
I've been struggling with using a custom component as a marker. Everywhere I go says just pass in lat lng props to the children and the maps will handle the rest but that's not happening + typescript it throwing an error :(
Awesome tutorial, love your stuff! I am having an issue with the map styles, though. When I run my dev app on my phone, I get a TypeError. I know it has to do with the "mapId" in the options object, because when I comment it out, I get no error, and it works flawlessly. It seems to work on web, no problem, but on my phone, I get the error message. Also, when I pan and zoom to different locations, its also blurry (This does not happen with the default map styles). As I said before, the pan and zoom is flawless on web, the error is on my phone specifically. Sorry to ask, but I couldn't find anything helpful online. Thanks and great work!!
I need help creating a custom map for my business and I know a website that I want to mimic... Could you please teach me how to this virtually on zoom? Also, what do you charge to teach me?
Both are great! For me Google Maps is the standard, performant, great API, the OG, but MapBox is great too! We're really spoiled as developers these days.
It useless to .env the variables for client side rendering components? since this .env variables will be used on client browser and can be seen. The code you've provided is not safe if the process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY contains a sensitive API key because this key is exposed directly in the client-side code.
Sir, How can i start this project. What should i type when i am building project section. You are using typescript and i dont know how to pass typescript from next.js. So, i built a project typing like " npx create-next-app project-name" then i changed the all js files which is includes".js" to ".tsx". Then when i try to start my project Node.js didnt allow to start my project. It asked me to do type "npm install --save-dev @types/react @types/node" so i did it. Finally, i got "ts.confing.json" file and i started the project and its work. Is it good way to build project like this? Sir could you do building section in your videos for beginners like me ?
Sounds like you took the exact same approach I took :) I normally skip that part because it’s the same every time and it would add 5 mins to each video!
Great video, thanks Leigh! I have some questions about making some customizations to the route generated. First, I wonder if it is possible to access the start and end markers of the route in order to change their icons and style. Second, it is possible to give a different pattern to the line generated and how it can be shown as in 3D. Third, it is possible to click on the route generated in order to show some info window.
![Blox Fruits Dragon Rework Update [Full Stream]](http://i.ytimg.com/vi/EqDAp8udhm0/mqdefault.jpg)
Couldn’t come at a better time as I’m working on a project that uses google api- your previous tutorials are the best google maps api tutorials
Amazing!! I tried with this one to touch a couple of different APIs from the last one: Directions, Clustering, MapID... I hope you like it!
What a fantastic tutorial, thank you so much Leigh. I think this may even be my first RUclips comment in 10 years! Answered so many questions I had about modern usage of some Maps APIs with React, fantastic stuff. The only thing I had to tweak from your code was making the generateHouses() fn take the `office` and not the `center`, since the `center` is never updated apart from the initial page load (so the houses would always be generated away from your office location, if it were different than your initial `center`). Just in case anyone else was struggling with that :) thanks again, phenomenal tutorial!
I was wondering about that very thing!
Additionally, I set the default value for office to center (after reordering those lines of code, of course).
So grateful that I have found this tuts. Leigh, you are doing gods work here. Thanks heaps for rescuing us!!!!!
One of the best videos on your channel. I've learned so much in just 1 hour. Keep up the good work Leigh!
Amazing! Thanks so much Daniel!
You sir are a God sent! Thank you for such a great video. I've had so many problems with other tutorials, but your Google Maps series has helped so much! I really appreciate your videos!!!
For those having issues with markers for house not rendering around the work location. Try using the tweaked useMemo below instead
const houses = useMemo(function(){
if(office) return generateHouses(office);
},[office]);
What is the code if you want display in "miles" instead of "km"
Awesome thanks makes sense
The courses no1 makes these days! pure gold!
Thank you! This tutorial has accelerated my learning curve regarding google maps.
Are you looking for the best google maps turorials on youtube ? Leigh Haliday , no doubt , Thanks man. would love to see you doing more tutorials.
Thank you Abdelhamid! I appreciate the kind words!
I already know this is gonna be good! Thanks Leigh.
Haha thanks Ryan, did it live up to expectations?
@@leighhalliday Of course Leigh, you never disappoint!
These are the kind of tutorials I love! I'm tired of looking up a new technology and seeing the same tutorial over and over again
Will definitely switch to this package and follow part of your tutorial
Love the thumbnail btw 🤣
Thanks for the kind feedback!! Glad you enjoyed it!
Very useful video about using google map in react project. Thank you so much Leigh !
best starter tutorial for google maps in react . thank you for this valuable content !!!
The best video on ReactJS and Google Maps & Place API. Thank you Sir.
TNice tutorials was honestly so helpful. I’ve been working around soft, whether it be church, singing in a band, or theatre for most of my life so tNice tutorials
This was such a good demo and scenario! Thank you Leigh.
This is absolutly working for 100% sure.enjoy it.Thank you.
So glad I found you channel man!
Gosh, you're incredible man. Thanks for sharing your knowledge!!!
Thankyou for sharing such valuable information... I really needed this! 🤩
Great videos learned a lot of things through this video. Thanks to you Leigh Halliday. Please make a video on Geofencing
Exactly what I was looking for! Just need some minor changes. Thanks a lot
Thanks for everything your the great man, stay healthy bro! You are the best
Sorry for interruption, but then you build your frontend app, your env vars for frontend is packaged by bundler into the code, so there is no issue to use key in place. You should protect your key by limiting domain names per key instead.
You're right, but I think it's a good habit to get in to! Especially for public repos on GitHub, having API keys exposed makes them pretty easy to find, and if you accidentally leave a backend key exposed, you're in big trouble! Better to practice good "key hygiene" all around, which I think means keeping them in ENV vars, and also limiting them to domains like you said.
watcNice tutorialng one or two every night, SUPER helpful, cNice tutorialll and clear. Great content, can't wait to watch them all.
Never saw such well explained video thanks you ❤️❤️❤️
Genius composition!
this is a product in itself. very nice
This is amazing video with a lot of great helpful works very you.
Thank you, It was really helpful.
Nice tutorial.... Very helpful
Wow nice tutorial sir. Very useful
I tried to do this as explaining it but all I can see is Commute? and Map on this page
I don't think so but does it work on only Mac?
I'm begginer..
(Anyway this lecture is so clear that I can understand the logic!! I love this!!)
You saved me sir. Thank you.
This is just amazing. Thanks
Glad you like it!
Good guide for beginners)
Stellar content, as always
Thanks Tony, really appreciate it!
Great video! Thank you!
Great content man and just when i needed it, can one add an option to ask for the users current location?
This is very useful, Thank you very much 🙏
Thank you Kasper, glad it was useful!
Hey Leigh, I really appreciate your tutorial and the work you've done. I just have one problem in my project on which I cant find any workarouds/solutions. I have current user pin and I want it to behave exactly like in google maps ( Follow user, move map position, smooth transition, etc... ) do you have perhaps any tutorial on this subject?
Mantab Om Hall.. matur suwun
Thank you very much for making amazing map videos, @Leigh Halliday, I have a question or we can say doubt if you can answer, I am experimenting on a map project, where we will have 15 million markers on the map, we are simplly adding them on the map via array.map function, which is the straightforward thing, but here is the challenge we have a filter UI where we have checkboxes, to hide/show markers based on their category, everytime we want to hide/show some markers, we filter the main array, which causes the state change, and all the 15M marker start rendering again, because of that state change, which causes the freezing issue, what do you think is the way to optimize the performance?
hi sir , i have some doubt in fetch direction , acording your code ui direction is pointing A to B even for me from lat & lang or coming correctly nut ui drection is connenting , can give me solutions for this ...
Leigh Halliday thanks for this great piece work, i just have a question: Can the centre be the original/live position of the user.
Yea! You'll need to use the browser geolocation functionality... that said, the user may not grant you access to it.
one and only easy and working method
I was have no idea to use useMemo on every item to re render map, and mostly i use useEffect when these need to get rerender, many thanks sir, however the packages is different but it's very helpfully
Glad it helped Niwasika! Sometimes useMemo isn't required, it depends if the underlying component (GoogleMap in this case) is doing a shallow comparison or a deep comparison. If you do `{} === {}` in JavaScript, it's actually false, because you are comparing 2 different objects, who just happen to have the same contents... so if you need them to be identical, you can use the useMemo hook for that.
nice tutorial
Facing this error:
React Hook "useLoadScript" is called in function "map" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks
haha good timing. Just about to start a very similar project
Hope it helps :)
GG finally something that works
Leigh, help please. Why is the MarkerClusterer not working anymore ?
No overload matches this call.
Overload 1 of 2, '(props: MarkerClustererProps | Readonly): ClustererComponent', gave the following error.
Type 'Element[]' is missing the following properties from type 'Element': type, props, key
Overload 2 of 2, '(props: MarkerClustererProps, context: any): ClustererComponent', gave the following error.
Type 'Element[]' is not assignable to type 'Element'.ts(2769)
index.d.ts(378, 15): The expected type comes from the return type of this signature.
index.d.ts(378, 15): The expected type comes from the return type of this signature.
I recomnd you two to buy the Producer Edition (And if you have got money, buy the Full Bundle)
worked for . On default it was at Agressive TE for but I clicked to the right
How can we add a marker and set the orientation based on the direction. Like uber's car marker moving towards the direction. thanks
Great video! just a question, can we customize the cluster icon style? How do we do that?
Hi Leigh, is there any way for me to use it's API without entering Billing Info? It stressed me out tho to have to deal with it
Hi man nice tuto,, Is this map is accessible in china region? or do we need some configurations?
which file we've to run to start our project
hey Leight, your videos are perfect. I recently i have to make a react app what need a map to render. I choose to use google map. But since i am new to the world of map and how maps are made and rendered specially with react and google map, I was wondering if the react-google-map/api is the right package to choose? I have also seen it's documentation, it is not that much and not a big community. Could please state why are you using it? and the pros and cons of it?
can does this include navigation from the user's GPS?
Hey thanks for this tutorial, working with react is kind of amazing when you can create something like this in minutes.
I have a problem though when using strictmode=true the directionrenderer kinda gets called twice and then renders the old direction (first; if new building selected) and I am not really sure why. I mean with strictmode: false everything works it is just a little confusing to me.
Please clarify if the goggle-maps-api package is mandatory for react or not ?
hi im trying to follow your code but only with javascript...im stuck at the panTo section. I get an error saying panTo is not a function
Hey there, another great tutorial! Q: if we drag markers around on the map, how would we get the new location into state?
yourFunction(e)}
draggable={true}
/> and then extract lat and lng from the event (e) object in the function you create i.e. yourFunction. and target e.latLng.lat(), e.latLng.lng()
There's a video on In The setup's channel about free DAWs, alternatives, and even if you can't afford it you can "get" it. Not quite an
Can you use soft from soft soft to make profit?
I've been struggling with using a custom component as a marker. Everywhere I go says just pass in lat lng props to the children and the maps will handle the rest but that's not happening + typescript it throwing an error :(
What is the code if you want display in "miles" instead of "km"
Thank you so much
Awesome tutorial, love your stuff!
I am having an issue with the map styles, though. When I run my dev app on my phone, I get a TypeError. I know it has to do with the "mapId" in the options object, because when I comment it out, I get no error, and it works flawlessly. It seems to work on web, no problem, but on my phone, I get the error message. Also, when I pan and zoom to different locations, its also blurry (This does not happen with the default map styles). As I said before, the pan and zoom is flawless on web, the error is on my phone specifically.
Sorry to ask, but I couldn't find anything helpful online.
Thanks and great work!!
how to colour states of a country using this library ? Please help !
Why didn't you go just stp by step?😔
in soft rolls?sorry in my English.I hope you can help
I need help creating a custom map for my business and I know a website that I want to mimic... Could you please teach me how to this virtually on zoom? Also, what do you charge to teach me?
If is not working for you due to a type error. Try this
{clusterer => (
{houses.map(house => (
))}
)}
I tried. The type error is gone then. But i can't see any markers. Any advice ?
I have this issue, did you figure it out?@@kacperm8450
Thank you!
project a lot because I've been working on other stuff (and being lazy lol). Also, I had been facing a recurring problem of content dropouts in
how we can use our distance mapping algorithm in this application ???
How can I delete Circle when user click outside map?
Hi Guys,
I have a requirement in my application, need to show construction zone in Google Maps API. Can you please help me on this
what's your vscode theme?
why am i get 'Cannot read properties of undefined (reading 'maps')' ...
which vscode theme do you use?
Thank you !
Thank you Alex! Hope you enjoyed it!
Hi, how can I re-render polylines sir ?
Alguien me puede orientar de como hacer para ubicar autos en el mapa en java. donde me puedo dirigir para investigar eso. Gracias
Very neat .. just wondering do you prefer mapbox or Google maps for a spatial app !!
Both are great! For me Google Maps is the standard, performant, great API, the OG, but MapBox is great too! We're really spoiled as developers these days.
it propmted me with open your billing account issue. and map is on development mode with watermarks. this aint free anymore?
amazing
It useless to .env the variables for client side rendering components? since this .env variables will be used on client browser and can be seen. The code you've provided is not safe if the process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY contains a sensitive API key because this key is exposed directly in the client-side code.
you! SO MUCH THX!
Thx,
Bravo
I'm trying to send coordinates to back-end...
So awesome
How to get all nearest houses in your office within 1.5km?
Sir, How can i start this project. What should i type when i am building project section. You are using typescript and i dont know how to pass typescript from next.js.
So, i built a project typing like " npx create-next-app project-name" then i changed the all js files which is includes".js" to ".tsx".
Then when i try to start my project Node.js didnt allow to start my project. It asked me to do type "npm install --save-dev @types/react @types/node" so i did it.
Finally, i got "ts.confing.json" file and i started the project and its work. Is it good way to build project like this?
Sir could you do building section in your videos for beginners like me ?
Sounds like you took the exact same approach I took :) I normally skip that part because it’s the same every time and it would add 5 mins to each video!
2 years passed damn
Great video, thanks Leigh! I have some questions about making some customizations to the route generated. First, I wonder if it is possible to access the start and end markers of the route in order to change their icons and style. Second, it is possible to give a different pattern to the line generated and how it can be shown as in 3D. Third, it is possible to click on the route generated in order to show some info window.
You should be my maths teacher
nice video ! can we get the github repo ?
Of course! github.com/leighhalliday/google-maps-react-crash-course
@@leighhalliday thx