How to implement Geolocation on a website

Privacy is essential for protecting users from security threats and building customers' trust. However, there are certain reasons why some applications need to access information users consider private, such as location. 

When visiting a website, you may see a browser notification asking for permission to access your location. If you allow it, the website gains permission and uses your location for different purposes. 

Applications use geolocation to personalize user experience, especially if they serve customers from different parts of the world. 

This article will explore the reasons for using geolocation, along with a quick tutorial on how to implement it on a website.

Let's get started.

TL; DR:
The Geolocation API, built into modern web browsers, allows web apps access to users location using navigator.geolocation. Latitude and longitude coordinates can be extracted to enable features live navigation, mapping and personalised content. 

Developers should follow best practices by respecting users’ privacy, optimizing API calls, and implementing fallback mechanisms for efficiency. This article includes a quick tutorial on how to implement geolocation in a website.

What is Geolocation?

Geolocation is a process of identifying the location of an object on the surface of the earth, or devices such as mobile phones, laptops, servers, using data from GPS, Wi-Fi, Browser APIs, IP addresses, or cell towers.

For example, if you turn on location services on your phone and you open a food app, it can automatically detect and show you nearby restaurants; this is the power of geolocation. 

Additionally, when enabling location features like "Find my iPhone, geolocation helps track and locate your device if it is lost.

Geolocation identifies the geographic coordinates, via latitude and longitude, that form a coordinate system dividing the earth into a grid of horizontal and vertical lines used to detect a location. 

The latitude and longitude obtained from the Geolocation API allow you to do things like plot a user's location on a map or perform other actions like calculating distance, or customizing content.

The purpose of Geolocation includes the following;

• Adding navigation features to an application, e.g., (Google Maps)

• Improving search results based on a user's location

• Providing personalised content based on users' location 

• Enabling delivery and ride tracking services (e.g., Uber, courier apps) 

• Supporting security verification, e.g., identifying unusual login locations

Examples of map services include:

• OpenStreetMap

• Google Maps

• Google Earth/Google Earth Pro

• Waze

• Apple Maps

• Bing Maps

Web applications can use IP-based Geolocation, Browser-based Geolocation, or a combination of both. 

IP-based Geolocation: IP Geolocation is a web-based service that uses the user's IP address to determine their location. 

Browser-based Geolocation API: allows web apps access to the user's location by using a combination of GPS, Wi-Fi positioning, and cellular network triangulation. This API can be used alongside JavaScript to request users' location directly from the web browser. 

How to Implement Geolocation on a Website

The Geolocation API (navigator.geolocation )is built into modern web browsers such as Chrome, Firefox, Safari, and others, so there is no need to import or install anything. 

In this quick tutorial, Geolocation will be added to an existing website. To save, you can either use an existing site to practice or create a simple web page to implement this feature.

Prerequisite:  Basic knowledge of building a website with web technologies and using VSCode for development.

In the image below, there’s a navigation section with a "Get my location" button.

Clicking the button will trigger the getLocation function, which displays the coordinates and a link to Google Maps. If the function fails to get a coordinate, an error message will be displayed. 

The following code is in the header component of the application, but you can place it anywhere you want the getLocation function to run.

Let’s go through the code.

Code Breakdown:

Because the code is in a Typescript file, a type is used to define coords as an object with latitude and longitude, which can either be a number or null.

This state stores coords, which holds the current coordinates, while setCoords is the function that updates coords when the getLocation function runs.  The latitude and longitude are set to null initially because no values have been returned yet; they could also be set to an empty string. 

This is a state that stores an error message from the geolocation API

This state is responsible for holding what the modal shows. In this case, the modal is responsible for displaying the geolocation coordinates, the Google map, and the error message.

Within the geolocation function, the if statement checks if the browser supports the Geolocation API by checking that Geolocation is in navigator, then requests the user's current position. 

There are two callback functions: the success callback extracts the latitude and longitude from positions.coords, updates coords with setCoords setCoords({latitude, longitude}), and sets setShowModal to true to show the modal box.

The error callback stores the error message if Geolocation fails, and also sets setShowModal to true to show the modal box. 

The else shows an error if the browser does not support geolocation at all.

Add getLocation to the button

In the image below, the "Get my Location" button located in the navigation bar of the web page has an onClick function that calls the getLocation function.

The Modal

