2016-09-29 18:22 阅读 57


I'm using the Root's theme - Sage

I'm trying to enqueue Google Maps, been at it for hours with no success.

I keep getting this error in Chrome's console:

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

From what I can work out, it means that it can't find the function like the classic jQuery undefined problem of script ordering.


 * Theme assets

function assets() {
  wp_enqueue_style('sage/css', Assets\asset_path('styles/main.css'), false, null);

  wp_enqueue_style('font-awesome', '//', false, null);

  if (is_single() && comments_open() && get_option('thread_comments')) {
  wp_enqueue_script('sage/js', Assets\asset_path('scripts/main.js'), ['jquery'], null, true);

  wp_enqueue_script('jquery-validate', '//', [], null, true);

  if (is_page_template('template-about.php')) {
    wp_enqueue_script('google-maps', '//', [], null, true);

add_action('wp_enqueue_scripts', __NAMESPACE__ . '\\assets', 100);

Excerpt of my 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() {

            if (!$('body').hasClass('home')) {

           var map;

            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!'


Line 106 is the googlemaps url line. Specifically the &callback=initMap part.

Scripts appear like this in the DOM.

<script type='text/javascript' src='//;callback=initMap'></script>

<script type='text/javascript' src='//localhost:3000/app/themes/***********/dist/scripts/main.js'></script>

Can anyone help me out here?

I have been told this but I'm unsure on how to do it?

Most likely what's happening here is that google-maps ends up enqueued after sage/js. Your conditional block should account for that and add google-maps as a dependency for sage/js.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

  • 已采纳
    doupin1073 doupin1073 2016-09-29 19:01

    As charlietfl stated about dependencies

    wp_enqueue_script('google-maps', '//', ['sage-js'], null, true);

    I needed to add 'sage-js' as a dependency to maps.

    点赞 评论 复制链接分享