JavaScript — InvalidValueError: initMap не является функцией?

Question

JavaScript — InvalidValueError: initMap не является функцией?

Я так и не смог решить эту проблему ни с одним из предоставленных ответов. Почему за это все еще проголосовали?

Я использую тему Sage от Roots.io

Я поставил 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

Чтобы попытаться решить эту проблему, я попытался переупорядочить энкес выше, и я также попытался переместить 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');
}
},

-1

google-maps javascript php roots-sage wordpress

Решение

Другие решения

Убедитесь, что функция 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!'
});
})
},

0

Источник

Accepted Answer

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

1