Skip to main content
se eliminaron 186 caracteres en el cuerpo
Origen Enlace
SoCu
  • 468
  • 1
  • 7
  • 22
<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.min.js"
         integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
         crossorigin="anonymous">
      <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="javascript:initGeolocationonload="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>
<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.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>
<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>
se añadieron 75 caracteres en el cuerpo
Origen Enlace
SoCu
  • 468
  • 1
  • 7
  • 22
<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>

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

<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>

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

<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.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>

¿Me podeis ayudar?

se añadieron 75 caracteres en el cuerpo
Origen Enlace
SoCu
  • 468
  • 1
  • 7
  • 22
    <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;
                     });
                            });
                       
               }

y la key desde aqui

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

<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>

    <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;
                     });
                            });
                       
               }

y la key desde aqui

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

<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>

se añadieron 75 caracteres en el cuerpo
Origen Enlace
SoCu
  • 468
  • 1
  • 7
  • 22
Loading
cuerpo editado
Origen Enlace
SoCu
  • 468
  • 1
  • 7
  • 22
Loading
Origen Enlace
SoCu
  • 468
  • 1
  • 7
  • 22
Loading