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.
setup.php
/**
* Theme assets
*/
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_HERE&callback=initMap', [], 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')) {
$(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!'
});
}
}
},
Line 106 is the googlemaps url line. Specifically the &callback=initMap part.
Scripts appear like this in the DOM.
<script type='text/javascript' src='//maps.googleapis.com/maps/api/js?key=MY_API_KEY_HERE&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.
