geolocation with jquery and javascript

Question

I am learning javascript yet and trying geolocation function in my HTML and PHP code like below and following this tutorial.

I have added code like below in my custom.js file

$(document).ready(function() {
    'use strict';

  $('.test-step .button').on('click', function(e) {
    e.preventDefault();
    
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {
      $("#message").text("Geolocation is not supported by this browser!");
      $('#message').css('display', 'block');
    
  }
 
  })

});

function showPosition() {
    var position = $("#message");
    $("#message").text("Latitude:" + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude);
    
    if( $("#name").val().length === 0) {
            $("#message").text("Please Enter Your Name!");
            $('#message').css('display', 'block');
            
    }
    else if( $("#email").val().length === 0) {
            $("#message").text("Please Enter Your Email!");
            $('#message').css('display', 'block');
            
    }
    else if( $("#mobile").val().length === 0) {
            $("#message").text("Please Enter Your Mobile Number!");
            $('#message').css('display', 'block');
            
    }else{
        
    var email =$("#email").val();
    var name =$("#name").val();
    var mobile =$("#mobile").val();
    var id = $(this).attr("data");
    console.log(id);
    var answer = $('input[name=answer'+id+']:checked', '#form').val()
    var total =$("#total").val();
    var current =$("#current"+id).val();
    
    if(current===total){
        $.ajax({
            type: 'post',
            url: 'result.php',
            data: 'email='+email,
            success: function (data) {
                console.log($.trim(data));
            if($.trim(data)=="1"){
                console.log("called");
                $("#positive").toggle();
                $("#nagative").toggle();
            }
            }
         });
    }
    console.log(total+"/"+current);
    $(this).parents('.test-step').next().addClass('active');
    $(this).parents('.test-step').removeClass('active');
     if(id ==="undefined"){
         
     }else{
         $.ajax({
            type: 'post',
            url: 'post.php',
            data: 'email='+email+'&name='+name+'&mobile='+mobile+'&question_id='+id+'&answer='+answer,
            success: function (data) {
            
            }
         });
     }
    }
 
  }
  
  
 
function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
        $("#message").text("Please Refresh page and Accept Location Permission!");
        $('#message').css('display', 'block');
      break;
    case error.POSITION_UNAVAILABLE:
      $("#message").text("Location information is unavailable!");
      $('#message').css('display', 'block');
      break;
    case error.TIMEOUT:
      $("#message").text("Please Refresh page and Try Again!");
      $('#message').css('display', 'block');
      break;
    case error.UNKNOWN_ERROR:
      $("#message").text("An unknown error occurred!");
      $('#message').css('display', 'block');
      break;
  }
}

Its giving me error like below

Uncaught TypeError: position.coords is undefined

on line

$("#message").text("Latitude:" + position.coords.latitude + 

anyone here can please help me for solve the issue. I am trying from last two hours but no luck to solve it. Thanks!

Answer 1

Your variable is wrong here

var position = $("#message");
    $("#message").text("Latitude:" + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude);

You are trying to access the "coords" property of $("#message") instead of passing a parameter into your showPosition callback function

What you want to do is use

function showPosition(currentPosition) { 
    
    $("#message").text("Latitude:" + currentPosition.coords.latitude + 
  "<br>Longitude: " + currentPosition.coords.longitude);
}

Since the success callback by default takes in a Geolocation object (check out the docs: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition)