Skip to content
Related Articles

Related Articles

Improve Article

How to get geographic position of a user in HTML5 ?

  • Last Updated : 31 Aug, 2021
Geek Week

Introduction: In this article, we will see how can we get the geographic position of a user in HTML5. 

Approach: To get the geographic position of a user in HTML5, we use geolocation API. Geo-location in HTML5 is used to share the location of the user with some website if the user allows. It uses JavaScript to get the latitude and longitude. Most of the browsers support Geolocation API.

Syntax:

var Location =navigator.geolocation.getCurrentPosition()

 



Variable Location from the above syntax has the following properties:

  • coords.latitude: Always returns latitude as a decimal number
  • coords.accuracy: Always returns the accuracy of position
  • coords.longitude: Always returns longitude as a decimal number
  • coords.altitude: Returns the altitude in meters above sea level if available
  • coords.altitudeAccuracy: Returns altitude accuracy of position if available
  • coords.heading: Returns heading in degree clockwise from North if available
  • coords.speed: Returns speed in MPS if available
  • timestamp: Returns date or time of response if available

Example 1: In this example, we will show the longitude and latitude of the user’s permission using the Location object created using Geolocation API.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Latitude and longitude</title>
</head>
  
<body>
    <center>
        <h1 class="gfg" style="color:green;">
            GeeksforGeeks
        </h1>
  
        <h2 id="Location"></h2>
    </center>
      
    <script>
        var Location = document.getElementById("Location");
        navigator.geolocation.getCurrentPosition(showLocation);
  
        function showLocation(position) {
            Location.innerHTML =
                "Latitude: " + position.coords.latitude +
                "<br>Longitude: " + position.coords.longitude;
        }
    </script>
</body>
  
</html>

Output:

Output

Example 2: In this example, we are using a Mapbox to show the user’s position on the map using latitude and longitude that we got there. Here are steps to create a google map box:

Step 1: Add the following script to the HTML page to enable the google map box function.

<script src=
 "https://maps.google.com/maps/api/js?sensor=false"></script>

Step 2: Create lattlong object that has longitude and latitude coordinates using:

var lattlong = new google.maps.LatLng(latitude, longitude);

Step 3: Create Mapbox using below code centered about the user’s position in div with id Map:

var Mapmain = new google.maps.Map(document.getElementById("Map"));

Below is the implementation of the above approach.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Latitude and longitude</title>
    <script src=
    </script>
</head>
  
<body>
    <center>
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
          
        <div id="Map" style="width:700px; height:500px"></div>
    </center>
    <script>
        var Location = document.getElementById("Location");
        navigator.geolocation.getCurrentPosition(showLocation);
  
        function showLocation(position) {
            latt = position.coords.latitude;
            long = position.coords.longitude;
            var lattlong = new google.maps.LatLng(latt, long);
            var Options = {
                center: lattlong,
                zoom: 15,
                mapTypeControl: true,
                navigationControlOptions:
                    { style: google.maps.NavigationControlStyle.SMALL }
            }
            var Mapmain = new google.maps.Map
                (document.getElementById("Map"), Options);
            var markerpos =
                new google.maps.Marker
                    ({ position: lattlong, map: Mapmain });
        }
    </script>
</body>
  
</html>

Output:

Output

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :