У меня есть рабочий сайт под управлением Drupal 7 с несколькими стандартными модулями, установленными как виды, панели и colorbox. Все работало нормально, и я начал создавать пользовательский модуль с картами google, чтобы показать местоположение на карте с пользовательским маркером.
Карта работает по назначению, и я не заметил ничего плохого, пока не зашел в мой просмотр admin. Как-то JS-код из Gmap испортил область конфигурации некоторых из моих модулей. (Всплывающие окна не работают должным образом, кнопки неуместны и т.д.)
EDIT: Когда я включаю этот модуль, консоль отображает "Uncaught TypeError: Невозможно прочитать свойство offsetWidth" null "в main.js из google maps api. Я думаю.
Вот код из файла.js:
(function ($) {
"use strict";
Drupal.behaviors.simple_gmap = {
attach: function (context) {
function initialize() {
// Map options.
var location = new google.maps.LatLng(51.5550390, 5.0843100);
var mapOptions = {
zoom: 17,
panControl: false,
zoomControl: true,
scaleControl: false,
qw2mapTypeControl: false,
rotateControl : false,
overviewMapControl : false,
scrollwheel : true,
center: location,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
// Build the map and marker.
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var image = 'sites/all/modules/simple_gmap/images/icomaps.png';
var marker = new google.maps.Marker({
map: map,
position: location,
icon: image,
animation: google.maps.Animation.DROP,
title: 'Testtitle'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
}
};
}) (Jquery);
Я просмотрел код, но, честно говоря, я не уверен, что искать. Заранее благодарю за любую помощь!
EDIT: Когда я включаю этот модуль, консоль отображает "Uncaught TypeError: Невозможно прочитать свойство offsetWidth" null "в main.js из google maps api. Я думаю.
EDIT: спустя несколько часов, чтобы найти лучший ответ, я обнаружил, что карта div не отображается перед запуском javascript, который должен получить к ней доступ. Я также читал, что (function ($) {} и drupal.behaviors в js-коде должны дождаться загрузки страницы. Поэтому я не понимаю, почему это дало бы мне эту ошибку.
Мне удалось заставить его работать с некоторой помощью на форуме Drupal! Попытаемся объяснить это здесь, чтобы помочь другим понять эту проблему.
Я использовал пользовательский файл.module, который включал файл.js, который я опубликовал вверху. Код из моего файла.module:
function simple_gmap_init() {
drupal_add_js(drupal_get_path('module', 'simple_gmap') . '/simple_gmap.js');
drupal_add_js('http://maps.googleapis.com/maps/api/js?sensor=false', 'external');
}
function simple_gmap_block_info() {
$blocks['simple_gmap'] = array(
'info' => t('Google Map'),
'cache' => DRUPAL_CACHE_PER_ROLE,
);
return $blocks;
}
function simple_gmap_block_view($delta = '') {
$block = array();
switch ($delta) {
case 'simple_gmap':
$block['content'] = '';
}
return $block;
}
Мой файл.module создал div с id "map_canvas", где бы я не разместил свой блок. Я добавил этот блок на мою контактную страницу, которая добавила div только на эту страницу, но файл.js включался в начало каждой страницы. Это вызвало ошибку "Uncaught TypeError: Невозможно прочитать свойство" offsetWidth "null" на каждой странице, кроме моей контактной страницы. Что сломало мой javascript в других модулях.
Эта ошибка возникла из-за того, что мои модули.js файла искали div "map_canvas", который не присутствовал ни на одной из других страниц.
То, что я сделал, чтобы решить проблему, включало мой.js файл ТОЛЬКО на странице контакта, где существовал div "map_canvas".
Я добавил код, указанный ниже в файле.module:
<?php
function simple_gmap_form_alter(&$form, &$form_state, $form_id)
{
if($form_id == 'contact_site_form')
{
$form['map'] = array
(
'#markup' => '<div id="map_canvas"></div>',
'#weight' => -20, // adjust as necessary
'#attached' => array
(
'js' => array
(
array
(
'type' => 'file',
'data' => drupal_get_path('module', 'simple_gmap') . '/js/some_file.js',
),
),
)
);
}
}
?>
и я удалил код, написанный ниже, из функции simple_gmap_init():
drupal_add_js(drupal_get_path('module', 'simple_gmap') . '/simple_gmap.js');
Это сделало так, чтобы.js загружалась только на мою контактную страницу, а не на любую другую страницу. Также убедитесь, что вы даете "map_canvas" ширину и высоту в css, чтобы она отображалась.
Я видел много сообщений за последние 2 дня об этой проблеме во время поиска ответа, и я надеюсь, что это может помочь кому-то. Удачи.
Попробуйте переупорядочить файлы JS. Возможно, файл js загружается до загрузки другого файла. Например, jQuery загружается после вызова функций jQuery.