Блок карт Google на странице контактов выдает ошибку смещения и портит другие модули в drupal 7

0

У меня есть рабочий сайт под управлением 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-коде должны дождаться загрузки страницы. Поэтому я не понимаю, почему это дало бы мне эту ошибку.

  • 0
    Похоже, конфликт CSS.
Теги:
google-maps
drupal
drupal-7

2 ответа

0
Лучший ответ

Мне удалось заставить его работать с некоторой помощью на форуме 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 дня об этой проблеме во время поиска ответа, и я надеюсь, что это может помочь кому-то. Удачи.

0

Попробуйте переупорядочить файлы JS. Возможно, файл js загружается до загрузки другого файла. Например, jQuery загружается после вызова функций jQuery.

  • 0
    Попытался положить файл JS полностью под нижний колонтитул. Но все та же проблема.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню