HTML Geolocation API
In this article, we will be discussing over HTML geolocation . Location is determined by using the HTML Geolocation API.
Track User’s Position:
The HTML Geolocation API is used to obtain a user’s geographical location.
Due to privacy concerns, positions are only available if the user authorizes them.
- HTML Geolocation API:
Implementing HTML Geolocation
To get the user’s location, call the getCurrentPosition() method.
The user’s latitude and longitude can be obtained using the following example:
The following is an example of an HTML geolocation:
- Verify that Geolocation is supported.
- If supported, call getCurrentPosition(). Display an error message if not.
- A coordinates object will be returned if the getCurrentPosition() method is successful.
- It prints out the longitude and latitude resulting from the showPosition() function.
Displaying Outcome on Map
A map service, like Google Maps, is needed to view the results when it comes to HTML geolocation.
Here’s an example of using latitude and longitude to show the location on a Google Map (using a static image):
Managing Errors and Rejections
Errors are handled by the second parameter of getCurrentPosition(). If it cannot obtain the user’s location, it runs the following function:
The purpose of this page is to explain how to provide a map of a user’s location.
Location-specific information can also be obtained with geolocation, such as:
- Real-time local information
- Displaying points of interest nearby
- Location-based navigation (GPS)
The getCurrentPosition() Method – Return Data
In all cases, latitude, longitude, and accuracy are retrieved. On success, the getCurrentPosition() method returns an object. If available, other properties are returned as well:
|coords.latitude||A decimal number representing the latitude (always returned).|
|coords.longitude||A decimal representation of the longitude (always returned).|
|coords.accuracy||Position accuracy (always returned).|
|coords.altitude||Returns the altitude above mean sea level in meters (if available).|
|coords.altitudeAccuracy||Altitude accuracy of position (returned if available).|
|coords.heading||A heading expressed in degrees clockwise from North (returned if available).|
|coords.speed||Returns the speed in meters per second (if available).|
|timestamp||Response date/time (if available).|
Geolocation Object – More interesting Methods
Geolocation object also offers the following exciting methods:
- watchPosition() – Finds the user’s location and updates it as the user moves (similar to a GPS in a car).
- clearWatch() – Disables the watchPosition() method.
WatchPosition() is illustrated in the example below. To test this, you will need an accurate GPS gadget (such as a smartphone):
According to the table, the first browser version to provide geolocation is listed below.
|Geolocation||5.0 – 49.0 (http)
Note: As of Chrome 50, the Geolocation API will only work on secure contexts such as HTTPS. If your site is hosted on an non-secure origin (such as HTTP) the requests to get the users location will no longer function.
Benefits of using HTML Geolocation
HTML geolocation is a feature that allows websites to identify the physical location of a user through their web browser. There are several benefits to using HTML geolocation:
- Personalization: With geolocation, websites can provide personalized experiences for users based on their location. For example, a retail website can offer location-based promotions and discounts to users in a specific region.
- Targeted Advertising: Geolocation can be used by advertisers to target users with relevant ads based on their location. This can increase the effectiveness of ad campaigns and improve the user experience by showing ads that are relevant to the user’s interests and needs.
- Improved User Experience: Geolocation can be used to provide users with relevant information based on their location, such as local weather updates, nearby restaurants, or events. This can enhance the user experience and make the website more useful and engaging.
- Location-Based Analytics: Geolocation data can be used to gain insights into user behavior and preferences based on their location. This information can be used to optimize website design, content, and marketing strategies.
- Increased Security: Geolocation can be used as a security feature to prevent unauthorized access to sensitive information. For example, a website can require users to confirm their location before allowing them to access certain features or information.