Building an interactive map with Google Maps Platform and React - Crash Course

[@zb2747]

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

[@leighhalliday]

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!

[@tanvirazhar]

So grateful that I have found this tuts. Leigh, you are doing gods work here. Thanks heaps for rescuing us!!!!!

[@ricardomagalhaes6777]

What a fantastic tutorial, thank you so much Leigh. I think this may even be my first KZbin 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!

[@everObvious]

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).

[@belkocik]

The courses no1 makes these days! pure gold!

[@daniel-nagy]

One of the best videos on your channel. I've learned so much in just 1 hour. Keep up the good work Leigh!

[@leighhalliday]

Amazing! Thanks so much Daniel!

[@nicholasroman8071]

Thank you! This tutorial has accelerated my learning curve regarding google maps.

[@christopherreif3624]

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!!!

[@nirajankarki275]

Very useful video about using google map in react project. Thank you so much Leigh !

[@AbdelhameedG]

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.

[@leighhalliday]

Thank you Abdelhamid! I appreciate the kind words!

[@outis99]

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 🤣

[@leighhalliday]

Thanks for the kind feedback!! Glad you enjoyed it!

[@LuthandoMaqondo]

The best video on ReactJS and Google Maps & Place API. Thank you Sir.

[@willettelaland6318]

This is absolutly working for 100% sure.enjoy it.Thank you.

[@sarnarider9872]

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

[@ryadean]

I already know this is gonna be good! Thanks Leigh.

[@leighhalliday]

Haha thanks Ryan, did it live up to expectations?

[@ryadean]

@@leighhalliday Of course Leigh, you never disappoint!

[@benzz22126]

best starter tutorial for google maps in react . thank you for this valuable content !!!

[@MrYyope15555]

Genius composition!

[@mm93249]

This was such a good demo and scenario! Thank you Leigh.

[@Randomblues277]

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]);

[@demetriusguidry6431]

What is the code if you want display in "miles" instead of "km"

[@explorewithluke]

Awesome thanks makes sense

[@murilodutra4887]

Gosh, you're incredible man. Thanks for sharing your knowledge!!!

[@RomiLenoir]

Exactly what I was looking for! Just need some minor changes. Thanks a lot

[@mohammadsubhan1318]

Thankyou for sharing such valuable information... I really needed this! 🤩

[@chrystianespinoza922]

watcNice tutorialng one or two every night, SUPER helpful, cNice tutorialll and clear. Great content, can't wait to watch them all.

[@JeatBunkie]

So glad I found you channel man!

[@anassaleem8500]

Great videos learned a lot of things through this video. Thanks to you Leigh Halliday. Please make a video on Geofencing

[@franktfrisby]

this is a product in itself. very nice

[@dailylife2170]

Never saw such well explained video thanks you ❤️❤️❤️

[@gazizbay4082]

Thanks for everything your the great man, stay healthy bro! You are the best

[@cleopasmuchiri]

Great content man and just when i needed it, can one add an option to ask for the users current location?

[@121-f7y]

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!!)

[@yjyou7780]

You saved me sir. Thank you.

[@grassia423]

This is amazing video with a lot of great helpful works very you.

[@gerardbanaag1951]

one and only easy and working method

[@yohanaasintha5562]

Thank you, It was really helpful.

[@anirup.patnaik]

This is just amazing. Thanks

[@leighhalliday]

Glad you like it!

[@justfly1984]

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.

[@leighhalliday]

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.

[@nicholasbraveson1173]

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?

[@Boylee_]

Good guide for beginners)

[@Lovedeep555]

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?

[@adaichesunday4104]

Nice tutorial.... Very helpful

[@aleksandarmojsic168]

Great video! Thank you!

[@JM-og9ph]

worked for . On default it was at Agressive TE for but I clicked to the right

[@dziugasgiedraitis2394]

GG finally something that works

[@willyhorizont8672]

Wow nice tutorial sir. Very useful

[@rezaghifary3653]

Hi man nice tuto,, Is this map is accessible in china region? or do we need some configurations?

[@KwesikeNuria]

Leigh Halliday thanks for this great piece work, i just have a question: Can the centre be the original/live position of the user.

[@leighhalliday]

