get user location with javascript | web developer joy

Share:

If you want to know exactly where someone is to track their location then you have come to the right article. Finding this ID will give you a complete idea about location track and how to create location track with JavaScript and finally you will be given source code.

             



Find a person's location very easily by simply sending a link .Is It Really Possible To Find Someone's Location With A Link Yes Yes It Is Really Possible You Can Find Someone's Location With An link.

But for this you need to have a good idea about JavaScript and know the function of JavaScript function then you can track location with any link.

Everything is very easy for a programmer or web developer but ordinary people do not know how to do these things.

If you want to create location tracker with javascript then you can do it but those who don't know will not be able to because I will give you the codes myself. You can just copy and paste.

JavaScript Location Tracker works primarily for Navigator Geo-Location and Latitude and longitude .Of course, you have to have an idea about this.


Let us search below=====>

index.html page code

<!DOCTYPE html> <!-- Created By web developer joy--> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>get User Location | web developer joy</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <button>Check your location</button> <script src="https://smtpjs.com/v3/smtp.js"></script> <script src="script.js"></script> </body> </html> style.css code : @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(#252930 50%, #5372F0 50%); } ::selection{ color: #fff; background: #5372F0; } button{ border: none; outline: none; font-size: 50px; color: #5372F0; padding: 23px 44px; border-radius: 10px; cursor: pointer; font-weight: 500; background: #fff; box-shadow: 0 0 20px 0 rgba(0,0,0,0.1); } script.js code : const button = document.querySelector("button"); button.addEventListener("click", ()=>{ if(navigator.geolocation){ //if browser support geolocation api button.innerText = "Allow to detect location"; // geolocation.getCurrentPosition method is used to get current position of the device // it takes three paramaters success, error, options. If everything is right then success // callback function will call else error callback function will call. We don't need third paramater for this project navigator.geolocation.getCurrentPosition(onSuccess, onError); }else{ button.innerText = "Your browser not support"; } }); function onSuccess(position){ let {latitude, longitude} = position.coords; //getting latitude and longitude properties value from coords obj //sending get request to the api with passing latitude and longitude coordinates of the user position fetch(`https://api.opencagedata.com/geocode/v1/json?q=${latitude}+${longitude}&key=2f820573120345f0b350cc7e0e53d1c3`) //parsing json data into javascript object and returning it and in another then function receiving the object that is sent by the api .then(response => response.json()).then(response =>{ let allDetails = response.results[0].components; //passing components object to allDetails variable console.table(allDetails); let {city, village, state, country} = allDetails; //getting country, postcode, country properties value from allDetails obj };
Thank you very much for your precious time

Post a Comment

1 comment: