What a fantastic tutorial, thank you so much Leigh. I think this may even be my first UA-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!
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!!)
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.
It took 1,5 hours to finish watcNice tutorialng tNice tutorials 18 MINUTES video wNice tutorialle doing all the sa steps on soft soft myself. My brain is fried and
Hi I'm trying to build the starter project (no changes added) and I'm getting the following and can't figure out what to add to the array map() to make it happy. Please help! I'm too noob. ./components/map.tsx:96:19 Type error: 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 'ReactElement': type, props, key Overload 2 of 2, '(props: MarkerClustererProps, context: any): ClustererComponent', gave the following error. Type 'Element[]' is not assignable to type 'Element'.
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!!!
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 ...
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?
I get error trying to import the Combobox files - [!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) - ../../node_modules/@reach/combobox/styles.css (1:0) :root {
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.
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.
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?
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?
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'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 :(
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.
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
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?
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!!
Wow.... you are handsome right now.. :) Btw I learned a lot from you regarding to map. But from now on I prefer to use leaflet. It's free and has a lot features close to google map. Try to make tutorial with leaflet and OSM. Thanks
Why didn't you go just stp by step?😔
Exactly what I was looking for! Just need some minor changes. Thanks a lot
So glad I found you channel man!
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 UA-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).
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 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!
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!
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!!)
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.
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
It took 1,5 hours to finish watcNice tutorialng tNice tutorials 18 MINUTES video wNice tutorialle doing all the sa steps on soft soft myself. My brain is fried and
Hi I'm trying to build the starter project (no changes added) and I'm getting the following and can't figure out what to add to the array map() to make it happy. Please help! I'm too noob.
./components/map.tsx:96:19
Type error: 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 'ReactElement': type, props, key
Overload 2 of 2, '(props: MarkerClustererProps, context: any): ClustererComponent', gave the following error.
Type 'Element[]' is not assignable to type 'Element'.
Same here
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!!!
Hi man nice tuto,, Is this map is accessible in china region? or do we need some configurations?
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'm trying to send coordinates to back-end...
How to get all nearest houses in your office within 1.5km?
which file we've to run to start our project
Great content man and just when i needed it, can one add an option to ask for the users current location?
why did you not do it with javascript - did you forget about us ? that we even existed ?
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?
How can I delete Circle when user click outside map?
what's your vscode theme?
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!
Is it just or does he soft a little bit like Sansa Stark from ga of thrones?
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!
I get error trying to import the Combobox files - [!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) - ../../node_modules/@reach/combobox/styles.css (1:0) :root {
TNice tutorials was for 2 years
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.
and get tNice tutorials soft out.
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 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.
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?
Thankyou for sharing such valuable information... I really needed this! 🤩
Genius composition!
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
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
Is it normal for Canadians to pronounce longitude as "LON-git-ood" instead of "LON-ji-tood"?
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?
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'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 :(
I recomnd you two to buy the Producer Edition (And if you have got money, buy the Full Bundle)
soft interface support.
can does this include navigation from the user's GPS?
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?
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
worked for . On default it was at Agressive TE for but I clicked to the right
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
make fire as soft
How can we add a marker and set the orientation based on the direction. Like uber's car marker moving towards the direction. thanks
in soft rolls?sorry in my English.I hope you can help
Please clarify if the goggle-maps-api package is mandatory for react or not ?
What is the code if you want display in "miles" instead of "km"
Very useful video about using google map in react project. Thank you so much Leigh !
I guarantee tNice tutorials - I am going to pursue soft one way or another. It is my dream to make art that inspires people and shows them so
how to colour states of a country using this library ? Please help !
TNice tutorials
watcNice tutorialng one or two every night, SUPER helpful, cNice tutorialll and clear. Great content, can't wait to watch them all.
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.
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!
Gosh, you're incredible man. Thanks for sharing your knowledge!!!
This is amazing video with a lot of great helpful works very you.
how we can use our distance mapping algorithm in this application ???
Thank you! This tutorial has accelerated my learning curve regarding google maps.
Alguien me puede orientar de como hacer para ubicar autos en el mapa en java. donde me puedo dirigir para investigar eso. Gracias
This is absolutly working for 100% sure.enjoy it.Thank you.
Guttering you don't start from scratch
Lol sa
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
Thanks for everything your the great man, stay healthy bro! You are the best
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?
GG finally something that works
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, how can I re-render polylines sir ?
Never saw such well explained video thanks you ❤️❤️❤️
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!!
The best video on ReactJS and Google Maps & Place API. Thank you Sir.
Can you use soft from soft soft to make profit?
Thank you, It was really helpful.
Great videos learned a lot of things through this video. Thanks to you Leigh Halliday. Please make a video on Geofencing
Great video! just a question, can we customize the cluster icon style? How do we do that?
You should be my maths teacher
one and only easy and working method
is this google map API paid ??By the content is GREAT!!! ❣️
Thank you :) They have a generous free plan which typically covers any personal use. It is pod if you go beyond these limits though.
You saved me sir. Thank you.
best starter tutorial for google maps in react . thank you for this valuable content !!!
This was such a good demo and scenario! Thank you Leigh.
MarkerClusterer is not working anymore. Anyone have the same issue ?
Yes, did you figure it out?
Nice tutorial.... Very helpful
Wow nice tutorial sir. Very useful
this is a product in itself. very nice
which vscode theme do you use?
10:41
The courses no1 makes these days! pure gold!
Good guide for beginners)
Wow.... you are handsome right now.. :) Btw I learned a lot from you regarding to map. But from now on I prefer to use leaflet. It's free and has a lot features close to google map. Try to make tutorial with leaflet and OSM. Thanks
Haha... maybe it's my new lighting :D It's great to have options! They all push each other to improve and in the end the users and developers win.
@@leighhalliday Yes... agree with you. You are great!
Great video! Thank you!