JSFiddle - React, Tailwind, and code Playground

by SoCu

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