Skip to content
geeksforgeeks
  • Tutorials
    • Python
    • Java
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
    • Practice Coding Problems
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • HTML Tutorial
  • HTML Exercises
  • HTML Tags
  • HTML Attributes
  • Global Attributes
  • Event Attributes
  • HTML Interview Questions
  • HTML DOM
  • DOM Audio/Video
  • HTML 5
  • HTML Examples
  • Color Picker
  • A to Z Guide
  • HTML Formatter
Open In App

HTML DOM Geolocation coordinates Property

Last Updated : 14 Jun, 2023
Comments
Improve
Suggest changes
Like Article
Like
Report

The DOM Geolocation coordinates Property in HTML is used to return the position and altitude of the device on Earth. The returned Coordinates object could be used for various purposes including navigation and tracking the position of the device. 

Property Values:

ValuesDescription
coordinates.latitudeThis is the device latitude in decimal degrees.
coordinates.longitudeThis is the device longitude in decimal degrees.
coordinates.accuracyThis is the accuracy of the latitude and longitude returned in meters.
coordinates.altitudeThis is the device altitude relative to the sea level in meters.
coordinates.altitudeAccuracyThis is the accuracy of the altitude returned in meters.
coordinates.headingThis is the direction in which the device is traveling. The value is in degrees and indicates the current direction with respect to true north. This value may be null.
coordinates.speedThis is the velocity of the device in meters per second. The value may be null if the device is not traveling.

Usage: Methods like getCurrentPosition() or watchPosition() are used to pass a callback to a function and then access the coordinates property. 

Example: 

html
<!DOCTYPE html> <html> <title>DOM Geolocation coordinates Property</title>  <body>     <h1 style="color: green">GeeksforGeeks</h1>      <b>DOM Geolocation coordinates Property</b>      <p>Click the button to get your coordinates.</p>        <button onclick="getLocation()">Get Location</button>      <p class="location"></p>      <script>         let x = document.querySelector('.location');          function getLocation() {              /* Check if location support is available */             if (navigator.geolocation) {                  /* Callback to the showPosition function */                 navigator.geolocation.getCurrentPosition(                   showPosition);             } else {                 x.innerHTML = "Geolocation is not supported.";             }         }          function showPosition(position) {              /* Assign the Coordinates object to a variable */             let coordinatesObject = position.coords;              x.innerHTML =                 "Accuracy: " +                  /* Get the accuracy from the                  Coordinates object */                 coordinatesObject.accuracy +                  "<br>Latitude: " +                  /* Get the latitude from the                  Coordinates object */                 coordinatesObject.latitude +                  "<br>Longitude: " +                  /* Get the longitude from the                  Coordinates object */                 coordinatesObject.longitude +                  "<br>Altitude: " +                  /* Get the altitude from the                  Coordinates object */                 coordinatesObject.altitude +                  "<br>Altitude Accuracy: " +                  /* Get the altitude accuracy                  from the Coordinates object */                 coordinatesObject.altitudeAccuracy +                  "<br>Speed: " +                  /* Get the speed from                  the Coordinates object */                 coordinatesObject.speed +                  "<br>Heading: " +                  /* Get the heading from                  the Coordinates object */                 coordinatesObject.heading;          }     </script> </body>  </html> 

Output: Before clicking the button:

 coords-before 

After clicking the button:

 coords-after 

Supported Browsers: The browser supported by DOM Geolocation coordinates property are listed below:

  • Google Chrome 79 and above
  • Edge 79 and above
  • Firefox 72 and above
  • Internet Explorer 9.0 and above
  • Opera 16 and above
  • Safari 13.1 and above

S

sayantanm19
Improve
Article Tags :
  • Web Technologies
  • HTML
  • HTML-DOM

Similar Reads

    HTML DOM Style order Property
    The HTML DOM Style order property specifies the order of a flexible element relative to the rest of the flexible elements inside the same container element.  SyntaxSet the order property.object.style.order = "number | initial | inherit"Return the order property.object.style.orderReturn ValuesIt retu
    1 min read
    HTML | DOM Embed Object
    The Embed Object in HTML DOM is used to represent the <embed> element. The <embed> element can be accessed by using getElementById() method. Note: This object is new in HTML 5. Property Values: height: It sets or returns the value of the height attribute. src: It sets or returns the valu
    2 min read
    HTML DOM Anchor Object
    The Anchor Object in HTML DOM is used to represent the <a> element. The anchor element can be accessed by using getElementById() method. Syntax: document.getElementById("ID"); Where ID is assigned to the anchor tag. Property Values: Property Description charset Set or return the character set.
    2 min read
    HTML DOM ColumnGroup Object
    The ColumnGroup Object in HTML DOM is used to represent the HTML <colgroup> element. This tag is used to set or return the properties of <colgroup> element. It can be accessed by using getElementById() method. Syntax: document.getElementById( "ColGroup_ID" );This ColGroup_ID is assigned
    2 min read
    HTML | DOM Window frameElement Properties
    HTML DOM Window frameElement property returns the iframe element in which the window is embedded or stored. If it is not stored, in that case, it simply returns a null value. Syntax: window.frameElement Return Value: It returns an IFrame object or null. Example: html <!DOCTYPE html> <html
    1 min read
    HTML | DOM Style columnRuleStyle Property
    The DOM style columnRuleStyle Property in HTML is used to define or determine the style of rule between columns. Syntax : To set the property: object.style.columnRuleStyle = "none|hidden|dotted|dashed|solid| double|groove|ridge|inset|outset|initial|inherit" To return the property: object.style.colum
    6 min read
    HTML | DOM Style columnRuleWidth Property
    The Style columnRuleWidth property in HTML DOM is used to define or determine the width of the rule between the columns. Syntax: It returns the columnRuleWidth property.object.style.columnRuleWidthIt is used to set columnRuleWidth property.object.style.columnRuleWidth = "medium|thin|thick|length| in
    3 min read
    HTML DOM adoptNode() Method
    This DOM adoptNode() method is used to adopt a node from another document. All node types can be adopted. All child nodes along with the original node can be adopted. AdoptNode() method is used to return node objects.Syntax: document.adoptNode(node)Parameter Value: DOM adoptNode() method contains on
    2 min read
    HTML | DOM Style zIndex Property
    The Style zIndex property is used for set or return the stack order of a positioned element. The element which has a lower stack order will be behind of another element with higher stack order. For example, the element with stack order(1) will be in front of the element with stack order(0). The Styl
    2 min read
    HTML | DOM Input Password Object
    The Input Password Object in HTML DOM is used to represent an HTML input element with type="password". The input element with type="password" can be accessed by using getElementById() method. Syntax: It is used to access input type="password"document.getElementById("id");It is used to create type="p
    3 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences