0

Necesito ayuda con el cálculo de la ruta de Google Maps al cargarla en forma dinámica. Aparece el error en la consola de que la función del cálculo (calcularRuta()) no está definida:

Uncaught ReferenceError: calcularRuta is not defined at HTMLInputElement.onclick (index.html:1)

Todo lo demás funciona perfectamente, pero al llamar a la función nombrada aparece ese error. He probado a cargarla de distintos modos y a situarla en otro lugar del código pero no funciona. Os de el script del mapa aquí:

var gMapsLoaded = false;
window.gMapsCallback = function() {
  gMapsLoaded = true;
  $(window).trigger('gMapsLoaded');
}

window.loadGoogleMaps = function() {
  if (gMapsLoaded) return window.gMapsCallback();
  var script_tag = document.createElement('script');
  script_tag.setAttribute("type", "text/javascript");
  script_tag.setAttribute("src", "https://maps.googleapis.com/maps/api/js?key=AIzaSyBDaeWicvigtP9xPv919E-RNoxfvC-Hqik&callback=gMapsCallback");
  (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}

$(document).ready(function() {
      var mapa;
      var mostrar_direcciones;

      var servicios_rutas;

      function initialize() {
        servicios_rutas = new google.maps.DirectionsService();
        mostrar_direcciones = new google.maps.DirectionsRenderer();
        var milatlng = new google.maps.LatLng(40.4450489, -3.6103049)
        var mapOptions = {
          zoom: 12,
          center: milatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP

        };
        map = new google.maps.Map(document.getElementById('mapa'), mapOptions);

        mostrar_direcciones.setMap(mapa);
        mostrar_direcciones.setPanel(document.getElementById("ruta"));

        var marker = new google.maps.Marker({
          position: milatlng,
          map: map,
        });

      }

      function calcularRuta() {
        var partida = document.getElementById("partida").value;
        var destino = document.getElementById("destino").value;
        var opciones = {
          origin: partida,
          destination: destino,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
          //indicamos en este caso que hacemos el viaje en coche/moto
        };

        servicios_rutas.route(opciones, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            mostrar_direcciones.setDirections(response);
          }
        });
      }

      $(window).bind('gMapsLoaded', initialize);
      window.loadGoogleMaps();

Y el HTML aquí:

<div id="contenedorMapa">
    <h2>ENCUÉNTRAME AQUÍ</h2>
    <div id="mapa">

        <p>Cargando, espere por favor...</p>

    </div>
    <div id="ruta" style="width: 100px; height: 100px; background-color: green;"></div>
    <input type="text" id="partida" name="partida">
    <input type="destino" id="destino" name="destino">
    <input type="button" name="button" id="button" value="aaaaaaaaaaa" onclick="calcularRuta()">
</div>

Supongo que es cuestión de mover algún dato pero he hecho varias pruebas y no doy con el error.

4
  • Parece que la función no está disponible en el ámbito global. Prueba de asignarla como propiedad del objeto window al final de tu código para ver si se trata de esto: window.calcularRuta = calcularRuta Una vez asignada al objeto window deberías poderla llamar desde el HTML sin que te devuelva el error de undefined Commented el 12 jul. 2019 a las 14:09
  • Gracias Marc, al hacerlo como dices no aparece ese error pero me aparece el siguiente: Directions Service: This API project is not authorized to use this API. A qué crees que pueda deberse? Commented el 12 jul. 2019 a las 14:30
  • Has generado la API key desde el panel de Google Developers? Este error es porque en el panel no tienes creada la aplicación con su API KEY. Si has copiado el código conteniendo la API KEY de cualquier otro sitio, no te va a funcionar. Debes crearla desde: cloud.google.com/maps-platform/?apis=maps y asignarla a tu proyecto configurando el dominio permitido para que cuando google compruebe la petición te de OK Commented el 12 jul. 2019 a las 14:31
  • Gracias Marc, lo haré como dices, lo importante es que el código parece estar correcto ya. Gracias! Commented el 12 jul. 2019 a las 14:45

1 respuesta 1

0

El problema se debe a que la declaración de la función calcularRuta la has puesto dentro de la función anónima que a su vez has puesto como argumento de $(document).ready() lo cual provoca que no esté disponible en el ámbito global sino sólo dentro del ámbito de la función anónima en cuestión.

Por otro lado, desde hace tiempo ya no se aconseja el uso de propiedades como onclick. Lo que se recomienda es crear "listeners" usando addEventListener.

Una forma de resolver el problema sin modificar el HTML de tu código es mover la declaración de la función al ámbito global, esto es, bórrala de donde se encuentra ahora y ponla al mismo nivel que $(document).ready().

Referencia

Relacionado

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.