TypeMismatchError when attempting to use geolocation

Question

I am guessing this is more of a JavaScript question, but as I am trying to do this on Salesforce, I thought I will ask first here.

I have code that is supposed to give out location to the console, I remember it actually working before, but was away from the project for a while and can't fathom whats wrong with it.

Here's very simple code:

<apex:page >
     <script>
    var lat, lon;
    navigator.geolocation.getCurrentPosition(function(position){
        lat = position.coords.latitude;
        lon = position.coords.longitude; 
        console.log("Longitude: "+lon+" Latitude:"+lat);            
        }
        );           
    </script>
    <h3><a href="#" onclick="navigator.geolocation.getCurrentPosition();">Get location</a></h3><br/>
</apex:page>

When I click on the href, I get error in console:

TypeMismatchError: DOM Exception 17: The type of an object was incompatible with the expected type of the parameter associated to the object.

Answer 1

Documentation such as this pretty clear that the getCurrentPosition function has a mandatory first argument that is the callback function that delivers the position. So I think your code should look more like this:

<apex:page >
<script>
var lat, lon;
function success(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude; 
    console.log("Longitude: "+lon+" Latitude:"+lat);            
}     
navigator.geolocation.getCurrentPosition(success);    
</script>
<h3><a href="#" onclick="navigator.geolocation.getCurrentPosition(success); return false;">Get location</a></h3><br/>
</apex:page>

Not sure how the code without the callback parameter could have worked.

Answer 2

Here is a perfect example of using javascript geolocation API with Salesforce1 app has been given: http://intmist.wordpress.com/2014/03/23/show-custom-visualforce-page-in-salesforce1-setup-publisher-action-and-check-in-using-salesforce1-app/

Code Sample:

    var output = document.getElementById("out");
    if (!navigator.geolocation){
        output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
        return;
      }

    function success(position) {
      var latitude  = position.coords.latitude;
      var longitude = position.coords.longitude;

      var img = '<img width="100%" src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:A%7C' + latitude + ',' + longitude + '&center=' + latitude + ',' + longitude + '&zoom=16&size=720x720&sensor=false"/>';

      $('.geoloc').val(latitude+','+longitude);
      output.innerHTML=img;
      $(".bg-info").html("");
    };

     function error() {
       $(".bg-info").html("Unable to retrieve your location");
       $(".bg-success").html("");
     };

     $(".bg-info").html("Locating...");
     $(".bg-success").html("Locating...");

     navigator.geolocation.getCurrentPosition(success, error);
    }

In summary, you should take care of function which should be pre-defined before using navigator Geo-location-API with their correct function names (case sensitive).

Function names defined as:

navigator.geolocation.getCurrentPosition(success, error);