How to properly add JavaScript to drupal

Question

I'm trying to create a module that will make use of Google Maps to display the current places indicated in the search results via markers. The problem that I'm having is that I'm getting the following error when I add the Google maps script:

Uncaught ReferenceError: jQuery is not defined 

The map wouldn't work if I don't include my own version of jQuery, but the error stays there whether or not I include 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');

And the load-map.js looks something like this:

(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);

Any ideas what I'm doing wrong here? Thanks in advance.

Answer 1

If your code sample is accurate, and you are calling drupal_add_js() from outside a function in a module file, then that will be the problem.

You would want to add your js from within your hook_block_view(). This way it loads after drupal has done all it needs to do with its js and jQuery will exist.

Also, you might not want to put your map initialisation in a behavior, because you would usually only ever want your map to load once, on page load. I don't know all the details of your setup though so I can't know exactly what is best in your case.