The {showModal && (

  .... rest of the code in here

)}: This is conditional rendering that checks if showModal is true, it opens and closes the modal that displays the coordinates from Geolocation Api, and also the message if Geolocation fails.

• Inside the modal container, there is CSS styling, a close button, and conditional content.

• The first condition checks if coords. latitude and coords.longitude exists. If they do, it shows the coordinates (toFixed() limits decimals of coordinates)  and provides a link to Google Maps using those coordinates. 

• The second condition checks for an error and displays it. The else statement runs if the coordinates are not available, such as when the user denies permission.

The image below is what happens after implementing the getlLocation function.

When the button is clicked, the browser asks the user to access their current geographic location.  This information includes latitude and longitude. These coordinates can then be used by developers to do things like display location on a map or personalize users' content. 

When "Allow this time " is selected, a modal appears displaying the coordinates and a link to Google Maps.

When the link to Google Maps is clicked, it opens and shows the user's location.

The longitude and latitude may be slightly off, but they are not entirely inaccurate. This is likely because the app is running on localhost.

If the user clicks "Never Allow", the web app cannot access the user's coordinates, which results in the message "User denied geolocation" in the modal. This also means that any features available for your location will not function.

Use Cases of Geolocation

E-commerce: E-commerce or online stores use Geolocation to determine the user's location or region, so they see products, currency, shipping details, etc that are relevant to them. 

Navigation: Apps like Google Maps, Apple Maps use GPS-based Geolocation to provide directions, track movement, estimate distance between locations, and also location sharing, finding nearby gas stations, restaurants, and many landmarks useful to users in real time.

Telecommunication: Telecommunication systems use Geolocation to determine the location of a device, which could be for improving network performance, routing emergency calls, fraud detection, etc.

Finance and Insurance: Geolocation enables banks to detect suspicious transactions from unexpected locations or to verify a user's identity. Insurance companies use Geolocation to track certain users' behavior, for example, verifying accident locations before investigating auto accidents before paying out. 

Real Estate: Real estate platforms use Geolocation to show users properties at current or specified locations. They also use it to show nearby schools, amenities, or other landmarks that may influence users' decisions to choose a property. Additionally, geolocation helps real estate businesses understand the local market. 

Manufacturing: Manufacturing companies use Geolocation for tracking the movement of supplies, raw materials, and deliveries etc. This can help them see the routes drivers take during delivery or how much time they spend either delivering or supplying, and this info can be used to prevent loss, theft, and improve logistics

Non-profits:  Non-profits can use geolocation to find locations affected by crises and understand how to deliver resources efficiently. It can be used to map out dangerous zones or monitor things like deforestation, wildlife, etc. 

Best Practices

Some best practices to consider before or when implementing Geolocation include the following:

Consider Users' Privacy:  Privacy is very crucial, especially if you have a platform people engage with and share personal information like location, home address, contacts, etc. 

It's necessary to seek users' consent before accessing their location, and also provide clear privacy policies 

Optimize API calls: To improve performance and reduce cost, it's important to minimize redundant API calls. Integrating with some API usually requires a fee, which may seem small at first, but with thousands of users, redundant calls can result in a high bill. 

Fallback Mechanisms: Use fall fallback mechanism in case one service is not available, for example, if GPS data is unavailable, default to IP-based geolocation. 

Cache Location: Minimize unnecessary API calls by storing users' locations for short durations when it's possible to deliver a more efficient service.

Handle Geolocation APIs Limitation: Geolocation is reliable, but can be inaccurate sometimes. Things like poor signal, weak network connection, or interference (e.g., from tall buildings) can affect accuracy. Also, some devices may not support advanced Geolocation features, etc, which is why ensuring that there's a means to fix limitations is handled correctly in your application.

Summary

Geolocation is used to identify the location of a device through IP addresses, cell towers, WI-FI networks, or GPS. It is integrated in many applications, such as Google Maps, to deliver location-based services.

Many of us enjoy this technology because it makes finding new locations easier, whether it's a nice restaurant for dinner or a cozy cafe for coffee, detecting traffic, or suggesting the best routes to take.

Geolocation is used across different industries not only for navigation but also in telecommunication, finance, real estate, and more.

Additionally, many businesses and organizations rely on Geolocation to provide accurate information or relevant content to users based on their region. This can improve users' experience, especially for companies with a global reach, as it works alongside internationalization (i18n) to handle language and cultural integration.

Frequently Asked Questions