ONLY 30 Minutes! Add Google Address Autocomplete, Next JS 14

Подписаться 2,8 тыс.

Просмотров 5 тыс.

50% 1

FREE Courses here: grepsoft.com/c...
Parking Management app: • Parking Management App...
Google maps tutorial: • IN 15 MINUTES! Add Goo...
NextJS, Address AutoComplete with Google Maps, Next Generation Places API
Want to supercharge your Next.js app with location-based features? In this video, we'll dive deep into the NEW Google Places API and show you how to seamlessly integrate it with your Next.js project. From setting up the API key to fetching and displaying search results, you'll learn everything you need to build powerful location-aware experiences.
Here's what you'll get:
- Google Places API
- Next.js Integration
- Interactive Search
- Displaying Results on a Map
- Bonus Tips & Tricks: Pro techniques for optimizing your implementation.

Опубликовано:

9 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 27

@tenersnet Месяц назад

Thank you for making this well detailed

@codernerd7076 4 месяца назад

Just in time! Was looking for this thanks!

@Grepsoft 4 месяца назад

From one developer to another 👍

@freelancerbadshah9555 3 месяца назад

thanks man, Awesome very helpful appreciate you for this video

@Grepsoft 3 месяца назад

My pleasure

@merikii 2 месяца назад

Thanks, man!!

@Grepsoft 2 месяца назад

You are welcome 🤗

@coffeebean8583 День назад

What is the code for the Input field? When I go to search a location, mine says 'This page can't load Google Maps Correctly', however the map displays under it, but the search doesn't show a drop down of locations, I have enabled billing but this did not seem to fix it

@Grepsoft 11 часов назад

Have you enabled places API?

@azumahjoshuazilmayee6704 4 месяца назад

Thank you this video. At 13:18 where is the coordinates coming from?

@azumahjoshuazilmayee6704 4 месяца назад

@@TopDoorInstall Thanks you for the quick response. So when you call the map component in the parent component you pass the default lat and lng like this

@Grepsoft 4 месяца назад

They are being passed in by the parent company.

@Grepsoft 4 месяца назад

@@azumahjoshuazilmayee6704 I defined LatLong as a type like this: export type LatLong = { type?: string, coordinates: number[] } and then pass like this:

@Grepsoft 4 месяца назад

you can watch the PetRescue tutorial where I explained in detail how to pass. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-lfHOAzFAul0.htmlsi=4cE7CJ9Che0Q7GOT

@azumahjoshuazilmayee6704 4 месяца назад

@@Grepsoft Thank you.

@theophilusfrimpong8431 2 месяца назад

Amazing video sir. But please tell me, how I can add manual location picking with the marker instead of just using just the search bar

@Grepsoft 2 месяца назад

Sorry what do you mean manual location?

@ChrisMonnat 4 месяца назад

This did come at just the right time. I've been wrestling with this for a few days now. I got your example to work when using a page within Next JS but my use case is to put the address field in a Shad CN Dialog bog. Whenever I do that I get the following error "InvalidValueError: not an instance of HTMLInputElement". I've played around a bit with onOpenChange and such but no success. Any thoughts would be greatly appreciated. Thanks again!

@Grepsoft 4 месяца назад

you need to do a simple trick. Simply do this: {open && } The issue is Input is not loaded yet js is trying to bind to it.

@ChrisMonnat 4 месяца назад

@@Grepsoft Yup, spot on. I ended up referencing the field using useCallback instead of useRef and that did the trick. Thanks for the quick response!

@Grepsoft 4 месяца назад

@@ChrisMonnat Thanks that works too.

@garrettogrady4138 2 месяца назад

Great video! do you have the code for this anywhere? Would love to implement that map view/list view toggle you have

@Grepsoft 2 месяца назад

Please see the parking management app series. The video will be released this week.

@Grepsoft Месяц назад

Please see the new video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-yWy7_-MwulY.htmlsi=30oGsX3TfVR4jX9F. You can skip to 1:18:42 to see the layout switcher.