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">
   <meta charset="utf-8">

     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.");

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

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

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

Could anyone help me solve this?