Yea! You'll need to use the browser geolocation functionality... that said, the user may not grant you access to it.

[@kasperbirch3263]

This is very useful, Thank you very much 🙏

[@leighhalliday]

Thank you Kasper, glad it was useful!

[@hadisiswanto1062]

Mantab Om Hall.. matur suwun

[@larryjasontueno9016]

Why didn't you go just stp by step?😔

[@kacperm8450]

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.

[@tonyrinaldi6846]

Stellar content, as always

[@leighhalliday]

Thanks Tony, really appreciate it!

[@albab790]

Thank you so much

[@jatinawasthi2647]

I recomnd you two to buy the Producer Edition (And if you have got money, buy the Full Bundle)

[@AbhishekDesignAccent]

nice tutorial

[@spongebob93lover]

Great video! just a question, can we customize the cluster icon style? How do we do that?

[@zamanEhsani]

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?

[@Kathrual]

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.

[@niwasikajhos]

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

[@leighhalliday]

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.

[@TheVGJournal]

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!!

[@inadogsworld]

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?

[@AdamHollister]

haha good timing. Just about to start a very similar project

[@leighhalliday]

Hope it helps :)

[@mohamedusama6375]

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 ...

[@alexg7282]

Thank you !

[@leighhalliday]

Thank you Alex! Hope you enjoyed it!

[@mukulsoni8263]

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

[@shinobi_coder88]

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

[@instinct_gallant8694]

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

[@Samuelrajsams]

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

[@geosystems2106]

Please clarify if the goggle-maps-api package is mandatory for react or not ?

[@koa1663]

can does this include navigation from the user's GPS?

[@karinagabrielaserranorodri5646]

you! SO MUCH THX!

[@k.aleksanderwyszynski9168]

Hey there, another great tutorial! Q: if we drag markers around on the map, how would we get the new location into state?

[@azeezadewale2749]

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()

[@shreyanshgajipara]

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

[@abdelhameedhamdy]

Very neat .. just wondering do you prefer mapbox or Google maps for a spatial app !!

[@leighhalliday]

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.

[@rayenhidri584]

Thx, Bravo

[@RishiMohinani]

which file we've to run to start our project

[@jeffinj7707]

How can we add a marker and set the orientation based on the direction. Like uber's car marker moving towards the direction. thanks

[@benzz22126]

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

[@pb8655]

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 :(

[@moniqueanncamillegarcia1797]

Nice

[@nath0x_]

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.

[@AlexA-hx7du]

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.

[@antoparjiyo2785]

2 years passed damn

[@demetriusguidry6431]

What is the code if you want display in "miles" instead of "km"

[@learnwithkiranthami]

in soft rolls?sorry in my English.I hope you can help

[@codingroom928]

why am i get 'Cannot read properties of undefined (reading 'maps')' ...

[@EmanualJade]

If is not working for you due to a type error. Try this {clusterer => ( {houses.map(house => ( ))} )}

[@kacperm8450]

I tried. The type error is gone then. But i can't see any markers. Any advice ?

[@Luke-fo9bo]

I have this issue, did you figure it out?@@kacperm8450

[@СлаваТихонов-ч6о]

Thank you!

[@chanzerone0516]

what's your vscode theme?

[@bogdangaafiga4056]

cool!

[@yuliiasvystak1644]

How can I delete Circle when user click outside map?

[@adityasharma9983]

how we can use our distance mapping algorithm in this application ???

[@antoparjiyo2785]

Can you use soft from soft soft to make profit?

[@orioldemo5380]

how to colour states of a country using this library ? Please help !

[@magnifico689]

How to get all nearest houses in your office within 1.5km?

[@brucegreentree6190]

So awesome

[@markespedido4354]

nice

[@gigakvachakhia4777]

it propmted me with open your billing account issue. and map is on development mode with watermarks. this aint free anymore?

[@ertemeren]

I'm trying to send coordinates to back-end...

[@ahmedfarhat8853]

You should be my maths teacher

[@nikako1889]

which vscode theme do you use?

[@guillermojimenez6581]

Hi, how can I re-render polylines sir ?

[@yusufozcelik4634]

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 ?

[@leighhalliday]

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!