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:
<html>
<head>
<title>Navegador</title>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.js"></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="inicio()">
<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>
¿Me podeis ayudar?
Gracias.