Javascript InvalidValueError:initMap不是函数？_Javascript_Php_Wordpress_Google Maps_Roots Sage

Javascript InvalidValueError:initMap不是函数？

javascript php wordpress google-maps

Javascript InvalidValueError:initMap不是函数？,javascript,php,wordpress,google-maps,roots-sage,Javascript,Php,Wordpress,Google Maps,Roots Sage,我从来没有能够解决这个问题与任何提供的答案。为什么这仍然被否决我正在使用Roots.io中的Sage主题我已将Google Maps API排队，如下所示： function assets() { wp_enqueue_style('sage/css', Assets\asset_path('styles/main.css'), false, null); wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font

我从来没有能够解决这个问题与任何提供的答案。为什么这仍然被否决

我正在使用Roots.io中的Sage主题

我已将Google Maps API排队，如下所示：

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

}

然后，我在控制台中得到了这个错误：

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

为了尝试解决这个问题，我尝试对上面的enques重新排序，并尝试将

initMap（）

函数移动到我的

Main.js

周围

Main.js代码段：

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

      },

我确实找到了，所以我尝试添加

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

在

initMap（）函数前后。我认为这可能与范围有关，我如何解决这个问题
更新：在Sage对象之外定义函数也无法解决此问题
(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');
          }
      },

initMap
必须是一个全局函数。目前，其范围仅限于函数（$）{
函数中的Sage
对象中的init
函数。你可以这样做来解决这个问题
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!'
  });
};

initMap
必须是一个全局函数。目前，其范围仅限于函数（$）{
函数中的Sage
对象中的init
函数。你可以这样做来解决这个问题
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!'
  });
};

确保initMap函数是全局的，或者作为回调传递给google maps.js的参数是正确的
试试下面的
'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!'
          });
        })
      },

确保initMap函数是全局的，或者作为回调传递给google maps.js的参数是正确的
试试下面的
'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!'
          });
        })
      },

我应该把这个放在哪里？这会进入我的函数当前所在的init（）中吗？@AshleyBrown我已经编辑了我的答案，以说明如何定义initMap
。您还必须将init
函数更改为对象，以使其正常工作。您最好在全局范围内创建此initMap
函数。不起作用。。。我还将用我所做的其他事情更新我的答案。@AshleyBrown我已经编辑了我的答案，它应该可以工作。不。不要将initMap
函数括在括号中，这会限制它的sopepoe，仍然不能工作。我将您的代码放在公共标记中，并放在（function（$）{}）函数之外的整个脚本之上：/我应该把这个放在哪里？这会进入我的函数当前所在的init（）中吗？@AshleyBrown我已经编辑了我的答案，以说明如何定义initMap
。您还必须将init
函数更改为对象，以使其正常工作。您最好在全局范围内创建此initMap
函数。不起作用。。。我还将用我所做的其他事情更新我的答案。@AshleyBrown我已经编辑了我的答案，它应该可以工作。不。不要将initMap
函数括在括号中，这会限制它的sopepoe，仍然不能工作。我将您的代码放在公共标记中，并放在（function（$）{}）函数之外的整个脚本之上：/请现在尝试代码，我已经做了一些更改，@ashleybrownThanks，但它仍然没有更改任何内容，相同的错误：（您是否使用了？add\u action（'wp\u enqueue\u scripts'，'assets'））
是的，我有，我只是没有在这里包含它。请现在尝试代码，我做了一些更改，@ashleybrownThanks，但它仍然没有更改任何内容，相同的错误：（您使用了？添加操作（'wp\u排队脚本，'assets'））
是的，我在这里没有包含它。将函数放在括号中使其成为函数表达式，因此它在全局范围内仍然不可用，请删除括号。@Musa我将其从括号中取出，得到了相同的结果。为什么会被否决？没有人能在这篇文章中解决此问题。将函数放在括号中使其成为函数表达式，使其在全局范围内仍然不可用，请删除括号。@Musa我已将其从括号中取出，得到了相同的结果。为什么会被否决？没有人能在这篇文章中解决此问题。