Skip to content
Cuelogic
  • Services
        • Product Engineering
          • Product Development
          • UX Consulting
          • Application Development
          • Application Modernization
          • Quality Assurance Services
        • Cloud Engineering
          • Cloud Services
          • DevOps Services
          • Cloud Migration
          • Cloud Optimization
          • Cloud Computing Services
        • Data & Machine Learning
          • Big Data Services
          • AI Consulting
        • Internet of Things
          • IoT Consulting
          • IoT Application Development
        • Innovation Lab as a Service
        • Cybersecurity Services
        • Healthcare IT Services
  • Company
    • About
    • Culture
    • Current Openings
  • Insights
  • Tell Us Your Project
Tell Us Your Project  ❯
Product Development  4 Mins Read  June 24, 2015  Cuelogic

How to get user Latitude, Longitude & current address using HTML5

Share Via –
Share on facebook
Share on twitter
Share on linkedin

Home > How to get user Latitude, Longitude & current address using HTML5

Geolocation is the creativity of reckoning out where you are in the world & sharing information, for that HTML5 helps in identifying the user’s location, which can be used to provide location specific information or route navigation details to the user.

Among many techniques used to identify the location of the user, a desktop browser generally uses WIFI or IP based positioning techniques whereas a mobile browser uses GPS, cell triangulation, WIFI based positioning techniques, etc. The Geolocation API will use any one of these techniques to identify the user’s location.

The Geolocation protects the user’s privacy by authorizing that the user permission should be sought and obtained before sending the location information of the user to any website. So the user will be prompted with a request for the user’s permission to share the location information.
How to get user Latitude, Longitude & current address using HTML5

Set Geo location lat and long :

Bellow example is returning the latitude and longitude of the user's current position which is obtained using the getCurrentPosition function of the navigator.geolocation object.

navigator.geolocation.getCurrentPosition(function(position, html5Error) { geo_loc = processGeolocationResult(position); currLatLong = geo_loc.split(","); initializeCurrent(currLatLong[0], currLatLong[1]); });

The coords object has the following properties:

  • Latitude, longitude– Geographic coordinates in decimal degrees
  • Accuracy– Accuracy level of the latitude and longitude coordinates in meters. Bigger the number lesser is the accuracy
  • Altitude– Height of the position above the sea level in meters
  • AltitudeAccuracy– Denotes how far off the altitude position could be from the actual attitude value obtained in meters. Bigger the number lesser is the accuracy
  • Heading– Provides 360 degree heading information
  • Speed– Indicates relative speed in meters per second

Get geo location result:

In Bellow example;

position.coords.latitude & position.coords.longitude returned latitude and longitude data to show the location.

A position object contains a timestamp property denoting the time at which the location data is retrieved and a coords object. position.timestamp gives the date/time of the response. position.coords.accuracy returns the accuracy of the user's position.

function processGeolocationResult(position) { html5Lat = position.coords.latitude; html5Lon = position.coords.longitude; html5TimeStamp = position.timestamp; html5Accuracy = position.coords.accuracy; return (html5Lat).toFixed(8) + ", " + (html5Lon).toFixed(8); }

You can also Use:

  • Enable High Accuracy: Boolean. If true, the user agent will try to provide the most accurate position. This can result in slower response time and higher power consumption. Is false, less accurate position will be obtained. Default value is false.
  • Timeout: Positive long value. It denotes the maximum time in milliseconds that the user agent can take to respond with the location data. Default value is Infinity.
  • maximum Age: Positive long value. It denotes how long in milliseconds the user agent can keep using the cached location data before trying to obtain new location data. A zero value indicates that the user agent must not use the cached location data and infinity value indicates that the cached location data must be used by the user agent.

Check value is present or not & call google API function:

In order to figure out location we have used of Google Maps API along with Geolocation API. here we convert the latitude and longitude coordinates of the position object obtained using the Geolocation API

function initializeCurrent(latcurr, longcurr) { currgeocoder = new google.maps.Geocoder(); console.log(latcurr + "-- ######## --" + longcurr); if (latcurr != '' && longcurr != '') { var myLatlng = new google.maps.LatLng(latcurr, longcurr); return getCurrentAddress(myLatlng); } }

Get current address:

The address locator funcntion is the major component in the geocoding process. It is created based on a specific address locator style. The address locator also contains a set of address parsing and matching rules that directs the geocoding engine to perform address standardization and matching.

The purpose is to find all the possible matching address. Once possible address are identified, each individual variable in the address is compared with each corresponding address element. A score is generated indicating how well the address is matched. Finally, the address locator presents the best matches based on the score and the location of the address being matched.

Via google.maps.Geocoder object you access the Google Maps API geocoding service within your code and the Geocoder.geocode() method initiates a request.

We geocode an address and place a marker at the returned latitude and longitude values Here, google.maps.GeocoderStatus.OK indicastes that the geocode was successful

function getCurrentAddress(location) { currgeocoder.geocode({ 'location': location }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { console.log(results[0]); $("#address").html(results[0].formatted_address); } else { alert('Geocode was not successful for the following reason: ' + status); } }); }

Complete Sample Code:

