<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOtXC1s0pg6INM7UEWlt1g3Vi14OpD50Q&callback=initMap"
        type="text/javascript"></script>

<script type="text/javascript">

                window.onload = function() {
                                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>

I/chromium: [INFO:CONSOLE(249)] "Google Maps API warning: SignedInNotSupported https://developers.google.com/maps/documentation/javascript/error-messages#signed-in-not-supported", source: https://maps.googleapis.com/maps-api-v3/api/js/31/6/util.js (249)

[INFO:CONSOLE(100)] "Uncaught InvalidValueError: initMap is not a function", source: https://maps.googleapis.com/maps/api/js?key=AIzaSyAOtXC1s0pg6INM7UEWlt1g3Vi14OpD50Q&callback=initMap (100)

<script src="https://maps.googleapis.com/maps/api/js?key= AIzaSyAOtXC1s0pg6INM7UEWlt1g3Vi14OpD50Q&signed_in=true"></script>