Tengo creada una *pagina html* en la que muestro *un mapa*, la pagina se se abre bien en el navegador del pc

En Androdi Studio con una `clase Fragment` muestro la pagina desde el `webview`, pero a diferencia del navegador del pc que al mostrar la pagina me pregunta si quiero compartir la ubicación, desde Android tanto en el menulador como desde la apk, no llega ni a conectar, me tira el mensaje de error que le puse cuando no detecta señal  **hay un problema para solicitar los datos**.

El codigo que tengo en el html para cargar el mapa es este:


<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-html -->

    <html>
    <head>
    <title>Navegador</title>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>


    <!--
         <script
             src="https://code.jquery.com/jquery-1.12.4.min.js"
             integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
             crossorigin="anonymous">
          </script>
    -->        
    	        
        <script type="text/javascript">
                    function inicio() {
                                    navigator.geolocation.getCurrentPosition(fn_ok, fn_error);
                    }
                       function fn_error() {
                                    var divMapa = document.getElementById('mapa');
                                    divMapa.innerHTML = 'hay un problema al solicitar los datos';
                       }
                       function fn_ok(respuesta){
                                    var divMapa = document.getElementById('mapa');
                                    var lat = respuesta.coords.latitude;
                                    var lon = respuesta.coords.longitude;


                                    $("button[name='btnCiudad']").each(function(){
                                     
                                     $(this).bind( "click",function() {
                               // Generar enlace
                               var destino = $(this).val();
                               var enlace = 'http://maps.google.com/maps?saddr='+ lat + ',' + lon + '&daddr=' + destino;
                               document.getElementById('ruta').href = enlace;
                             });
                                    });
                               
                       }
        </script>
        
        <style type="text/css">

              .myButton-1 {
               -moz-box-shadow: 0px 9px 14px -7px #276873;
               -webkit-box-shadow: 0px 9px 14px -7px #276873;
               box-shadow: 0px 9px 14px -7px #276873;
               background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
               background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
               background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
               background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
               background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
               background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
               filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
               background-color:#599bb3;
               -moz-border-radius:8px;
               -webkit-border-radius:8px;
               border-radius:8px;
               display:inline-block;
               cursor:pointer;
               color:#ffffff;
               font-family:Arial;
               font-size:20px;
               font-weight:bold;
               padding:8px 31px;
               text-decoration:none;
               text-shadow:0px 1px 0px #3d768a;
              }
              .myButton-1:hover {
               background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
               background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
               background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
               background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
               background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
               background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
               filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
               background-color:#408c99;
              }
              .myButton-1:active {
               position:relative;
               top:1px;
              }
        </style>
                      
        <style>
            button {width: 275px}
              .botonMenuDespl {margin-left: 5px; width: 170px}
              .L336Visible { display:block; margin-bottom: -15px}
              .L336Oculto { display:none; margin-top: -190px}
              .L330Visible { display:block; margin-bottom: -15px}
              .L330Oculto { display:none; margin-top: -160px}
        </style>
        <script>
              function Menu(id_Div,nombre) {
                if(id_Div.className == nombre + "Oculto") {
                 id_Div.className = nombre + "Visible";
                } else {
                 id_Div.className = nombre + "Oculto";
                }
              }
        </script>
    </head>

    <body onload="javascript:initGeolocation()">
    <center>


        <button class="myButton-1" onclick="Menu(DivL336, 'L336')">Mostrar destinos 1</button>

    <br>
        <div id=DivL336 class=L336Oculto>
    <br>
        <table cellspacing=0>
                   <tr>
                       <td><span style="font: 15pt comic sans ms; color: blue">»</span></td>
                       <td><button type="button" class="BotonMenuDespl" name="btnCiudad" value="40.432905, -3.704264" onclick="Menu(DivL336, 'L336')">Madrid</button></td>
                   </tr>
                   <tr>
                       <td><span style="font: 15pt comic sans ms; color: blue">»</span></td>
                       <td><button type="button" class="BotonMenuDespl" name="btnCiudad" value="41.381749, 2.121436" onclick="Menu(DivL336, 'L336')">Barcelona</button></td>
                    </tr>               
                   <tr>
                       <td><span style="font: 15pt comic sans ms; color: blue">»</span></td>
                       <td><button type="button" class="BotonMenuDespl" name="btnCiudad" value="38.344589, -0.494663" onclick="Menu(DivL336, 'L336')">Alicante</button></td>
                    </tr>
        </table>
        </div>
    <br><br>

        <button class="myButton-1" onclick="Menu(DivL330, 'L330')">Mostrar destino 2</button>
    <br>
        <div id=DivL330 class=L330Oculto>
    <br>
        <table cellspacing=0>
                  <tr>
                     <td><span style="font: 15pt comic sans ms; color: blue">»</span></td>
                     <td><button type="button" class="BotonMenuDespl" name="btnCiudad" value="36.737453, -4.424661" onclick="Menu(DivL330, 'L330')">Malaga</button></td>
                  </tr>
                  <tr>
                     <td><span style="font: 15pt comic sans ms; color: blue">»</span></td>
                     <td><button type="button" class="BotonMenuDespl" name="btnCiudad" value="39.475299, -6.379334" onclick="Menu(DivL330, 'L330')">Caceres</button></td>
                  </tr>              
                  <tr>
                     <td><span style="font: 15pt comic sans ms; color: blue">»</span></td>
                     <td><button type="button" class="BotonMenuDespl" name="btnCiudad" value="43.266631, -2.935282" onclick="Menu(DivL330, 'L330')">Bilbao</button></td>
                  </tr>
        </table>
        </div>
    <br><br>
    </center>

    <br>
    <br>


    <a id="ruta" href="">
    <button style="font-size:18px; background-color:lightgreen; width: 175px;">
      <div style="float: left; position: relative;top: 15px;">Mostrar Ruta</div>
      <i class="material-icons" style="font-size:48px;color:blue">directions</i>
    </button>
    </a>
    <div id="mapa"></div>
    <br>
    <br>

      </script>
        <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOtXC1s0pg6INM7UEWlt1g3Vi14OpD50Q&callback=inicio">
      </script>

    </body>
    </html>

<!-- end snippet -->

¿Me podeis decir porque desde Androdi me dice que no puede solicitar los datos?

Gracias.