1

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.

2
  • ¿Cual es la razón de de cargarlo desde un WebView?
    – Jorgesys
    Commented el 1 feb. 2018 a las 19:24
  • Hola @Jorgesys, Tengo creado un menú que llama a las demás clases que son Fragment y cargan páginas web internas, al ser esta una página más la muestro como las demás, lo preguntas porque no está bien cargarlo así? Como tendría que cargar la pagina?
    – SoCu
    Commented el 1 feb. 2018 a las 20:50

1 respuesta 1

1

Un WebView es una versión "light" de un navegador, en realidad no puedes esperar el mismo comportamiento en ambos, ya que lo que cargas dentro de un WebView puede en ocasiones no funcionar, por esta razón el uso de maps debería ser preferentemente nativo.

En el caso de cargar un mapa en el cual indicas geolocalización puede funcionar sin problema, muy importante habilitar Javascript:

 webView.getSettings().setJavaScriptEnabled(true);

introducir la descripción de la imagen aquí

Pero en el caso de tratar de obtener geolocalización mediante una página web dentro de un WebView, no sería lo conveniente.

Lo recomendable es realizarlo nativamente, usando un MapFragment

<fragment
    android:id="@+id/mapid"
    android:name="com.google.android.gms.maps.MapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
7
  • Si Javacript esta habilitado, desde el un menú creado cada opción muestra documentos que están en paginas web, todas las opciones abren Fragment no puedo poner una clase Activity o Maps nativo porque en las opciones del menú dan error, ¿o se puede poner de alguna forma? Y cunado dices de hacerlo nativamente dentro del WebView a que te refieres.
    – SoCu
    Commented el 2 feb. 2018 a las 18:18
  • 1
    @SoCu me refiero a que uses un MapFragment: es.stackoverflow.com/questions/114087/…
    – Jorgesys
    Commented el 2 feb. 2018 a las 18:28
  • Gracias Jogesys cuando llegue a casa veo más detenidamente y mejor ese enlace que desde el móvil no es lo mismo, y cualquier duda si no te importa ya te preguntaré, y mira que busque todo lo relacionado con el mapa y ese post no lo vi
    – SoCu
    Commented el 2 feb. 2018 a las 18:42
  • Hola @Jorgesys, sigo probando, pero no consigo mostrar el mapa, he puesto el código completo del mapa arriba, al ejecutarlo me muestra un mensaje que dice que no está diferida la geolocalización en el HTML, no sé si será ese el problema, pero si se utiliza el HTML en el navegador del PC funciona sin problemas, ¿me podéis ayudar?
    – SoCu
    Commented el 16 mar. 2018 a las 20:03
  • @SoCu comentas que en el navegador de la pc funciona correctamente pero yo veo que no es así, de hecho marca : "initGeolocation() not defined" es el método que se carga en onload.
    – Jorgesys
    Commented el 16 mar. 2018 a las 22:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.