web-dev-qa-db-ja.com

drupalにJavaScriptを適切に追加する方法

Googleマップを使用して、マーカーを介して検索結果に示された現在の場所を表示するモジュールを作成しようとしています。私が抱えている問題は、Googleマップスクリプトを追加すると、次のエラーが発生することです。

Uncaught ReferenceError: jQuery is not defined

自分のバージョンのjQueryを含めないと、マップは機能しませんが、jQueryを含めても含めなくてもエラーが残ります。

function gmapsnrew_block_view($delta = ''){
    $block['subject'] = 'Google Map Test';
    $block['content'] = '<div id="map-canvas"></div>';
    return $block;
}



drupal_add_css(drupal_get_path('module', 'gmapsnrew') . '/css/gmapsnrew.css');

drupal_add_js('http://maps.googleapis.com/maps/api/js?key=google_key&sensor=false&libraries=places');

drupal_add_js(drupal_get_path('module', 'gmapsnrew') . '/js/load-map.js');

そしてその load-map.jsは次のようになります。

(function ($) {
  Drupal.behaviors.gmapsnrew = {

    attach: function(context, settings){    

      console.log(context);
      var base_lat = 51.322377;
      var base_lng = -0.1358427;

      var latlng = new google.maps.LatLng(base_lat, base_lng);
      var options = {
          zoom: 10,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          mapTypeControl: false
      };
      var map = new google.maps.Map(document.getElementById("map-canvas"), options);  
    }
  }

})(jQuery);

ここで私が間違っていることはありますか？前もって感謝します。

7javascriptgoogle-maps
1
soul

コードサンプルが正確で、モジュールファイル内の関数の外部からdrupal_add_js（）を呼び出している場合、それが問題になります。

あなたはあなたのhook_block_view（）内からあなたのjsを追加したいと思うでしょう。このように、drupalがjsに必要なすべてを実行した後にロードされ、jQueryが存在します。

また、通常はページのロード時にマップを一度だけロードする必要があるため、マップの初期化をビヘイビアーに入れたくない場合があります。私はあなたのセットアップのすべての詳細を知っているわけではないので、私はあなたのケースで何が最善か正確に知ることができません。

3
rooby