Leigh Halliday
Leigh Halliday
  • 194
  • 3 089 968
Geocoding Addresses in React
Using Google's new @vis.gl/react-google-maps we'll geocode an address, going from "10 Front St, Toronto" to its Latitude and Longitude.
Переглядів: 2 273

Відео

Free Next.js Course: 4 / Layout & Nav
Переглядів 2,3 тис.Рік тому
Welcome to Next Level Next.js! Over 500 copies of this course have been sold, but it's now time to give it away for free. I hope you enjoy it!! Links Source Code - github.com/leighhalliday/house-course/commit/c0cbefb06ed8cef7b8cc3bc8ddaecd85ed981f33
Free Next.js Course: 23 / Highlight Hover
Переглядів 1,5 тис.Рік тому
Welcome to Next Level Next.js! Over 500 copies of this course have been sold, but it's now time to give it away for free. I hope you enjoy it!! Links Source Code - github.com/leighhalliday/house-course/commit/a8ff4977fde7955181822393c4ee913e2b55c478
Free Next.js Course: 7 / Render Mapbox
Переглядів 9 тис.Рік тому
Welcome to Next Level Next.js! Over 500 copies of this course have been sold, but it's now time to give it away for free. I hope you enjoy it!! Links Source Code - github.com/leighhalliday/house-course/commit/8db36f3f3483c19faafff2071304f91ecb370645
Free Next.js Course: 17 / House on Map
Переглядів 691Рік тому
Free Next.js Course: 17 / House on Map
Free Next.js Course: 21 / Query Bounds
Переглядів 367Рік тому
Free Next.js Course: 21 / Query Bounds
Free Next.js Course: 2 / Requirements
Переглядів 3,5 тис.Рік тому
Free Next.js Course: 2 / Requirements
Free Next.js Course: 28 / Vercel Deploy
Переглядів 364Рік тому
Free Next.js Course: 28 / Vercel Deploy
Free Next.js Course: 16 / Show House
Переглядів 472Рік тому
Free Next.js Course: 16 / Show House
Free Next.js Course: 18 / Nearby Houses
Переглядів 439Рік тому
Free Next.js Course: 18 / Nearby Houses
Free Next.js Course: 15 / House Mutation
Переглядів 647Рік тому
Free Next.js Course: 15 / House Mutation
Free Next.js Course: 22 / Houses on Map
Переглядів 1 тис.Рік тому
Free Next.js Course: 22 / Houses on Map
Free Next.js Course: 29 / HttpOnly Cookie Authentication
Переглядів 9 тис.Рік тому
Free Next.js Course: 29 / HttpOnly Cookie Authentication
Free Next.js Course: 19 / Remember Location
Переглядів 301Рік тому
Free Next.js Course: 19 / Remember Location
Free Next.js Course: 20 / Debounce
Переглядів 602Рік тому
Free Next.js Course: 20 / Debounce
Free Next.js Course: 26 / Edit House
Переглядів 326Рік тому
Free Next.js Course: 26 / Edit House
Free Next.js Course: 3 / Setup
Переглядів 2,2 тис.Рік тому
Free Next.js Course: 3 / Setup
Free Next.js Course: 11 / Initialize Prisma
Переглядів 963Рік тому
Free Next.js Course: 11 / Initialize Prisma
Free Next.js Course: 1 / Introduction
Переглядів 7 тис.Рік тому
Free Next.js Course: 1 / Introduction
Free Next.js Course: 14 / Upload Image
Переглядів 6 тис.Рік тому
Free Next.js Course: 14 / Upload Image
Free Next.js Course: 8 / House Form
Переглядів 1,6 тис.Рік тому
Free Next.js Course: 8 / House Form
Free Next.js Course: 27 / Delete House
Переглядів 267Рік тому
Free Next.js Course: 27 / Delete House
Free Next.js Course: 6 / Auth Page
Переглядів 1,6 тис.Рік тому
Free Next.js Course: 6 / Auth Page
Free Next.js Course: 13 / Initialize Apollo Client
Переглядів 2,7 тис.Рік тому
Welcome to Next Level Next.js! Over 500 copies of this course have been sold, but it's now time to give it away for free. I hope you enjoy it!! Links Source Code - github.com/leighhalliday/house-course/commit/3b4c8c167a07021fb3c2dce8726ae8d02edc8313
Free Next.js Course: 5 / Init Firebase
Переглядів 1,6 тис.Рік тому
Welcome to Next Level Next.js! Over 500 copies of this course have been sold, but it's now time to give it away for free. I hope you enjoy it!! Links Source Code - github.com/leighhalliday/house-course/commit/d08dc9b7f9aabe164796a6a0fe509547e4011472
Free Next.js Course: 12 / Initialize GraphQL & Apollo Server
Переглядів 1,8 тис.Рік тому
Welcome to Next Level Next.js! Over 500 copies of this course have been sold, but it's now time to give it away for free. I hope you enjoy it!! Links Source Code - github.com/leighhalliday/house-course/commit/ccaba0605869b61e8a761d7d342a7c36ca4ffbdc
Free Next.js Course: 10 / Image Preview
Переглядів 3 тис.Рік тому
Welcome to Next Level Next.js! Over 500 copies of this course have been sold, but it's now time to give it away for free. I hope you enjoy it!! Links Source Code - github.com/leighhalliday/house-course/commit/eaee0e8b3292a4127beadf19dec399fa260150b5
Free Next.js Course: 9 / Google Places
Переглядів 7 тис.Рік тому
Welcome to Next Level Next.js! Over 500 copies of this course have been sold, but it's now time to give it away for free. I hope you enjoy it!! Links Source Code - github.com/leighhalliday/house-course/commit/e192f5d7f5ee04fcd7b5deb14ce8be7de3775d0a
Free Next.js Course: 24 / Map Search
Переглядів 1,3 тис.Рік тому
Welcome to Next Level Next.js! Over 500 copies of this course have been sold, but it's now time to give it away for free. I hope you enjoy it!! Links Source Code - github.com/leighhalliday/house-course/commit/640d8c2d81cf47c533bb4cbb80f8b9cbeaa71470
Free Next.js Course: 25 / Restricted Route
Переглядів 528Рік тому
Welcome to Next Level Next.js! Over 500 copies of this course have been sold, but it's now time to give it away for free. I hope you enjoy it!! Links Source Code - github.com/leighhalliday/house-course/commit/5f01a96969edb1500a225436381893cdbc554395

