wartość zwracana przez javascript jest zawsze niezdefiniowana

Próbuję pobrać 2 atrybuty funkcji seprated i debuguję tam wartości przed końcem funkcji i mają one wartość, ale wartość zwracana jest alif undifined Nie wiem dlaczego !!

plik .js

function STAAPlanlat(){
  alert ("the function");

  if (navigator.geolocation) {
    //we supposed to call the handlers of the expections 
    navigator.geolocation.watchPosition(function(position) {
      alert("show position ");
     //  x.innerHTML="Latitude: " + position.coords.latitude +"<br />Longitude: " + position.coords.longitude;  
      var lat=position.coords.latitude;
      var lan=position.coords.longitude;    

      //x.innnerHTML=out
      alert(lat+"<"+lan);
      return lan;
    });

  } else {
    alert("error");
  }
}

Dostałem alert z wartościami lan i lat

ale gdy wywołam oddzielny plik, zwraca niezdefiniowaną wartość zwracaną

 <!DOCTYPE html>
 <html>
 <head>
     <script type="text/javascript" src="STAAP1.2.js"> </script>

 <script type="text/javascript">
     function test(){
     var out=STAAPlanlat();     
     document.getElementById("STAAPlanlat").value = "lan is"+out;
     //document.writeln("lan is"+out);
     }
     </script>  
 </head>
 <body>
 <p id="STAAPlanlat">Test the division</p>
 <button onclick="test()">STAAPlanlat()</button>
 <button onClick="alertme()" >Alert</button>

 </body>
 </html>

questionAnswers(3)

yourAnswerToTheQuestion