Geek Answers Handbook

How can I get the location of a user without asking permission, or if the user has allowed it once, so never need to ask?

I am creating a portal using MySQL, JavaScript and Ajax, and I want to get the user's location in terms of latitude and longitude. if it is not possible to get the location without asking for it as soon as the user grants permission, I can get the location from any page without ever asking.

Thanks in advance.

+9
javascript php latitude-longitude
source share
3 answers

3 ways to do this in this answer:

  1. Get the exact GPS location by asking the user for access to the API of their browser
  2. Get an approximate location (country, city, region) using an external GeoIP service
  3. Get an approximate location (country, city, district) using the CDN service

Ask the user to allow access to their browser API

You can find out the location of the client using the HTML5 features. This will give you the exact location of the user if this is done from a device with GPS, or an approximate location. As soon as the user confirms his location, you will receive it without confirmation. This solution uses Geolocation.getCurrentPosition () . In most cases, this must be done using the HTTPS protocol.

If in a hurry, here is CodePen with this solution: https://codepen.io/sebastienfi/pen/pqNxEa

<!DOCTYPE html> <html> <body> <p id="demo">Click the button to get your coordinates:</p> <button onclick="getLocation()">Try It</button> <script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( // Success function showPosition, // Error function null, // Options. See MDN for details. { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }); } else { x.innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script> </body> </html>

Error and deviation handling The second parameter of the getCurrentPosition () method is used to handle errors. It defines a function to run if it is not possible to determine the user's location:

 function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML = "User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML = "Location information is unavailable." break; case error.TIMEOUT: x.innerHTML = "The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML = "An unknown error occurred." break; } }

Display result on map

 function showPosition(position) { var latlon = position.coords.latitude + "," + position.coords.longitude; var img_url = "http://maps.googleapis.com/maps/api/staticmap?center= "+latlon+"&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>"; }

Geoip

If the solution above does not work in your scenario, you can get an approximate position using the IP location. You do not necessarily get the exact location of the user, but you can specify the location of the nearest Internet site in the area of ​​the user's connection point, which can be close enough for 99% of cases of use (country, city, region),

Since this is not accurate, but does not require user approval, it may also meet your requirements.

Find below 2 ways to do this. I would recommend doing this with a CDN solution because it is faster and yes, speed matters a lot.

Get an approximate location (country, city, region) using an external GeoIP service

Many external services allow you to get the location of GeoIP. Here is an example from Google.

To get the Google API key, go to: https://developers.google.com/loader/signup?csw=1.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Get web visitor location</title> <meta name="robots" value="none" /> </head> <body> <div id="yourinfo"></div> <script type="text/javascript" src="http://www.google.com/jsapi?key=<YOUR_GOOGLE_API_KEY>"></script> <script type="text/javascript"> if(google.loader.ClientLocation) { visitor_lat = google.loader.ClientLocation.latitude; visitor_lon = google.loader.ClientLocation.longitude; visitor_city = google.loader.ClientLocation.address.city; visitor_region = google.loader.ClientLocation.address.region; visitor_country = google.loader.ClientLocation.address.country; visitor_countrycode = google.loader.ClientLocation.address.country_code; document.getElementById('yourinfo').innerHTML = '<p>Lat/Lon: ' + visitor_lat + ' / ' + visitor_lon + '</p><p>Location: ' + visitor_city + ', ' + visitor_region + ', ' + visitor_country + ' (' + visitor_countrycode + ')</p>'; } else { document.getElementById('yourinfo').innerHTML = '<p>Whoops!</p>'; } </script> </body> </html>

Get an approximate location (country, city, district) using the CDN service

An alternative to using external services is most of the CDN. The advantage of this solution is that an additional HTTP request is not required, therefore it is faster. If you already have a CDN, this is the way to go. You can use CloudFlare, CloudFront, etc.

In this scenario, you will most likely end up specifying the location as a parameter of the HTTP request header, or even directly in the window object to get it using Javascript. Read the CDN documentation to find out more.

Edited mid-December 2018 to add more options.

+15
source share

You can go to an external service, such as https://www.geoip-db.com . They provide a geolocation service based on IP addresses where you do not need user permission.

Try this example:

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Geo City Locator</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <div>Country: <span id="country"></span></div> <div>State: <span id="state"></span></div> <div>City: <span id="city"></span></div> <div>Latitude: <span id="latitude"></span></div> <div>Longitude: <span id="longitude"></span></div> <div>IP: <span id="ip"></span></div> <script> $.getJSON('https://geoip-db.com/json/') .done (function(location) { $('#country').html(location.country_name); $('#state').html(location.state); $('#city').html(location.city); $('#latitude').html(location.latitude); $('#longitude').html(location.longitude); $('#ip').html(location.IPv4); }); </script> </body> </html>
+8
source share

You can guess the latitude and longitude based on the source IP address of the web request. You need access to a database or service that maps IP addresses to locations such as MaxMind geoip ( https://www.maxmind.com/en/geoip-demo ). For services such as those you can use, JavaScript / PHP wrappers must be created.

GeoIP search is not very reliable and can easily become outdated. If you need something more precise, you will have to ask the user for some information, such as a zip code.

0
source share

More articles:


All Articles