Sending user's geolocation to the address bar?

Hi guys,

I’m trying to build a button that will get the user’s geolocation using html5, and then pass the resulting longitude and latitude to the address bar.

Custom code for the button (and geolocate) is:

<!DOCTYPE html>
 <html lang="en">
  <head>
   <meta charset="utf-8">
   <title>get</title>

    <script>
     function showPosition() {
     if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var positionInfo = "Latitude: " + position.coords.latitude + ", " + "Longitude: " + 
      position.coords.longitude + "; +
            document.getElementById("result").innerHTML = positionInfo;
        });

     } else {
        alert("Sorry, your browser does not support HTML5 geolocation.");
        }
     }
    </script>

   </head>
 <body>
  <div id="result">
   <!--Position information will be inserted here-->
  </div>
     <button type="button" id="#geolocate" onclick="showPosition();">G</button>
  </body>
</html>

On my site-wide custom code I’ve also added what I think would process this information and pass it onto the URL bar:

<script>
 $('#geolocate').onclick(function() {  
  setTimeout(function() {
   var geoloc =$('#result').val();
   geoloc = str.replace(/\s+/g, '-').toLowerCase();
   location.href = '*MY URL*' + geoloc;
  }, 100);
 });
</script>

Could anyone help me solve this?