I have created an html page in which I show a map , the page opens well in the pc browser
In Androdi Studio with a clase Fragment I show the page from the webview , but unlike the pc browser that shows the page if I want to share the location, from Android both in the mentor and from the apk , does not reach or connect, I throw the error message that I put when no signal there is a problem to request data .
The code I have in the html to load the map is this:
<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>Can you help me?
Thank you.
