InvalidValueError：initMap不是函數嗎？

Question

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

我使用的是聖人主題，從Roots.io

我已經排隊了谷歌地圖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，並且我也嘗試過移動我的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!' 
      }); 
     } 

     }, 

我發現this所以我嘗試過和initMap()功能後加入

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

。我認爲這可能與範圍有關，我該如何解決這個問題？

更新：定義賢者對象外的函數不解決這個問題要麼

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

Answer 1

的initMap必須是一個全球性的功能。目前，其範圍限於init函數內部Sage對象內的function($) {}函數。你可以這樣做來解決這個問題。

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

Answer 2

確保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!' 
      }); 
     }) 
     },