Javascript 联系人页面上的GoogleMaps块给出了offsetwidth错误，并弄乱了Drupal7中的其他模块

我有一个运行Drupal 7的工作网站，其中安装了一些标准模块，如视图、面板和色盒。一切正常，我开始用谷歌地图创建一个自定义模块，用自定义标记在地图上显示位置

地图按预期工作，直到进入视图管理员，我才注意到任何错误。不知怎的，Gmap中的JS代码弄乱了我的一些模块的配置区域。（弹出窗口工作不正常，按钮错位等）

编辑： 当我启用这个模块时，控制台在main.js中显示“uncaughttypeerror:cannotreadproperty'offsetWidth'of null”，我想是从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）

我看了一遍代码，但老实说，我不知道该找什么。提前感谢您的帮助

编辑： 当我启用这个模块时，控制台在main.js中显示“uncaughttypeerror:cannotreadproperty'offsetWidth'of null”，我想是从google maps api中读取的

编辑：

---

经过几个小时的搜索，我发现最好的答案是，在需要访问map div的javascript运行之前，map div没有被呈现。我还读到js代码中的（function（$）{}和drupal.behavior应该等待页面加载。所以我不明白为什么会出现这个错误。

尝试重新排序js文件。 可能是在加载所需的其他文件之前加载了js文件。

---

例如，jQuery在调用jQuery函数后被加载。

我在Drupal论坛上得到了一些帮助，设法让它工作起来！我将尝试在这里解释它，以便帮助其他人解决这个问题

我使用了一个自定义的.module文件，其中包括我在顶部发布的.js文件。 my.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;
}

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

我的.module文件在我放置块的任何位置都创建了一个id为“map_canvas”的div。我将此块添加到我的联系人页面，这只在该页面上添加了div，但.js文件包含在每个页面的标题中。这导致错误“Uncaught TypeError:无法读取null的属性'offsetWidth'除了我的联系人页面之外，其他页面都有。这破坏了我在其他模块中的javascript

这个错误是由我的modules.js文件查找“map_canvas”div引起的，该div在其他任何页面上都不存在

我解决这个问题的方法是只在联系人页面上包含我的.js文件，其中存在“map\u canvas”div

我在.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;
}

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

这确保了.js只加载在我的联系人页面上，而不加载在任何其他页面上。 还要确保在css中为“map_canvas”指定宽度和高度，以便它显示

---

在搜索答案的过程中，我在过去两天看到了很多关于这个问题的帖子，我希望这能帮助一些人。祝你好运。

听起来像是css冲突。我尝试将JS文件一直放在页脚下。但仍然是相同的问题。