0

Hola me gustaría preguntaros si alguien me puede ayuda a resolver estos errores de consola que salen al agregar una API de Google maps en Wordpress.

Lo que estoy haciendo es incluir la api a traves del functions.php del theme. Así:

function my_theme_styles(){

//register scripts
    wp_register_script('maps', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyCfpER3xwhtc5ixN7o1ZJlKjN0CYSUGdcM&callback=initMap', array(), '', true );
    wp_register_script('scripts', get_template_directory_uri() . '/assets/js/scripts.js', array(), '1.0.0', true );


//add scripts
    wp_enqueue_script('maps');
    wp_enqueue_script('jquery');
    wp_enqueue_script('scripts');
}

add_action('wp_enqueue_scripts', 'my_theme_styles');

Tengo el mapa tan solo en la pagina de contacto. Cuando navego por otras paginas del theme, me da los siguientes errores de consola.

js?key=AIzaSyCfpER3xwhtc5ixN7o1ZJlKjN0CYSUGdcM&callback=initMap&ver=4.8.2:88 Uncaught TypeError: Cannot read property 'firstChild' of null
    at Object._.ug (js?key=AIzaSyCfpER3xwhtc5ixN7o1ZJlKjN0CYSUGdcM&callback=initMap&ver=4.8.2:88)
    at new zg (js?key=AIzaSyCfpER3xwhtc5ixN7o1ZJlKjN0CYSUGdcM&callback=initMap&ver=4.8.2:90)
    at initMap (scripts.js?ver=1.0.0:14)
    at js?key=AIzaSyCfpER3xwhtc5ixN7o1ZJlKjN0CYSUGdcM&callback=initMap&ver=4.8.2:98
    at js?key=AIzaSyCfpER3xwhtc5ixN7o1ZJlKjN0CYSUGdcM&callback=initMap&ver=4.8.2:66
    at Object._.Yd (js?key=AIzaSyCfpER3xwhtc5ixN7o1ZJlKjN0CYSUGdcM&callback=initMap&ver=4.8.2:64)
    at ke (js?key=AIzaSyCfpER3xwhtc5ixN7o1ZJlKjN0CYSUGdcM&callback=initMap&ver=4.8.2:66)
    at js?key=AIzaSyCfpER3xwhtc5ixN7o1ZJlKjN0CYSUGdcM&callback=initMap&ver=4.8.2:150
    at Object.google.maps.Load (js?key=AIzaSyCfpER3xwhtc5ixN7o1ZJlKjN0CYSUGdcM&callback=initMap&ver=4.8.2:21)
    at js?key=AIzaSyCfpER3xwhtc5ixN7o1ZJlKjN0CYSUGdcM&callback=initMap&ver=4.8.2:149

Alguien sabría decirme que estoy haciendo mal y como puedo resolverlo?

La definición de de initMap es

var map;
function initMap() { 
   var latLng = { lat: 40.421733, lng: -3.699977 }; 
   map = new google.maps.Map(document.getElementById('map'), { center: latLng, zoom: 16 }); 
   var marker = new google.maps.Marker({ position: latLng, map: map, title: 'El Lotero Rockero' });'

}

Gracias por adelantado.

2 respuestas 2

0

El script de llamado al mapa aparentemente lo estás ejecutando siempre. Imagino que la función initMap está en scripts.js y también la llamas siempre. (de otro modo, el error que te daría es que la función initMap no existe)

El error que te da es porque probablemente en initMap estás inicializando el mapa pasándole un elemento que sólo existe en la página de contacto. Luego, en el resto de las páginas, lo que haces es inicializar el mapa con un div que no existe.

Lo que podrías hacer, dado que tu contenedor tuviese el id my_map sería:

function initMap() {
  var contenedor = document.getElementById('my_map')
  if(contenedor!==null) {
    var mapOptions= {...},
        map = new google.maps.Map(contenedor, mapOptions); 
  }
}

Edit: sabiendo la definición de initMap debiera ser:

var map;
function initMap() { 
   var latLng = { lat: 40.421733, lng: -3.699977 },
       contenedor = document.getElementById('map');
   if(contenedor !== null) {
     map = new google.maps.Map(contenedor, { center: latLng, zoom: 16 }); 
     var marker = new google.maps.Marker({ position: latLng, map: map, title: 'El Lotero Rockero' });

   }
}

Además debieras asegurarte de que scripts.js se inserte antes de llamar al API de google.maps. De lo contrario tendrás una race condition que podría llevar al API a quejarse de que la función initMap no se ha definido.

2
  • Hola @amenadiel esto es lo que tengo en el js, como lo pondrías? '//GoogleMaps var map; function initMap() { var latLng = { lat: 40.421733, lng: -3.699977 }; map = new google.maps.Map(document.getElementById('map'), { center: latLng, zoom: 16 }); var marker = new google.maps.Marker({ position: latLng, map: map, title: 'El Lotero Rockero' });'
    – Edu
    Commented el 30 oct. 2017 a las 12:22
  • Voy a editar tu pregunta con la info adicional
    – ffflabs
    Commented el 30 oct. 2017 a las 12:24
0

Agradecerte @amenadiel la ayuda. Dejo el codigo aqui por si alguien quiere aprovecharlo. He añadido un map centering para el resize en responsive:

var map;
function initMap() {
   var latLng = { lat: 40.421733, lng: -3.699977 },
       container = document.getElementById('map');
  //"if" to only loading in specific page.
   if(container !== null) {
     map = new google.maps.Map(container, {
       center: latLng,
       zoom: 16
     });
     var marker = new google.maps.Marker({
     position: latLng,
     map: map,
     title: ''
    });
    //Google Maps marker Centering.
    map.addListener('center_changed', function() {
    // 1 seconds after the center of the map has changed, pan back to the
    // marker.
    window.setTimeout(function() {
      map.panTo(marker.getPosition());
    }, 1000);
    });
    marker.addListener('click', function() {
      map.setZoom(16);
      map.setCenter(marker.getPosition());
    });
   }
}

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.