Skip to main content
2 de 2
eliminar etiqueta de título; eliminar gracias; cambiar formato de error de código a cita
Rubén
  • 11.5k
  • 7
  • 41
  • 85

Cómo cargar dinámicamente el cálculo de ruta del mapa

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.