Google Maps & Google Places in React

แชร์
ฝัง
  • เผยแพร่เมื่อ 11 พ.ย. 2024

ความคิดเห็น • 501

  • @heatrazer
    @heatrazer 4 ปีที่แล้ว +71

    Leigh, I genuinely want to thank you for the time and effort you're putting into helping us learn new things. Thank you so much for your no-nonsense approach that assumes a minimum level of competence as well! Your pace is just right and I've learned so much. I just hit the subscribe button and checked the bell icon. Much much appreciated and keep up the great work my friend!

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว +4

      Thank you Haret, I appreciate it and am so glad that you find these videos useful! Happy to have you on board... I plan to keep pumping these videos out :D

    • @Sj0846
      @Sj0846 3 ปีที่แล้ว +2

      @@leighhalliday Yes Leigh i also learned lot from u and ur teaching style is also clear and awesome. Thank u so much. Keep up the good work.

    • @clyder5502
      @clyder5502 3 ปีที่แล้ว

      @@leighhalliday You truly are the best, as a person from a third world country, i would honestly not mind paying for your videos, they're so informative and complete while still being accessible to beginners

  • @gerardomaybocs
    @gerardomaybocs 4 ปีที่แล้ว +8

    Thank you so much for this tutorial. I recently got a Job as a React Developer and for my first project I need to use Google Maps. This was very helpful.

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว +1

      Congratulations Gerardo! The first job is the hardest to get, so you're off to a great start :)

  • @aaronshort3300
    @aaronshort3300 2 ปีที่แล้ว

    Best tutorials I've ever seen for implementing Google maps API in react. This helped me out more than you'll ever know thank you so much!

    • @leighhalliday
      @leighhalliday  2 ปีที่แล้ว

      Thanks Aaron!! Glad it helped!

  • @scandiscus7516
    @scandiscus7516 4 ปีที่แล้ว +6

    I've been trying to get a Google maps written with this new API, and running into all sorts of problems. This was invaluable in getting my project off the ground. Thank you!

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว +2

      That's awesome! Glad it could help in some way :D

    • @scandiscus7516
      @scandiscus7516 4 ปีที่แล้ว

      @@leighhalliday I do have a quick question, though - I'm assuming that, when this site is live, when one user marks a bear, that that marker is present to others who load map on the same website? Thank you!

  • @kevindevlin7276
    @kevindevlin7276 2 ปีที่แล้ว

    You had the opportunity to say "That would be bad news Bears" and you didn't. Kind of disappointed but thanks for the video! This will help with my project I'm working on!

  • @thesavoyard
    @thesavoyard 2 ปีที่แล้ว

    You are by far the best React tutor I've seen.

    • @leighhalliday
      @leighhalliday  2 ปีที่แล้ว +1

      Thanks Christopher! Glad you’re enjoying the content :)

  • @roket99
    @roket99 2 ปีที่แล้ว

    Discovered the channel recentrly. People like you are why i like programming. thanks again!

  • @jeresher6821
    @jeresher6821 4 ปีที่แล้ว +3

    You're one of the best lecturers I've come across in my life

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว

      Thank you very much, Jere!! Glad you enjoyed it :)

    • @clyder5502
      @clyder5502 3 ปีที่แล้ว

      if only professors taught programming like him.. that'd be great

  • @emanuelacosta2541
    @emanuelacosta2541 2 ปีที่แล้ว +1

    Brother, you saved my ass this week, thank you, awesome tutorial!!

  • @MrVisheshsingh
    @MrVisheshsingh 4 ปีที่แล้ว +5

    Leigh halliday never fails to surprise! 🎉😍

  • @johnhaupenthal
    @johnhaupenthal 2 ปีที่แล้ว

    This is another one of your videos that really helped me out in a pinch. Thanks for always putting out great content.

    • @leighhalliday
      @leighhalliday  2 ปีที่แล้ว

      Thanks John! I have an awesome new google maps video coming next Monday :)

  • @mrlemon592
    @mrlemon592 3 ปีที่แล้ว

    Best Google Maps video i have ever seen.

  • @emersonaraujo406
    @emersonaraujo406 4 ปีที่แล้ว +14

    Amazing! Sir, You are always bringing us the best content ever with simplicity, knowledge, competence and all the good adjectives we shall say to someone who put such a great effort on teaching and sharing with the community. Thanks a lot. You should be high ranked from youtube. Best regards.

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว +4

      Thanks for your support, Emerson!! Haha... may the TH-cam algorithms listen to you and look kindly upon my ranking :)

  • @kenmuyesu7895
    @kenmuyesu7895 2 ปีที่แล้ว

    This tutorial really helped me with my Google Maps API project! 👏🏿

  • @cband8030
    @cband8030 2 ปีที่แล้ว

    Holy shit, a clear explanation. I must be dreaming. Thanks so much for helping me get the map rolling. Subscribing for more.

  • @sethmckilla
    @sethmckilla 3 ปีที่แล้ว +3

    Wow, amazing video Leigh! I absolutely LOVED the full recap/closing summary at the end. Very few tutorials out there do this and it was incredibly helpful!

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว

      Ah nice, that's good to know! I wasn't sure if anyone watched the recap hehe :D

  • @marcocarrazza7843
    @marcocarrazza7843 2 ปีที่แล้ว +1

    Many thanks for this tutorial bro! Really powerfull application explained step by step in a very easy way!
    Just for those how has problems showing markers on map, in case you are using React 18+ then you must import MarkerF instead of Marker.

  • @devbites77
    @devbites77 2 ปีที่แล้ว

    HI! Thanks for your walkthrough of the Google Maps API. I learned a lot, and all very useful.

  • @shirk4123
    @shirk4123 4 ปีที่แล้ว

    Can't describe in words how much this guide helps, so, just, thank you very much! :)

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว

      You're welcome, Shir! Glad it was able to help :)

  • @chrisbell7372
    @chrisbell7372 4 ปีที่แล้ว +8

    I REALLY needed this in my life. Thanks Leigh!!!

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว +4

      Let's just hope you don't need this because of excessive bear attacks

  • @furankmarutin
    @furankmarutin 3 ปีที่แล้ว

    Leigh, thank you so much for this video, you helped me a lot and now i can finish my final project .

  • @ivand.sanchez9507
    @ivand.sanchez9507 3 ปีที่แล้ว

    thanks man, all the content in this video is amazing, it helped me understand this dependency. Thank you very much from Colombia

  • @jacobkleiman7466
    @jacobkleiman7466 4 ปีที่แล้ว +1

    You're so Canadian I love it. Also thanks so much for this tutorial, super helpful, very clear and concise. You have a real knack for this stuff! Keep up the good work!!

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว

      Haha... truth is that you have to drive 2-3 hours from where I live until you start to get into bear country :D Thank you!

  • @waytocode
    @waytocode 2 ปีที่แล้ว

    Thanks Leigh! Amazing tutorial to learn and use google maps with react. Enjoyed the course:)

    • @leighhalliday
      @leighhalliday  2 ปีที่แล้ว

      Awesome!! Glad you enjoyed it :)

  • @irhamputra3666
    @irhamputra3666 4 ปีที่แล้ว +4

    You always create an amazing tutorial with simplicity. Thanks again for the knowledge that you give. Keep on going :)

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว +2

      Thank you Muhamad!! No plans on stopping haha!

  • @cempakajanuari5983
    @cempakajanuari5983 3 ปีที่แล้ว

    What can I say? You are the master that I need to learn from. Great lesson and thanks. You save my time alot.

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว

      Thank you so much Cempaka! Glad you enjoyed it!

  • @thomasmullaney3472
    @thomasmullaney3472 3 ปีที่แล้ว

    Your videos have been great in giving me a platform to learn what can be grueling. I might not be able to do this on my own yet, but you're giving me great resources to start to tinker and dabble.

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว

      Nice! You'll get there, just takes time and effort!

  • @bensalehzainelabidine5221
    @bensalehzainelabidine5221 3 ปีที่แล้ว

    Thank you for the clarity and the explanations

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว +2

      Glad you enjoyed it Bensaleh!

  • @stevenharder308
    @stevenharder308 2 ปีที่แล้ว

    Thank you. Lots of great examples in this video.

  • @PepperNoh
    @PepperNoh 2 ปีที่แล้ว

    Thank you so much for such a great tutorial! This is just what I needed. I finally handled the rerendering issue in my project with this. I'm grateful to know this channel. Thank you.

    • @leighhalliday
      @leighhalliday  2 ปีที่แล้ว +1

      Amazing!! Glad the video helped :)

  • @minako98501
    @minako98501 4 ปีที่แล้ว +1

    Wow. Just, wow. That was so clear and easy to follow. Thank you so much for this incredible tutorial! You helped make my first experience with google maps a pleasant one.

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว

      Awesome! Glad I could help Brittany! Thanks for saying hi :)

  • @siobhanx3525
    @siobhanx3525 4 ปีที่แล้ว

    Another gem Leigh:) I'm currently working on a React with Google Maps project & this was super helpful. Many thanks for taking the time to create these excellent tutorials and present them so well.

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว +1

      Thanks again Jeanne!! No problem at all... glad people are enjoying them.

  • @lavish3683
    @lavish3683 3 ปีที่แล้ว +1

    very useful and great explanation .

  • @Zechey
    @Zechey 3 ปีที่แล้ว

    ah damn, dumb me just watched your older maps video and now I feel I gotta forget almost all of that since a lot of it is deprecated and watch this one, thanks for the videos though really informative!

  • @sushispicelatte
    @sushispicelatte 4 ปีที่แล้ว

    Your tutorials are awesome! I've learned a lot of stuff I've been curious about but didn't know where to start. Thank you SO MUCH!

  • @trangnusi13
    @trangnusi13 3 ปีที่แล้ว

    One hour of great value! Thanks so much!

  • @bolillospartano
    @bolillospartano 2 ปีที่แล้ว +1

    Some interesting tips:
    11:00 How you should use emojis
    21:17 useState when you want to re-render and useRef when you want to retain state without causing re-renders

    • @leighhalliday
      @leighhalliday  2 ปีที่แล้ว +1

      Thanks for sharing the timestamps :)

  • @hariszafar2708
    @hariszafar2708 3 ปีที่แล้ว

    YOU ARE A LIFE SAVER! This is so informative and well explained

  • @ellerachel3024
    @ellerachel3024 4 ปีที่แล้ว +1

    This is so clutch for my final project! I have to change up some of the functionality, but you gave me such a great start! Thank you thank you!

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว

      Nice! Glad I could help in some way, Elle! Congrats on getting your final project done!!

  • @jasonma1904
    @jasonma1904 4 ปีที่แล้ว +2

    What a cute gigantic bear haha. Nice tutorial and thank you for all of your teachings. 😼

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว +1

      Hahaha... I should have left the bear that big, no?

  • @smhim
    @smhim ปีที่แล้ว

    THANK YOU FOR THIS GREAT VIDEO. IT IS SO CLEAN.

  • @billchen4923
    @billchen4923 3 ปีที่แล้ว

    Awesome tutorial, this is one of the best courses about Google map, you really helped me a lot.

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว

      Woohoo!! Check out my actual course: next.leighhalliday.com I think you'll enjoy it!

  • @alvinacosta2312
    @alvinacosta2312 4 ปีที่แล้ว

    Awesome! Super thank you for this wonderful tutorial. Very clean, concise and beginner-friendly, i guess. I'll be waiting for more real world react projects from you. This was just great. Keep up the excellent work, much appreciated!

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว +1

      Thank you very much, Alvin! I definitely need to do more "projects" rather than smaller one off videos.

    • @alvinacosta2312
      @alvinacosta2312 4 ปีที่แล้ว

      @@leighhalliday another thing bro, what extension are you using for those cool emoji pop up? thanks!

  • @bdk9830
    @bdk9830 3 ปีที่แล้ว

    thank you so much for covering tons of useful things in this tutorial!!. this video is one of the most helpful and best video for me. !!

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว +1

      Thanks BD! Glad you enjoyed it!

    • @bdk9830
      @bdk9830 3 ปีที่แล้ว

      Is there any way to customize the basic marker in the google maps API? I searched on the internet for a long time to make that red basic marker look like the one on the airbnb web page displaying prices on a white oval. any hints?? 😭

  • @vmayn92
    @vmayn92 2 ปีที่แล้ว +1

    Thanks for the video Leigh, this really helped a lot. Still struggling with how to restrict searches to only certain place types. Would appreciate it a ton if you could shed some light.

  • @adsuabeakufea
    @adsuabeakufea 2 ปีที่แล้ว

    Such a fantastic video. Great explanations behind all of your best-practices decisions. And frankly, if this video is unscripted, I might be even more impressed with your communication skills than your technical ones haha. Mad props

    • @leighhalliday
      @leighhalliday  2 ปีที่แล้ว +1

      Thanks Aidan! I typically build the app once and then re-build it on video… so not really scripted but it’s not like I’m figuring it out for the first time.

    • @adsuabeakufea
      @adsuabeakufea 2 ปีที่แล้ว

      @@leighhalliday very nice 👍

  • @DiplomaticGrief
    @DiplomaticGrief 2 ปีที่แล้ว

    First thank you. This has been incredibly informational and will help me in a lot of ways with the app that I'm creating. Second. This is the most Canadian react tutorial in all of youtube. Please please please correct me if there is a react tutorial more Canadian than an app for spotting bears in Toronto.

    • @leighhalliday
      @leighhalliday  2 ปีที่แล้ว +1

      Haha thank you Marc :) glad you enjoyed it! I’ll have new maps content coming early 2022! Watch out for the bears.

  • @mrkhoros
    @mrkhoros 4 ปีที่แล้ว +3

    Was looking forward to this. Thanks.

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว +1

      Glad you enjoyed it!! Thanks, Hypo!

  • @Hollow_void_in_my_head
    @Hollow_void_in_my_head 3 ปีที่แล้ว

    Very useful tutorial, I really appreciate how you explain everything in detail. And I subscribed you to :)

  • @jashsanghavi5779
    @jashsanghavi5779 2 ปีที่แล้ว

    Great explanation, Thankyou for the video , Helped a lot

  • @manukyanq
    @manukyanq 4 ปีที่แล้ว +2

    You are my hero, so useful tutorials ❤️❤️❤️

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว +2

      Haha... while hero may be a bit strong to describe the tutorials I make, I'm very appreciative! Thanks for your support :)

  • @margillus
    @margillus 3 ปีที่แล้ว

    Gracias por este videoo, amé la explicación, tu inglés, y todo el contenido. Gracias!

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว +1

      Muchas gracias Marcia!! Me alegra escucharlo!

  • @lastrafda519
    @lastrafda519 4 ปีที่แล้ว +1

    I just finished watching your video, it was great and I learned a lot. Thank you very much

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว

      Nice! That's the goal!! Thanks for watching :)

  • @grigorfanyan1821
    @grigorfanyan1821 2 ปีที่แล้ว

    Thanks, man, this is really great. Helped me a lot

    • @leighhalliday
      @leighhalliday  2 ปีที่แล้ว

      Awesome, glad it helped Grigor!

  • @avneet12284
    @avneet12284 3 ปีที่แล้ว

    truly excellent - so much effort involved

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว +1

      Thank you Avneet! Glad you enjoyed it :)

  • @LSmerk
    @LSmerk 4 ปีที่แล้ว +1

    Thanks! Just used the Map only in a Gatsby project. Thank you!

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว

      Nice!! If the app is live, feel free to share it! Would love to check it out.

  • @ken8144
    @ken8144 4 ปีที่แล้ว +1

    Thanks man. This was very helpful

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว +1

      Glad you enjoyed it, Karis! Thanks for saying hi!

  • @seahorsebyte
    @seahorsebyte 4 ปีที่แล้ว +3

    Thanks for your videos Leigh. I believe you also need Geocoding API enabled on Google (on your api key for the project)

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว +2

      Ah shoot, I think you're right! I must have had it already enabled on my account so didn't notice :)

  • @tatojoel1
    @tatojoel1 4 ปีที่แล้ว

    Great! Thanks for your time in showing us this example, it was very useful for me!
    Best regards!

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว +1

      Happy to help! Thanks for saying hi :)

  • @Dhiren04
    @Dhiren04 3 ปีที่แล้ว

    Man, thank you so much, this was incredible!

  • @splyntwho
    @splyntwho 2 ปีที่แล้ว

    Wow! this is perfect! Thank you so much!!!

  • @tendies
    @tendies 3 ปีที่แล้ว

    Thank you for sharing this information!

  • @felixndifon8511
    @felixndifon8511 3 ปีที่แล้ว

    sweet tutorial, i love it

  • @codingchoi5916
    @codingchoi5916 3 ปีที่แล้ว +1

    I code along with your video, and it throws index.js:1 TypeError: Cannot read properties of undefined (reading 'panTo') when I search location. When I console.log(panTo), I realize that const mapRef = React.useRef() is undefined. How should I start fix const mapRef = React.useRef() to be defined?

  • @p33yush
    @p33yush 4 ปีที่แล้ว +2

    Thanks for this tutorial Its amazing

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว +2

      No prob!! Glad you enjoyed the tutorial :)

  • @ghettosmurfph
    @ghettosmurfph 3 ปีที่แล้ว

    Great video, really helpful. Subbed for future content :)

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว

      Thanks, Fran! Lots more videos on the way :)

  • @iamdeveloper2580
    @iamdeveloper2580 3 ปีที่แล้ว

    You are my hero ! a lot of thanks, great video

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว

      Haha thanks, glad you enjoyed it :)

  • @angryydev
    @angryydev 2 ปีที่แล้ว

    Thank you so much, this content is awesome

  • @digigoliath
    @digigoliath 4 ปีที่แล้ว

    Awesome. A very useful project. TQVM!!!

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว +1

      Thank you for saying hi and for the support! :)

  • @dannylake1968
    @dannylake1968 4 ปีที่แล้ว

    This was awesome. Thanks! Subscribed -

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว

      Thanks so much Danny, I appreciate the support!

  • @MicaelaBanfi
    @MicaelaBanfi 3 ปีที่แล้ว +1

    Hi! Great video, thank you. One question, everything works except for "use-places-autocomplete". Every time i uncomment the component i get "Invalid hook call..." Is there a way to fix it.?

  • @giandemais
    @giandemais 4 ปีที่แล้ว +1

    Thank you so much for this video, it really helped me a lot!!!!!

  • @naziasebelly781
    @naziasebelly781 4 ปีที่แล้ว

    Thank you so much. This video was very helpful to me.

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว +1

      You're welcome! Glad you enjoyed it Nazia!

  • @POVShotgun
    @POVShotgun 2 ปีที่แล้ว

    HI, fantastic tutorial, but one thing that does escape me a bit is the usage of callbacks. What's the purpose behind it as opposed to the regular old const blah = () => { return bleh} stuff? I think the best i got is that it runs early? but idek its a wild guess

  • @jesusmedinavillalpando8014
    @jesusmedinavillalpando8014 4 ปีที่แล้ว

    Brilliant. Thanks for share this knowledge

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว +1

      Cheers! Glad you enjoyed it, Medina!

  • @mohanedradhouani4153
    @mohanedradhouani4153 2 ปีที่แล้ว

    Hello Leigh,
    i have a question,
    Can we bold a line that we searching about a place and we the line that the Bus walking around to that place ?
    Thanks .

  • @dubas1983
    @dubas1983 3 ปีที่แล้ว

    You helped me a lot thanks

  • @djthul
    @djthul 4 ปีที่แล้ว +2

    Thank you so much Leigh! Amazing as usual. Trying to decide btw react-google-maps, google-map-react and @react-google-maps/api and it looks like you've used all three in your videos. If I want to do clustering should I use google-map-react like you did in that video or does it matter? The one you used in this video seems to be more like the native API which I like but clustering is very important (and all the useCallback stuff is a little annoying) so I'm just curious what you think. Thanks again Leigh! Looking forward to your course!

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว +2

      Hey Dan! I would just take a quick survey of the packages and see which one has a good combo of:
      - Community activity
      - Updates/releases
      - Downloads on NPM
      I've had pretty good luck with @react-google-maps/api recently.

  • @zeyuanwang1218
    @zeyuanwang1218 ปีที่แล้ว

    amazing, thank you so much!!!

  • @devidasa9637
    @devidasa9637 3 ปีที่แล้ว

    Excellent...ty Leigh

  • @ashwinyadav8658
    @ashwinyadav8658 3 ปีที่แล้ว +1

    Thanks man, I was clueless before watching your video since the documentation examples were in class components and I got used to functional ones. btw what extension d you use for those emojis

    • @samirmouzaoui5652
      @samirmouzaoui5652 3 ปีที่แล้ว

      On a mac press cmd + ctrl + space
      windows : windows + ; or ,

  • @hugojeffreys5157
    @hugojeffreys5157 3 ปีที่แล้ว

    Mate, this was brilliant and just what I was looking for after mucking about with google-react-app, or was it react-google-maps (etc...)?...Thanks very much and keep up the great work!!

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว

      Thanks Hugo! Glad it was helpful!

  • @sheldonfourie5959
    @sheldonfourie5959 3 ปีที่แล้ว +1

    This is so awesome! Could you help with adding a custom marker with animations? Every time I add it and move the marker moves when I move

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว

      Hmmm.... I haven't worked much with markers and animations before, I don't think I'd be a huge help.

  • @zaccrab6686
    @zaccrab6686 3 ปีที่แล้ว

    Hi, This is a great video tutorial!
    Thank you very much.
    I just have one question, how to add a button to InfoWindow, the kind of button that you can use to pass info to other component.
    Thanks.

  • @Prakhart4
    @Prakhart4 3 ปีที่แล้ว

    You got the "nice guy" vibe LOL

  • @xzorow5288
    @xzorow5288 4 ปีที่แล้ว +2

    Hey there Leigh Halliday, excellent video and i applaud you. I have one question to ask does the code also include the functionality of the bear markers which are created on-click, to stay permanently on the site. Because i'm not sure how other users would be able to see it if another user deploys it. Does the bear marker stay on the site even after refresh the site for instance once you have deployed it on google app engine.I'm an amateur coder by the way so i don't have a lot of knowledge.

    • @xzorow5288
      @xzorow5288 4 ปีที่แล้ว +3

      Dont know if what i said makes sense but, im basically asking if everytime the site is loaded are the bear markers saved and reloaded once the site is open again with the markers in the same spot. Thank you in-advance. Just trying to understand somethings with your amazing code. Sorry if I'm being a pain

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว +2

      Hey xZorow! What you asked makes a ton of sense, and you're right! The bear disappears as soon as you refresh the page because it was only stored in memory (state) within the browser. It wasn't persisted anywhere. If this were a real bear application you would definitely want to integrate this with a backend, but I was focusing just on the frontend aspects in this video.
      A backend could be anything from Firebase, essentially directly storing it in a DB, or through a backend application such as node/express, php/laravel, ruby/rails, in combination with a database such as postgres/mysql/mongo.
      The key is to separate what happens in the browser (client) with what happens on the server. Perhaps I'll add an additional video showing how to persist this bear data.

    • @ellerachel3024
      @ellerachel3024 4 ปีที่แล้ว

      @@leighhalliday I have been trying to do this exact thing for my markers using Flask and sqlalchemy. i was able to set up the backend and create some seeded markers. using postman i can make a call to GET them, but not sure how to translate this up on the front end...

  • @esabaliauskas
    @esabaliauskas 4 ปีที่แล้ว +1

    Nice one :) I use OpenLayers for my project, but this is still useful and interesting

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว +1

      Thanks! I haven't tried OpenLayers before... I'll have to give it a go some day.

    • @esabaliauskas
      @esabaliauskas 4 ปีที่แล้ว

      There is also Mapbox which rapidly gains popularity. Some of the apps like Booking, Facebook, Strava, Shopify use it. I would say it is much more custimizible than OpenLayers.

  • @marcbrown614
    @marcbrown614 3 ปีที่แล้ว

    Another great video Leigh! Question for you - how would you decide whether to use Mapbox vs. Google Maps as your map provider? what are the trade-offs / best uses for each service?

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว +1

      Hey Marc! I'm honestly not sure of the tradeoffs... I've used and like both of them! I think I prefer the mapbox react implementation... there is 1 really high quality library maintained by Uber, whereas with google you have 2-3 other ones.

    • @marcbrown614
      @marcbrown614 3 ปีที่แล้ว

      @@leighhalliday nice yep i watched that video too :) i like the uber framework too

  • @mohamedchine-ky6yk
    @mohamedchine-ky6yk 4 หลายเดือนก่อน

    thank you for your content

  • @seyii
    @seyii 4 ปีที่แล้ว +1

    Awesome tutorial!! I'm about to dig in. Quick question, Does your tutorial show how to do a nearby search? For example, is it possible to put markers on hospitals in a particular area after search? Thanks.

    • @leighhalliday
      @leighhalliday  4 ปีที่แล้ว

      Hey Seyi! Nope, it doesn't... I do want to do that in the future though since a number of people have been asking for similar things. You'd want to call the google places API searching for places near the location that the user entered into the places autosuggest input.

  • @panumassaewong8224
    @panumassaewong8224 3 ปีที่แล้ว

    Thank you very much this is a great tutorial for me.

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว +1

      Glad I could help Panumas!

  • @nataliaquezadamejias9422
    @nataliaquezadamejias9422 3 ปีที่แล้ว

    Excelente video muchas gracias !!!!! me sirvió muchísimo

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว +1

      Me alegra Natalia! Gracias :)

  • @jordaniumjordanicus
    @jordaniumjordanicus 2 ปีที่แล้ว

    Hello Leigh, I am not sure why but when I try to add the InfoWindow and click on the Markers I get "Uncaught (in promise) Error: The message port closed before a response was received." in the console and I am not able to show the InfoWindow. Do you have any ideas on why this could be happening?

  • @romanryaboshtan9270
    @romanryaboshtan9270 2 ปีที่แล้ว

    46:05 You must move the Search component to a single file - it's a good practice

    • @leighhalliday
      @leighhalliday  2 ปีที่แล้ว +1

      Sometimes if it is a small component that won’t be reused I like to keep it in the same file :D

    • @romanryaboshtan9270
      @romanryaboshtan9270 2 ปีที่แล้ว

      @@leighhalliday I understand you

  • @dylanhollohan2726
    @dylanhollohan2726 2 ปีที่แล้ว

    If I have created a mapID and custom styles for the map in google cloud console, is there any way that I can pass in that mapID into this map instead of passing in the mapStyles from the json in the external file? I have looked around extensively but can't seem to find that.

  • @vasilispapasakellariou4074
    @vasilispapasakellariou4074 2 ปีที่แล้ว

    Great very helpfull tutorial! i dont know if things have changed since this video but when i try to access setZoom on a map ref it says setZoom is not a function even though the map ref exists but panTo works!!! any idea why? ty in advance sir

  • @bewee1775
    @bewee1775 4 ปีที่แล้ว

    Thanks for the video!

  • @fouadchahd2969
    @fouadchahd2969 3 ปีที่แล้ว

    Amazing! Sir,Thanks a lot for this amazing video i just wanted to know if we have to enable the billing ?

    • @leighhalliday
      @leighhalliday  3 ปีที่แล้ว +1

      Thank you! You do unfortunately

  • @dennish4018
    @dennish4018 3 ปีที่แล้ว

    great video! is anyone else having the error: "GeocodingService: This API key is not authorized to use this service or API...". Although explicitly enabling the geocoding API in the Google Maps Console?

  • @VibbSnibb
    @VibbSnibb ปีที่แล้ว

    Hi, I am new to react and google maps api. I have a question about the infoWindow. I learned that when a state is changed, it rerenders the component that the state is in, so in this case, does the whole App.js rerender everytime a infoWindow is created and closed? Does the whole page needs to be rerenders for a small infowindow to open and close?