InvalidValueError: initMap is not a function?

Question

I was never able to resolve this issue with any of the provided answers. Why is this still down voted?

I'm using the Sage theme from Roots.io

I have enqueued the Google Maps API like so:

function assets() {
  wp_enqueue_style('sage/css', Assets\asset_path('styles/main.css'), false, null);
  wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css', false, null);

  if (is_single() && comments_open() && get_option('thread_comments')) {
    wp_enqueue_script('comment-reply');
  }
  wp_enqueue_script('sage/js', Assets\asset_path('scripts/main.js'), ['jquery'], null, true);
  wp_enqueue_script('jquery-validate', '//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js', [], null, true);

  if (is_page_template('template-about.php')) {
    wp_enqueue_script('google-maps', '//maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap', [], null, true);
  }

}

I then get this error in console:

Uncaught InvalidValueError: initMap is not a function ... js?key=MY_API_KEY&callback=initMap:95

To try and resolve this, I have tried re-ordering the enques above and I've also tried moving the initMap() function around my Main.js.

Main.js snippet:

(function($) {

  // Use this variable to set up the common and page specific functions. If you
  // rename this variable, you will also need to rename the namespace below.
  var Sage = {
    // All pages
    'common': {
      init: function() {
        // JavaScript to be fired on all pages
        if (!$('body').hasClass('home')) {
          $(this).find('.banner').removeClass('navbar-fixed-top');
        }

        var map;
        console.log('reached');
        function initMap() {
          var location = {lat: 51.47672559, lng: -3.17107379};
          var markerloc = {lat: 51.476852, lng: -3.167869};
          map = new google.maps.Map(document.getElementById('map'), {
            center: location,
            scrollwheel: false,
            zoom: 17
          });
          var marker = new google.maps.Marker({
            position: markerloc,
            map: map,
            title: 'Hello World!'
          });
        }

      },

I did find this so I tried adding

google.maps.event.addDomListener(window, 'load', initMap);

before and after the initMap() function. I think it may be something to do with the scope, how can I fix this?

Update: Defining the function outside the Sage object doesn't fix this either

(function initMap() {
  var location = {lat: 51.47672559, lng: -3.17107379};
  var markerloc = {lat: 51.476852, lng: -3.167869};
  map = new google.maps.Map(document.getElementById('map'), {
     center: location,
     scrollwheel: false,
     zoom: 17
  });
  var marker = new google.maps.Marker({
     position: markerloc,
     map: map,
     title: 'Hello World!'
  });
});
/* ========================================================================
 * DOM-based Routing
 * Based on link by Paul Irish
 *
 * Only fires on body classes that match. If a body class contains a dash,
 * replace the dash with an underscore when adding it to the object below.
 *
 * .noConflict()
 * The routing is enclosed within an anonymous function so that you can
 * always reference jQuery with $, even when in .noConflict() mode.
 * ======================================================================== */

(function($) {

  // Use this variable to set up the common and page specific functions. If you
  // rename this variable, you will also need to rename the namespace below.
  var Sage = {
    // All pages
    'common': {
      init: function() {
        // JavaScript to be fired on all pages 
          if (!$('body').hasClass('home')) {
            $(this).find('.banner').removeClass('navbar-fixed-top');
          }
      },

Putting the function in brackets makes it a function expression so its still not available in the global scope, remove the brackets. — Musa, Sep 29 '16 at 14:17
@Musa I have taken it out the brackets and I get the same result. — ProEvilz, Sep 29 '16 at 15:44
Why is this downvoted? NO ONE could resolve this issue on this post. — ProEvilz, Nov 21 '17 at 17:14

Titus · Answer 1 · 2016-09-29T17:47:37.253

2

The initMap has to be a global function. Currently, its scope is limited to the init function inside the Sage object inside the function($) {} function. You can do something like this to fix that.

window.initMap = function() {
  var location = {lat: 51.47672559, lng: -3.17107379};
  var markerloc = {lat: 51.476852, lng: -3.167869};
  map = new google.maps.Map(document.getElementById('map'), {
     center: location,
     scrollwheel: false,
     zoom: 17
  });
  var marker = new google.maps.Marker({
     position: markerloc,
     map: map,
     title: 'Hello World!'
  });
};

edited Sep 29 '16 at 17:47

answered Sep 29 '16 at 12:26

Titus

22,031
1
23
33

Where do I place this exactly? Would that go inside the init() where my function currently is ? – ProEvilz Sep 29 '16 at 12:31
@AshleyBrown I've edited my answer to illustrate where define the `initMap`. You also have to change the `init` function to an object in order for this to work. You're better off creating this `initMap` function in the global scope. – Titus Sep 29 '16 at 12:37
Doesn't work... I'll also update my answer with what else I've done. – ProEvilz Sep 29 '16 at 14:10
@AshleyBrown I've edited my answer, it should work no. Don't wrap the `initMap` function in parenthesis, that will limit its sope – Titus Sep 29 '16 at 14:17
Nope, still doesn't work. I put your code within the common tags and above the entire script outside the (function($){}) function too. :/ – ProEvilz Sep 29 '16 at 15:43
@AshleyBrown Also, make sure you add this script tag for the file which contains this before the script tag for the google maps script. – Titus Sep 29 '16 at 16:27
I'm not sure what you mean? Do you mean to add `` tags somewhere? – ProEvilz Sep 29 '16 at 17:19
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/124575/discussion-between-ashley-brown-and-titus). – ProEvilz Sep 29 '16 at 17:34
Yes, you need to add the ` – Titus Sep 29 '16 at 17:47

Mr. J · Answer 2 · 2016-09-29T12:50:37.940

0

Make sure that initMap function is global or the parameter passed as callback to google maps.js is proper.

Try Following,

'common': {
      init: function() {

        if (!$('body').hasClass('home')) {
          $(this).find('.banner').removeClass('navbar-fixed-top');
        }

       var map;
       console.log('reached');

        $(function initMap() {
          var location = {lat: 51.47672559, lng: -3.17107379};
          var markerloc = {lat: 51.476852, lng: -3.167869};
          map = new google.maps.Map(document.getElementById('map'), {
             center: location,
             scrollwheel: false,
             zoom: 17
          });
          var marker = new google.maps.Marker({
             position: markerloc,
             map: map,
             title: 'Hello World!'
          });
        })
      },

edited Sep 29 '16 at 12:50

answered Sep 29 '16 at 12:29

Mr. J

320
3
14

please try the code now, i have made some changes, @ashleybrown – Mr. J Sep 29 '16 at 12:51
Thanks, but it still doesn't change anything, same error :( – ProEvilz Sep 29 '16 at 14:01
have you used ? `add_action('wp_enqueue_scripts', 'assets')` – Mr. J Sep 29 '16 at 14:20
Yes I have, I just didn't include it on here – ProEvilz Sep 29 '16 at 14:23

InvalidValueError: initMap is not a function?

2 Answers2

Linked