What a fantastic tutorial, thank you so much Leigh. I think this may even be my first TH-cam 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!!!
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
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]);
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!!)
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.
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 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?
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 ...
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?
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?
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.
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
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?
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!!
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 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.
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.
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 :(
Greetings! First of all, thank you for the amazing tutorial. I'm currently working on a project using the Google Maps API and this is really helping. However, I'm encountering an error in map.tsx. Namely this line: const onLoad = useCallback((map) => (mapRef.current = map),[]); The error message says: "Parameter 'map' implicitly has an 'any' type.ts(7006)" When I try to specify the type e.g. useCallback((map:google.maps.Map)) or map:GoogleMap, either the later onLoad function or the mapRef.current... breaks. During development in localhost this isn't a big deal, but I can't build the project with this error. Do you have an idea, how to fix this?
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.
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!
So grateful that I have found this tuts. Leigh, you are doing gods work here. Thanks heaps for rescuing us!!!!!
The courses no1 makes these days! pure gold!
What a fantastic tutorial, thank you so much Leigh. I think this may even be my first TH-cam 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).
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!
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!
Thank you! This tutorial has accelerated my learning curve regarding google maps.
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!!!
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!
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!
Very useful video about using google map in react project. Thank you so much Leigh !
This was such a good demo and scenario! Thank you Leigh.
best starter tutorial for google maps in react . thank you for this valuable content !!!
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
The best video on ReactJS and Google Maps & Place API. Thank you Sir.
Genius composition!
This is absolutly working for 100% sure.enjoy it.Thank you.
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
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! 🤩
Exactly what I was looking for! Just need some minor changes. Thanks a lot
Never saw such well explained video thanks you ❤️❤️❤️
Great videos learned a lot of things through this video. Thanks to you Leigh Halliday. Please make a video on Geofencing
Thanks for everything your the great man, stay healthy bro! You are the best
this is a product in itself. very nice
Great content man and just when i needed it, can one add an option to ask for the users current location?
watcNice tutorialng one or two every night, SUPER helpful, cNice tutorialll and clear. Great content, can't wait to watch them all.
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!!)
This is just amazing. Thanks
Glad you like it!
This is amazing video with a lot of great helpful works very you.
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.
Thank you, It was really helpful.
Nice tutorial.... Very helpful
Great video! Thank you!
You saved me sir. Thank you.
Good guide for beginners)
Wow nice tutorial sir. Very useful
This is very useful, Thank you very much 🙏
Thank you Kasper, glad it was useful!
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 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?
Stellar content, as always
Thanks Tony, really appreciate it!
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 ...
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?
one and only easy and working method
haha good timing. Just about to start a very similar project
Hope it helps :)
nice tutorial
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
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.
Great video! just a question, can we customize the cluster icon style? How do we do that?
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?
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
Mantab Om Hall.. matur suwun
GG finally something that works
worked for . On default it was at Agressive TE for but I clicked to the right
Why didn't you go just stp by step?😔
Please clarify if the goggle-maps-api package is mandatory for react or not ?
Thank you so much
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.
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
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?
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!!
can does this include navigation from the user's GPS?
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
I recomnd you two to buy the Producer Edition (And if you have got money, buy the Full Bundle)
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
2 years passed damn
Thank you !
Thank you Alex! Hope you enjoyed it!
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()
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.
How can we add a marker and set the orientation based on the direction. Like uber's car marker moving towards the direction. thanks
what's your vscode theme?
What is the code if you want display in "miles" instead of "km"
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.
How can I delete Circle when user click outside map?
Can you use soft from soft soft to make profit?
you! SO MUCH THX!
in soft rolls?sorry in my English.I hope you can help
how we can use our distance mapping algorithm in this application ???
Thx,
Bravo
why am i get 'Cannot read properties of undefined (reading 'maps')' ...
it propmted me with open your billing account issue. and map is on development mode with watermarks. this aint free anymore?
Nice
how to colour states of a country using this library ? Please help !
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 :(
Greetings! First of all, thank you for the amazing tutorial. I'm currently working on a project using the Google Maps API and this is really helping.
However, I'm encountering an error in map.tsx. Namely this line:
const onLoad = useCallback((map) => (mapRef.current = map),[]);
The error message says: "Parameter 'map' implicitly has an 'any' type.ts(7006)"
When I try to specify the type e.g. useCallback((map:google.maps.Map)) or map:GoogleMap, either the later onLoad function or the mapRef.current... breaks. During development in localhost this isn't a big deal, but I can't build the project with this error. Do you have an idea, how to fix this?
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
which vscode theme do you use?
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
cool!
How to get all nearest houses in your office within 1.5km?
Hi, how can I re-render polylines sir ?
I'm trying to send coordinates to back-end...
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!
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 should be my maths teacher
nice
top content
Alguien me puede orientar de como hacer para ubicar autos en el mapa en java. donde me puedo dirigir para investigar eso. Gracias