КОМЕНТАРІ

  • @mahibahimran5444
    @mahibahimran5444 22 години тому

    Hi Leigh, i am not sure why my map is not appearing on the web even after following the same instructions. Is there in any change for it in 2024.

  • @DerekOshita
    @DerekOshita День тому

    Thank you for a thorough, yet concise, explanation!

  • @jaybarls
    @jaybarls 2 дні тому

    Great explanation! As others have mentioned there's a staggerChildren property too, but this is arguably simpler to implement as you don't need to set up a relationship between parent and child elements. Love the tip on applying different animations to even/odd indexed items too.

  • @nidhi8942
    @nidhi8942 2 дні тому

    How can I get same dataset?

  • @Khartstudio
    @Khartstudio 7 днів тому

    I'm working with a poject which the user can make a post with an image/video or audio file, or a post with only "text", i made that solution, it cancel the posting request, however the text is been created, and database create an instance of the post with only "text", do i have to handle the cancellation in server side too ! ?

  • @cleopasmuchiri
    @cleopasmuchiri 10 днів тому

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

  • @johnmuku1773
    @johnmuku1773 10 днів тому

    Thanks. You've literally saved me

  • @mohamedchine-ky6yk
    @mohamedchine-ky6yk 11 днів тому

    thank you for your content <3 :)

  • @ovna
    @ovna 14 днів тому

    tysm bro, you made my day

  • @ayissinkejoelnarcisse9185
    @ayissinkejoelnarcisse9185 20 днів тому

    Great video. Thanks a lot Mr Leigh 🙏

  • @Abrordev_Axmedov
    @Abrordev_Axmedov 21 день тому

    thank you

  • @mohamedusama6375
    @mohamedusama6375 21 день тому

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

  • @sachinmogha5168
    @sachinmogha5168 Місяць тому

    learned a lot

  • @chanzerone9217
    @chanzerone9217 Місяць тому

    what's your vscode theme?

  • @b088mohdzaid5
    @b088mohdzaid5 Місяць тому

    I’m working on a project and this lectures is truly amazing and helpful for me. Thank you.

  • @larryjasontueno9016
    @larryjasontueno9016 Місяць тому

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

  • @Samuelrajsams
    @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

  • @jawadmohdab
    @jawadmohdab Місяць тому

    I would appreciate same tutorials for MapBox instead. Google Map API is just crazy expensive.

  • @chitoan77
    @chitoan77 2 місяці тому

    Nice, thank you.

  • @mehdidehghan592
    @mehdidehghan592 2 місяці тому

    Thank you so much. It was useful and helped me

  • @azizee
    @azizee 2 місяці тому

    hi, how do i manage the priority and lastmod? currently it show all with same priority and lastmod.

  • @Munk-tt6tz
    @Munk-tt6tz 2 місяці тому

    Love videos like this that go straight to the point with great and concise explanation, thank you!

  • @DebopriyoBasu
    @DebopriyoBasu 2 місяці тому

    absolutely amazing and to the point comparison!

  • @TrungNguyen-oy9py
    @TrungNguyen-oy9py 2 місяці тому

    thank you so much!!

  • @aaqibvialogic1108
    @aaqibvialogic1108 2 місяці тому

    now can not be implemented. documentation is changed of mapbox. i tried it but didn't work works with new documentation process :)

  • @Gandeon1
    @Gandeon1 2 місяці тому

    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?

  • @hrishikeshgaikwad910
    @hrishikeshgaikwad910 2 місяці тому

    Hey, i am stuck at the initial step itself!, line : const geocodingApiLoaded = useMapsLibrary("geocoding"); im not able to load geocodingApiLoaded with the api key im using, it is working for loading the map, but im getting null value for this variable(geocodingApiLoaded ) and not able to generate the address

  • @eliastouil7686
    @eliastouil7686 2 місяці тому

    Thanks!

  • @user-vw5fm9lv9v
    @user-vw5fm9lv9v 2 місяці тому

    "Very well explained! Thank you for sharing."

  • @jeandamour-js7es
    @jeandamour-js7es 2 місяці тому

    amazing

  • @brucegreentree6190
    @brucegreentree6190 2 місяці тому

    So awesome

  • @johnbeckham606
    @johnbeckham606 3 місяці тому

    Would be great if you would show us how to change dynamically from light mode maps to dark mode maps with this mapId stuff 😢

  • @leighhalliday
    @leighhalliday 3 місяці тому

    Check out the full video by searching 'How to load Maps JavaScript API in React (2023)' on UA-cam. goo.gle/GoogleMapsPlatform

  • @sbjj5076
    @sbjj5076 3 місяці тому

    Thanks dude, massive help, explained really well. Subbed

  • @thomasdinh2k
    @thomasdinh2k 3 місяці тому

    Hi, the video is awesome, however, it's already been 4 years! I wonder if there's a new approach to this problem?

  • @tanaris334
    @tanaris334 3 місяці тому

    stop it, get some help. Check these things in your pipelines flow not on commits

  • @blackbeans3112
    @blackbeans3112 3 місяці тому

    Beginner here bro, the backend usually will setup the httponly: true? not the frontend will setup the httponly: true? the frontend will just received the secure token with httponly: true attached already to store directly to the cookies?

  • @apollomacabodbod6329
    @apollomacabodbod6329 3 місяці тому

    Beginner here bro, the backend usually will setup the httponly: true? not the frontend will setup this? the frontend will just received the secure token to store directly to the cookies?

  • @adamwoolf9993
    @adamwoolf9993 3 місяці тому

    Awesome. This new package is fantastic. Thanks for making this

  • @ayush1344
    @ayush1344 3 місяці тому

    This tutorial is really very helpful , I shared it with all my friends Great Explanation :)

  • @devT44
    @devT44 3 місяці тому

    In the below program spinner-border is a bootstrap class for showing a spinner. Using setLoading() inside finally block doesn't render the spinner. That's why I need to use this method inside both .then() and .catch(). I don't know why such happening. import { useEffect, useState } from "react"; import axios, { CanceledError } from 'axios'; interface User{ id:number; name:string; } const App = () => { const [users, setUsers] = useState<User[]>([]); const [error, setError] = useState(''); const [isLoading, setLoading] = useState(false); useEffect(() => { const controller = new AbortController(); setLoading(true); axios.get<User[]>("jsonplaceholder.typicode.com/users", {signal: controller.signal}) .then((res)=> { setUsers(res.data); // setLoading(false); }) .catch((e)=>{ console.log(e.name); if (e instanceof CanceledError) return; setError(e.message); // setLoading(false); }) .finally(()=>{ setLoading(false); }) return () => controller.abort(); },[]); return ( <> {error && <p className="text-danger">{error}</p>} {isLoading && <div className="spinner-border"></div>} <ul> {users.map(user => <li key={user.id}>{user.name}</li>)} </ul> </> ); };

  • @omarsamudio3418
    @omarsamudio3418 4 місяці тому

    How you find more than one data .... i think and idea

  • @Uxidlegre
    @Uxidlegre 4 місяці тому

    We missed you man!

  • @ertemeren
    @ertemeren 4 місяці тому

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

  • @cgope
    @cgope 4 місяці тому

    Awesome! Hope you will be back with your tutorials and courses soon here in UA-cam!

  • @leighhalliday
    @leighhalliday 4 місяці тому

    Check out the full video by searching 'How to create and customize cluster markers in React' on UA-cam.

  • @laptopuser5198
    @laptopuser5198 4 місяці тому

    We need more 20 minute tutorials on your channel. We have been waiting patiently.

    • @leighhalliday
      @leighhalliday 4 місяці тому

      Haha thanks! But this one is me too!

  • @leighhalliday
    @leighhalliday 4 місяці тому

    Check out the full video by searching 'How to show directions on a map in React' on UA-cam. goo.gle/GoogleMapsPlatform

  • @olaoluwaanigboro-napoleon6484
    @olaoluwaanigboro-napoleon6484 4 місяці тому

    So no one is talking about how the api_key is exposed for the whole world to see or y'all are not working on live projects where things like api_key is supposed to be confidential?

    • @leighhalliday
      @leighhalliday 4 місяці тому

      Hey! I delete the API keys after posting the video. That said, to use google maps on your site, the key must be public, because you'll need to have it in the browser. They key is to restrict its use, tying it to your domain and which services you require.

    • @olaoluwaanigboro-napoleon6484
      @olaoluwaanigboro-napoleon6484 4 місяці тому

      @@leighhalliday oh really? I'm sorry if I sounded harsh. I was working on a live project so I thought it was safer to hide the apikey and so I searched but didn't see a solution so I got frustrated. But thanks for this information, you are the second person who has told me this and now I have confirmed that I can leave it like that in the index.html...thanks and great video btw!