Simplest way to Autocomplete Locations in Next.js (Shadcn, Google API)

แชร์
ฝัง
  • เผยแพร่เมื่อ 5 ม.ค. 2025

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

  • @orcdev
    @orcdev  3 หลายเดือนก่อน +2

    Join the Mighty Horde! Become a true WEB DEV WARRIOR! ⚔

  • @codernerd7076
    @codernerd7076 3 หลายเดือนก่อน +1

    Trying to make an Address auto-complete with Google places so this may help! Thanks!

    • @orcdev
      @orcdev  3 หลายเดือนก่อน +1

      Awesome! Glad to hear this came in the right time :D

  • @marcosangelmedina5845
    @marcosangelmedina5845 หลายเดือนก่อน

    Nice video bro!

    • @orcdev
      @orcdev  หลายเดือนก่อน

      Thank you brother!

  • @MohamedBechaFrikha-rd8bo
    @MohamedBechaFrikha-rd8bo 2 หลายเดือนก่อน

    very helpful thank you

    • @orcdev
      @orcdev  2 หลายเดือนก่อน

      No problem! Happy to help out. If you have any other questions, just hit me up!

  • @AlejandroRL868
    @AlejandroRL868 3 หลายเดือนก่อน +2

    how to get a google api key?

    • @orcdev
      @orcdev  3 หลายเดือนก่อน

      Go to this link (you have it also in the description): developers.google.com/maps/documentation/javascript/get-api-key
      Go to your credentials page, and create a new project. Inside the object you'll get your own API key.

  • @sweekruthkm557
    @sweekruthkm557 3 หลายเดือนก่อน

    This is nice,but when i try to do this in schadcn alertdialog or dialog component i am not able to do it,tried to increase the z-index also.What can be the fix.Thanks

    • @orcdev
      @orcdev  3 หลายเดือนก่อน

      It's probably because of this command component. I'll try to do it and send you the code.
      You're trying to put this whole address search in some dialog right?

    • @danilocecilia7831
      @danilocecilia7831 หลายเดือนก่อน

      @@orcdev got the same issue, it does not work inside a chadcn dialog, cannot select any item from results location

    • @orcdev
      @orcdev  หลายเดือนก่อน

      @@danilocecilia7831 Damn totally forgot about this one :D It has to be because of z indexes. I'll try to fix it tomorrow

  • @PedroGrilo13
    @PedroGrilo13 หลายเดือนก่อน

    how much the billing from using this google api ? do you have a good measure for it based on requests ? thank you very much! nice video

    • @orcdev
      @orcdev  หลายเดือนก่อน +1

      It depends, on a live project I'm using it's not passing 2 - 3 $ a month, it's not going over 5000 requests.

    • @orcdev
      @orcdev  หลายเดือนก่อน +1

      You're welcome for the video! Glad you liked it!

    • @PedroGrilo13
      @PedroGrilo13 หลายเดือนก่อน

      @@orcdev I thought it was pretty much! I will use it using your video as a tutorial! Thank you very much :D it looks really simple to use

    • @orcdev
      @orcdev  หลายเดือนก่อน +1

      @@PedroGrilo13 Awesome! You're welcome!

  • @omray7125
    @omray7125 หลายเดือนก่อน

    Hey, just tried this out but I get this error when I type anything in the input:
    "There is no suitable adapter to dispatch the request - adapter http is not available in the build"
    I'm pretty sure its related to the @googlemaps/google-maps-services-js package since is uses Axios requests, which doesn't seem to work on the edge runtime, are there any workarounds or other libraries you'd recommend?

    • @orcdev
      @orcdev  หลายเดือนก่อน

      Yeah definitely something wrong with the dependency. Never had that problem before.
      You could technically shoot the API directly without any dependency with simple fetch. Try creating a server action for getting everything you need without the @googlemaps/google-maps-services-js
      If you encounter problems, I can try it out too on some of my next videos :)