Last week in Part 1 we talked about GPS in the natural context of AutoCAD work. Now here in Part 2 on GPS we are back in the wider world of websites and where GPS comes in

* * *

This article should still be of interest to you, even if you don't write code for websites. We want to take a look at the methods a website has to see where you physically are.


Why Put Location/GPS Tools On Your Site

Obviously, if you are providing any map-based services on your site, you'll want location tools on your website. But even if not providing a dynamic, real-time map, a website having a loose idea of where you are can be a good idea for them AND you. Right away, knowing the country can guide the language and content of the site. Knowing your city means that any advertising could be localized and the content as well.

We have done music websites for bands and labels. If one of these bands has an upcoming tour, the site's code could start by seeing if the website visitor is in an area where they will have a show and if so then put that info up top at the front of the site. (Believe me, putting potentially relevant info up front and not relying on users searching and scrolling is more crucial than you'd even expect.)


What Websites Know About You

There are two primary ways where websites can tell your location: "Geolocation" (the more accurate one) and your IP address location.

As one would imagine, when you're on a cellphone, that more precise location is the Geolocation method - and it's possible on laptops and desktops too when access is granted. On mobile or non-mobile, you always have the option to protect your privacy and turn off location services in a browser.



But that doesn't mean they don't have any idea where you are. Whenever you are using wifi, the connection point like your modem has an IP address (e.g. 180.4.102.3). Your general location can be looked up, even if you turn these services off.

(Note for privacy buffs: If you really, really want to be more anonymous on the web, you can use VPNs "Virtual Private Networks" to fake where you are.


Coding A Website For GPS Location

Since users (rightly) have the prerogative of not supplying sites with specific accuracy and rejecting the location-sharing option (whether on their phone or in the settings for a laptop/desktop browser), then designers should take a two-tiered approach:

1) If site can read the geolocation HTML5 object, then do that.
2) If site cannot read via geolocation functions, THEN read the IP address and get more generalized location info from there.


Javascript

We are going to demonstrate how to do this in JavaScript. That said, it's just as possible to do this in other web languages such as PHP or ASP. If you want any help or headstart code with that, we are absolutely happy to share that with you; just reach out to us via the Contact form on our website.

Take a look at our JavaScript code below. Hopefully it's clear how this is working. We're doing this for the benefit of a teachable lesson being driven by HTML buttons here. But when we do this for real, we are not having users initiate anything; we would just have the code get what we want without writing any InnerHTML or even making users aware that we are doing this.


Click to enlarge

Note in blue above any links we are using. These are webservices (or APIs) that will look up the actual data. On your code end - you just need to come up with an IP address or latitude/longitude from some native commands in JavaScript.


Working Example

The buttons below are live and will show the effects of the above JavaScript. When you run this here, depending on your settings, you might be asked to allow this in a browser. If not, that means you have either: already accepted and preauthorized all location services on this device/browser or you have already rejected all such activity in this device/browser.

First click "Get GPS" button. Once complete, click "Lookup Info" button.

Get GPS

Lookup Info

Available APIs

First of all, there are LOTS of free geolocation services and sites. Unless your site is making thousands of location requests per day, you should be able to get all of this done with free services. Caveat emptor: Sometimes these services do disappear, change their format or something else overnight which would momentarily break your code depending on them. But if you find a good one, go ahead and rely on it. Should the service change in the future, it's easy enough to correct and find a different one.

The quality of location info varies to an almost insane degree. I'm going to list these free GPS info services in increasing order of accuracy and usefulness. The first ones really are quite generic. Please check these out

- https://ipapi.co/json
- http://www.geoplugin.net/json.gp
- https://api.db-ip.com/v2/free/self
- https://nominatim.openstreetmap.org

Again, the first couple of these results placed me over 100 miles from my real location, whereas the last couple were accurate. As one would expect, services that take latitude and longitude as a supplied argument will be more accurate.

All of these are free and there are many more free and paid services out there for you.

Here’s an example of how the data comes back from one of these sites as JSON object.




Accuracy

How accurate are GPS readings on this more precise geolocation? It depends on the service. Paid services can be accurate up to 3 meters. The free ones I’ve played with can be off by a house or two (about 30 meters)

How accurate are GPS readings on non-geolocation? Again, it varies. Between a couple of IP located services I've used, one showed my IP address in Los Angeles where in reality I live and work in San Diego. And another free service showed a location value of a neighborhood that is less than 5 miles away from my house, instead of the 120 miles away of the Los Angeles location.

For a real-world example, when I go to the Target store website, it’s clearly using the more generic IP locator since it tries to set my default store location to something in the Valley in L.A. - which is a two-hour drive from me.

So, which service you use really matters.


The Takeaway

As a user, remember that just because you've turned off location services that doesn't mean that we don't know what neighborhood you're in - we just don't know your street. Also, it's not that nefarious - companies have very good reasons for trying to localize your content and improve your user experience.

As an owner of a business or website, it's really not hard to take advantage of geolocation on your website. Get creative for its best uses in your business. If you want to use this, there's no excuse for not doing it. Most of these good free webs APIs I've shown above allow up to thousands of requests per day before requiring a paid account.

We tried to keep the code and examples here fairly simple. Should you want some more help, feel free to reach out to us for our free two cents. We'd love to be of assistance.