<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> </head> <body> <p>Address: <div id="address"></div></p> </body> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { var currgeocoder; //Set geo location lat and long navigator.geolocation.getCurrentPosition(function(position, html5Error) { geo_loc = processGeolocationResult(position); currLatLong = geo_loc.split(","); initializeCurrent(currLatLong[0], currLatLong[1]); }); //Get geo location result function processGeolocationResult(position) { html5Lat = position.coords.latitude; //Get latitude html5Lon = position.coords.longitude; //Get longitude html5TimeStamp = position.timestamp; //Get timestamp html5Accuracy = position.coords.accuracy; //Get accuracy in meters return (html5Lat).toFixed(8) + ", " + (html5Lon).toFixed(8); } //Check value is present or not & call google api function function initializeCurrent(latcurr, longcurr) { currgeocoder = new google.maps.Geocoder(); console.log(latcurr + "-- ######## --" + longcurr); if (latcurr != '' && longcurr != '') { var myLatlng = new google.maps.LatLng(latcurr, longcurr); return getCurrentAddress(myLatlng); } } //Get current address function getCurrentAddress(location) { currgeocoder.geocode({ 'location': location }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { console.log(results[0]); $("#address").html(results[0].formatted_address); } else { alert('Geocode was not successful for the following reason: ' + status); } }); } }); </script> </html>

You can check Demo here: 

http://jsfiddle.net/hmy7e0fs/ <Original Code written by – Prasanna Champanerkar, Developer, Cuelogic>

Related Reading

[wcp-carousel id="10008"]

Read More

Recommended Content
Micro Frontend Deep Dive – Top 10 Frameworks To Know About ❯
Micro Frontends – Revolutionizing Front-end Development with Microservices ❯
Tags
geolocation geolocation with html5 Google Map API GPS HTML 5 web apps
Share This Blog
Share on facebook
Share on twitter
Share on linkedin

Leave a Reply Cancel reply

People Also Read

Consulting

Top Technology Trends for 2021

10 Mins Read
DevOps

What is Infrastructure as Code and How Can You Leverage It?

8 Mins Read
Quality Engineering

Cypress vs. Selenium: Which is the Superior Testing Tool?

7 Mins Read
Subscribe to our Blog
Subscribe to our newsletter to receive the latest thought leadership by Cuelogic experts, delivered straight to your inbox!
Services
Product Engineering
  • Product Development
  • UX Consulting
  • Application Development
  • Application Modernization
  • Quality Assurance
Menu
  • Product Development
  • UX Consulting
  • Application Development
  • Application Modernization
  • Quality Assurance
Data & Machine Learning
  • Big Data Services
  • AI Consulting
Menu
  • Big Data Services
  • AI Consulting
Innovation Lab as a Service
Cybersecurity Services
Healthcare IT Solutions
Cloud Engineering
  • Cloud Services
  • DevOps Services
  • Cloud Migration
  • Cloud Optimization
  • Cloud Computing Services
Menu
  • Cloud Services
  • DevOps Services
  • Cloud Migration
  • Cloud Optimization
  • Cloud Computing Services
Internet of Things
  • IoT Consulting
  • IoT App Development
Menu
  • IoT Consulting
  • IoT App Development
Company
  • About
  • Culture
  • Current Openings
Menu
  • About
  • Culture
  • Current Openings
We are Global
India  |  USA  | Australia
We are Social
Facebook
Twitter
Linkedin
Youtube
Subscribe to our Newsletter

We don't spam!

cuelogic

We are Hiring!

Blogs
  • What is Infrastructure as Code and How Can You Leverage It?
  • Cypress vs. Selenium: Which is the Superior Testing Tool?
  • Micro Frontend Deep Dive – Top 10 Frameworks To Know About
  • Micro Frontends – Revolutionizing Front-end Development with Microservices
  • Decoding Pipeline as Code (With Jenkins)
  • DevOps Metrics : 15 KPIs that Boost Results & RoI
Menu
  • What is Infrastructure as Code and How Can You Leverage It?
  • Cypress vs. Selenium: Which is the Superior Testing Tool?
  • Micro Frontend Deep Dive – Top 10 Frameworks To Know About
  • Micro Frontends – Revolutionizing Front-end Development with Microservices
  • Decoding Pipeline as Code (With Jenkins)
  • DevOps Metrics : 15 KPIs that Boost Results & RoI
cuelogic

We are Hiring!

Blogs
  • What is Infrastructure as Code and How Can You Leverage It?
  • Cypress vs. Selenium: Which is the Superior Testing Tool?
  • Micro Frontend Deep Dive – Top 10 Frameworks To Know About
  • Micro Frontends – Revolutionizing Front-end Development with Microservices
  • Decoding Pipeline as Code (With Jenkins)
  • DevOps Metrics : 15 KPIs that Boost Results & RoI
Menu
  • What is Infrastructure as Code and How Can You Leverage It?
  • Cypress vs. Selenium: Which is the Superior Testing Tool?
  • Micro Frontend Deep Dive – Top 10 Frameworks To Know About
  • Micro Frontends – Revolutionizing Front-end Development with Microservices
  • Decoding Pipeline as Code (With Jenkins)
  • DevOps Metrics : 15 KPIs that Boost Results & RoI
We are Global
India  |  USA  | Australia
We are Social
Facebook
Twitter
Linkedin
Youtube
Subscribe to our Newsletter

We don't spam!

Services
Product Engineering

Product Development

UX Consulting

Application Development

Application Modernization

Quality Assurance Services

Cloud Engineering

Cloud Services

DevOps Services

Cloud Migration

Cloud Optimization

Cloud Computing Services

Data & Machine Learning

Big Data Services

AI Consulting

Internet of Things

IoT Consulting

IoT Application Services

Innovation Lab As A Service
Cybersecurity Services
Healthcare IT Services
Company

About

Culture

Current Openings

Insights
Privacy Policy  
All Rights Reserved @ Cuelogic 2021

Close

By continuing to use this website, you consent to the use of cookies in accordance with our Cookie Policy.