Track your location with the JavaScript Geolocation API

Поділитися
Вставка
  • Опубліковано 13 січ 2025
  • Learn JavaScript 👉learnjavascrip...
    React Tutorial 👉react-tutorial...
    Learn Programming 👉 learnprogrammi...
    Learn HTML CSS 👉 learnhtmlcss.o...
    Learn how to track your location with the JavaScript Geolocation API.
    We will build 2 mini apps, one that tracks your location and saves it to localstorage.
    The other one will draw the coordinates on a map!
    How to enable USB Debugging on your android: developer.andr...
    Kenneth Rode ( / kennethrohde ) working on the Wake Lock API (web.dev/wakelock/)

КОМЕНТАРІ • 61

  • @JadJoubran
    @JadJoubran  4 роки тому +2

    Learn JavaScript 👉 learnjavascript.online
    React Tutorial 👉 react-tutorial.app

  • @stefanbogdanovic590
    @stefanbogdanovic590 4 роки тому +3

    Man you are one of few developers that is doing something that nobody does geolocation speech synthetisis and moreee awesome. I am amazed. Cheers mate from Serbia 😁

    • @JadJoubran
      @JadJoubran  4 роки тому +1

      awesome happy to hear that you like them :D stay tuned for the next one ;)

    • @stefanbogdanovic590
      @stefanbogdanovic590 4 роки тому

      @@JadJoubran Can't wait 😁

  • @arjitmalik2981
    @arjitmalik2981 3 роки тому

    Daamnnnn goood explanation !!!! you have something which I was searching for last few weeks. You diserves a subs man.

  • @drogueriarevilla6340
    @drogueriarevilla6340 3 роки тому

    Wonderful tutorial. Thanks a lot from Panama.

  • @NDREAN67
    @NDREAN67 4 роки тому +2

    Nice video, thks for the surge tip. It seems that React Native can handle the gps in the background. Correct?

  • @wesleymouedineassaby1035
    @wesleymouedineassaby1035 4 роки тому +1

    Awesome, waiting your next video 😁

  • @sinsin7843
    @sinsin7843 2 роки тому

    very clear, thank you from Taiwan ~

  • @vidumini23
    @vidumini23 4 роки тому +2

    Hi Jad, Really appreciate your video.
    Can you do a video for,
    Tract react native mobile app gps location --> send data to firestore database --> Show in the react web app.
    That is a part of my final year project. I'm using node server. I'm bit stuck in there.
    I really appreciate if you can do a video or if you can give me some suggestions and recommendation example.
    Thank you..

  • @theblueplanet3576
    @theblueplanet3576 5 місяців тому

    What will be the interval every time the geo location event is received?

  • @niswarthvshetty3678
    @niswarthvshetty3678 4 роки тому +1

    How you recorded the coordinate in your phone?

  • @_vinayk
    @_vinayk 4 роки тому

    Hi Jad, thanks for sharing this. Was curious if you are aware of any work around for tracking geolocation in the background. Something that could track your running route without having the phone necessarily on all the time.

  • @Master0fDisaster13
    @Master0fDisaster13 3 роки тому +2

    How can I run this app on my phone to collect the data?

  • @Anonymous-cb6by
    @Anonymous-cb6by 4 роки тому

    Thank you so much Sir Best video finally knew how to work with watchPosition

  • @DarellND
    @DarellND 3 роки тому

    What's the use of the stop button?

  • @hadjermohabeddine7645
    @hadjermohabeddine7645 4 роки тому

    hi, i'm building a project for a smart parking and i wanted to use watchPosition while the reservation is running to determinate if the user arrived or not at the end of the countdown so is it a problem if the countdown is about 20 minutes or maybe more?

  • @mitko746
    @mitko746 2 роки тому

    How would you be able to update the map in order to draw it live as I am able to import the coordinates once, but it wouldn't update the map every time a new coordinate has been added to the array

  • @afilnwier
    @afilnwier 3 роки тому +1

    how you can get your coordinates on your phone?

  • @Rick-sf2cz
    @Rick-sf2cz 4 роки тому

    This was a really cool video! Nice job

  • @computerscience1152
    @computerscience1152 3 роки тому +1

    Awesome tutorial...

  • @Siddharth-yi7pg
    @Siddharth-yi7pg 3 роки тому

    how to draw path of live tracker on google maps in reactJS , please help any npm library or procedure

  • @theuniverse685
    @theuniverse685 4 роки тому +1

    Excellent video!!

    • @JadJoubran
      @JadJoubran  4 роки тому

      😄😄😄 Stay tuned for the next one ;)

  • @endlesswaltztoledo
    @endlesswaltztoledo 4 роки тому

    what the stop button does?

  • @shyamvyas3327
    @shyamvyas3327 Рік тому

    My coordinates were not very accurate and some locations were from the other side of the street, causing the map to create false circular routes. How to correct this.

  • @mohammedkhadeeruddin6287
    @mohammedkhadeeruddin6287 Рік тому

    What if we are using external gps tracking device which uses SIMCARD within it and want to connect it within our own Map in application...may do I know,how can we code for this.

  • @hirisraharjo
    @hirisraharjo 3 роки тому

    Nice Video! But is it possible to do real time tracking like what uber/grab/gojek does?

  • @DanieleOrlando22
    @DanieleOrlando22 4 роки тому +3

    Great tutorial and amazing video!

  • @amjadali7691
    @amjadali7691 4 роки тому

    Can you please do the same project using esp32. I do same. Get location information by using ip api. But it don't update the position location when I change my location.

  • @abdallahaly498
    @abdallahaly498 4 роки тому

    hey jad , i need to build similar project but real-time locator , could you tell me what do i need to do that or how ??

    • @maximussu7609
      @maximussu7609 4 роки тому +1

      I know how to do that and i can guide you

    • @abdallahaly498
      @abdallahaly498 4 роки тому

      @@maximussu7609 Ooh! really??
      then tell me how to cantact with you?

  • @rthangam77
    @rthangam77 4 роки тому +1

    Nice one thanks!

  • @KorhalKk
    @KorhalKk 11 місяців тому

    The code is nice, but this copying and pasting of coordinates seem to be a little counterproductive, shouldn't we automate it?

  • @yaseenimuhammadraja9461
    @yaseenimuhammadraja9461 4 роки тому

    Hai, good video,and also I want to get user's exact correct location without SSL in my website, how to do it

  • @prakasasiva2099
    @prakasasiva2099 3 роки тому

    Hey bro,
    How do I do the same tracking but calculate the distance between the coordinates and display it, any sort of help would be appreciated.
    Thank you

    • @spb1179
      @spb1179 2 роки тому +1

      You can use Pythagorean theorem to find the distance between each point, and then convert that many degrees to meters or miles, whatever your like. Then just sum them together

  • @justkeepfilming9767
    @justkeepfilming9767 4 роки тому

    Hi! Is there any way I can track my realtime location (e.g when i go walking id like to track where i go and display it on a map) with just using HTTP? Thanks :)

    • @JadJoubran
      @JadJoubran  4 роки тому

      only on localhost
      alternatively you can setup a self-signed SSL certificate

    • @justkeepfilming9767
      @justkeepfilming9767 4 роки тому

      @@JadJoubran okay thanks a mil! :)

  • @georgejohnson-808
    @georgejohnson-808 3 роки тому

    HI, how can I make a tracker whereby i can type in a phone number of a lost phone or my colleague's phone (with their permission and find their location.

  • @tarik6040
    @tarik6040 4 роки тому +1

    I do need opposit of this work, if anyone can help me, I need a way to hide my location, not VPN not tor not proxy all these did not work .... I m ready to pay 200 euro or even more ...

  • @bilelrahmouni01
    @bilelrahmouni01 3 роки тому

    thank you!!

  • @daria_charly
    @daria_charly 3 роки тому

    Is it a real time application ?

    • @ConsulthinkProgrammer
      @ConsulthinkProgrammer 3 роки тому

      Nice. I found that we even can use this method and send that latitude, longitude, and address data to google sheets.

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

    awesome

  • @hasithananayakkara7956
    @hasithananayakkara7956 3 роки тому

    try with a real tracker and node

  • @maximussu7609
    @maximussu7609 4 роки тому

    Hi guys,you can try my complete demo on your updated location each time you move.
    jsfiddle.net/MaximusSu/9j04sgdx/23/?fbclid=IwAR289IdQP5AHX0-iZ7VZ9Gy75n72ypADAZ1ZBJE6Px_9di96g7RmZ-rm1pE
    Click on fullscreen to start.
    My biggest problem is this w3 school geolocation is not accurate sometimes and this piss me off. Is there a way to resolve this?

    • @maximussu7609
      @maximussu7609 4 роки тому

      And Jad Joubran, I would like to know your email since we are quite close together in terms of age and maturity. Thank you

  • @BrokenRecord-i7q
    @BrokenRecord-i7q Рік тому

    ❤️

  • @netboy1102
    @netboy1102 3 роки тому

    I know your location, Amsterdam...

  • @HammerGruvin1
    @HammerGruvin1 Рік тому

    Your content is good but your audio is lousy

  • @RaymondovanDijk
    @RaymondovanDijk 4 роки тому

    Amsterdam whoep whoep