{"id":190,"date":"2019-01-23T19:15:58","date_gmt":"2019-01-23T11:15:58","guid":{"rendered":"https:\/\/www.intelliwolf.com\/?p=190"},"modified":"2019-01-24T11:42:30","modified_gmt":"2019-01-24T03:42:30","slug":"find-visitors-latitude-longitude-using-jquery","status":"publish","type":"post","link":"https:\/\/www.intelliwolf.com\/find-visitors-latitude-longitude-using-jquery\/","title":{"rendered":"How To Find A Visitor's Latitude And Longitude Using jQuery"},"content":{"rendered":"\n
I needed to fetch a visitor's coordinates, then pass them into a form, which then displayed local businesses in their area. The first part was just getting their latitude and longitude.<\/p>\n\n\n\n
How do you find a visitor's latitude and longitude using jQuery?<\/strong><\/p>\n\n\n\n
Get the visitor's permission to access their location<\/li>
Use the JavaScript Geolocation API to get the GPS position from the visitor's device, or fallback to the location of their IP address<\/li>
Display the latitude and longitude in the browser window<\/li><\/ol>\n\n\n\n
It's important that when you run this on a server, you use it on https, not http. If you don't, Chrome won't let the request proceed. It doesn't seem to have the same problems if you're doing it on your desktop.<\/p>\n\n\n\n
Here is the entire code I used to do this in testing. You can save it as a .html file and run it on your computer or server, if you'd like.<\/p>\n\n\n\n
<html>\n<head>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\"><\/script>\n <style>\n .wrapper {\n margin-top:50px;width:100%;text-align:center;\n }\n #bigbutton {\n border:1px solid #000;font-size:25px;padding:10px 20px;\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"wrapper\">\n <button id=\"bigbutton\">Where Am I?<\/button>\n <p id=\"demo\"><\/p>\n<\/div>\n<script>\njQuery(document).ready(function($) {\n $(\"#bigbutton\").click(function() {\n if (navigator.geolocation) {\n navigator.geolocation.getCurrentPosition(geoSucc, geoErr, geoOpt);\n } else {\n $(\"#demo\").html('Geolocation is not supported by this browser.');\n }\n });\n function geoSucc(position) {\n var latitude = position.coords.latitude;\n var longitude = position.coords.longitude;\n $(\"#demo\").html(latitude + ',' + longitude);\n }\n function geoErr(error) {\n switch(error.code) {\n case error.PERMISSION_DENIED:\n $(\"#demo\").html('User denied the request for Geolocation.');\n break;\n case error.POSITION_UNAVAILABLE:\n $(\"#demo\").html('Location information is unavailable.');\n break;\n case error.TIMEOUT:\n $(\"#demo\").html('The request to get user location timed out.');\n break;\n case error.UNKNOWN_ERROR:\n $(\"#demo\").html('An unknown error occurred.');\n break;\n }\n }\n var geoOpt = {\n timeout: 3000,\n maximumAge: 30\n }\n});\n<\/script>\n<\/body><\/code><\/pre>\n\n\n\n
Let's break the code down...<\/p>\n\n\n\n
Get the visitor's permission to access their location<\/h2>\n\n\n\n
Every time this runs, it will create a popup asking the visitor if they are happy to share their location. Sometimes the response is cached.<\/p>\n\n\n\n
Occasionally, the request gets stuck. That's why I've set the timeout<\/em> to 3000 milliseconds in geoOpt<\/em>. It was all fine on my desktop, but not on my phone. The maximumAge<\/em> parameter is for the same reason.<\/p>\n\n\n\n
Use the JavaScript Geolocation API to get the coordinates<\/h2>\n\n\n\n
HTML5 gave us a pretty handy Geolocation function. The key part of the code that runs it is:<\/p>\n\n\n\n
You don't even need the geoErr<\/em> or geoOpt<\/em> if you don't need the extra options.<\/p>\n\n\n\n
Note that the parameters must match the functions or variables of the same name. You can name them anything you like, just keep it consistent and understandable.<\/p>\n\n\n\n
Inside the geoSucc<\/em> function, notice that you call the latitude and longitude with position.coords.latitude<\/em> and position.coords.longitude<\/em> respectively.<\/p>\n\n\n\n
The geoErr<\/em> function is just basic error checking. There's nothing special about it. You don't have to return the response to the html. You could just as easily print it to console.log<\/em>.<\/p>\n\n\n\n
Display the latitude and longitude in the browser window<\/h2>\n\n\n\n
We then display the coordinates to the visitor inside the geoSucc<\/em> function with the line:<\/p>\n\n\n\n
This uses jQuery to replace anything inside the <p id=\"demo\"><\/em> with the latitude and longitude that was just pulled.<\/p>\n\n\n\n
If you wanted to update a form, you'd do it with this line.<\/p>\n\n\n\n
Note that I only broke the coordinates into the variables latitude<\/em> and longitude<\/em> for ease of reading. If you're only going to use them once, just skip the variable creation.<\/p>\n\n\n\n
How to display a map of the visitor's location<\/h2>\n\n\n\n
![\"\"](\"https:\/\/intelliwolf.com\/wp-content\/uploads\/2019-01-23_find-users-latitude-longitude-jquery.jpg\")
<\/figure><\/div>\n\n\n\n