GOOGLE MAPS console errors api, WORDPRESS

Question

GOOGLE MAPS console errors api, WORDPRESS

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Hi, I would like to ask you if someone can help me to solve these console errors that come up when adding a Google maps API in Wordpress.

What I'm doing is include the api through the theme's functions.php. So:

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');

I have the map just on the contact page . When I browse for other pages of the theme , I get the following console errors.

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

Could someone tell me what I'm doing wrong and how can I solve it?

The definition of initMap is

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' });'

}

Thanks in advance.

google-maps wordpress google-api wordpress-theme

asked by Edu 30.10.2017 в 12:38

source

2 answers

Canvas-lms: SMTP From address may not be blank: nil Django modelFieldFieldField with choices, show value instead of key

score 0 · Answer 1

The map calling script is apparently always running. I imagine that the function initMap is in scripts.js and you also call it always. (otherwise, the error I would give you is that the function initMap does not exist)

The error it gives you is probably because in initMap you are initializing the map by passing it an element that only exists in the contact page. Then, in the rest of the pages, what you do is initialize the map with a div that does not exist.

What you could do, given that your container had the id my_map would be:

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

Edit: knowing the definition of initMap should be:

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' });

   }
}

You should also make sure that scripts.js is inserted before calling the google.maps API. Otherwise you will have a race condition that could lead the API to complain that the initMap function has not been defined.

score 0 · Answer 2

Thank you @amenadiel for the help. I leave the code here in case someone wants to take advantage of it. I added a map centering for the resize in 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());
    });
   }
}