By nizz0k

2019-02-06 17:32:00 8 Comments

So, I'm trying to implement a custom map using the Google Maps API in addition to a Google Map view. I'm working with an up-to-date D7 install. The reason for this is that I need to have multiple layers of content types, which isn't possible with the default views user interface. The view needs to show multiple entity types as individual layers, which I hope to implement as GeoJSON data layers from GeoJSON views through a custom map implementation.

The problem is my current approach is breaking my existing GMAP views and is interfering with jquery functionality.

I get a series of 'jquery is undefined' errors, as well as broken UI functionality, leading me to believe something is making variables collide.

I am approaching this by creating a block in a custom module and adding the markup and JS necessary through the module like so.

add js files $path = drupal_get_path('module', 'gmap_json');  
drupal_add_js($path. '/gmap_json.js', 'file');

function gmap_json_block_info() {
    $blocks = array();  
    $blocks['hello_world'] = array(
      'info' => t('Hello world'),
    return $blocks;

  function gmap_json_block_view($delta = '') {
    $block = array();  
    if ($delta == 'hello_world') {
      $block['subject'] = t('Hello world');
      $block['content'] = t('This is the block content.');
      $block['content'] .= '<div id="json-map"></div>';
    return $block;

And my map js is here

function initMap() {
    map = new google.maps.Map(document.getElementById('json-map'), {
      zoom: 4,
      center: {lat: -28, lng: 137}

The problem seem to be with how I'm adding my scripts, since leaving the drupal_add_js statement out of the module is what triggers the error.

So, how am I messing up in adding the js to the page? What's the right way to do this?


@nizz0k 2019-02-10 14:51:11

So, in this case the answer comes from one of the comments. I wasn't properly using the drupal_add_js call, which shouldn't be called globally. So I moved it into the function in my little module to side step this, but the better way to approach this is using the render arrays and the #attached property of the block's content array. This approach let's you more granularly choose which js is placed and called.

Related Questions

Sponsored Content

1 Answered Questions

Google Maps directions link icon

  • 2014-06-12 14:28:12
  • Nicola Loverre
  • 410 View
  • 0 Score
  • 1 Answer
  • Tags:   google-maps

1 Answered Questions

0 Answered Questions

How to consume Views GeoJSON in a custom JS map application?

1 Answered Questions

Module Block does not show up

  • 2012-11-21 21:41:25
  • mannadu
  • 1089 View
  • 0 Score
  • 1 Answer
  • Tags:   7 blocks

1 Answered Questions

[SOLVED] How to add Google Maps data overlay to Openlayers map?

0 Answered Questions

Drupal Behaviours - Call specific JS function from PHP

  • 2015-03-25 15:08:04
  • erg-web
  • 817 View
  • 1 Score
  • 0 Answer
  • Tags:   javascript

2 Answered Questions

[SOLVED] Using drupal_add_js with google maps

1 Answered Questions

[SOLVED] Converting existing autocomplete field to custom Drupal field

1 Answered Questions

[SOLVED] Add JS to specific pages AFTER all other JS

1 Answered Questions

[SOLVED] Adding Google maps to a page

Sponsored Content