Agaric Design Collective

How to add CSS and Javascript just for the front page, as for a custom GMap call

Average: 2 (2 votes)
By Benjamin Melançon
on 25 Dec
3 comments

Key words and phrases

drupal template.php if page tpl drupal template.php front page

Tags

Description

You cannot call drupal_add_css, drupal_add_js, or drupal_set_html_head in any page.tpl.php files themselves. This makes sense, as the variables used to display the page have to have been loaded already for the page to start displaying.

Agaric hit this wall and hardcoded the javascript and css we needed for the display of a Google map right into our page-front.tpl.php. A couple weeke older and wiser, Agaric intuitively grasps the Drupal way. Instead, you have to call the js and css adding functions (or any functions that call these functions) in a module (typical) or template.php if necessary.

Note that this problem meant a map view called in a page.tpl.php file would not work because it relied on adding javascript to the header.

To be fair to ourselves, we understood this. But our gmap-specific attempt failed:

/*  this does not work.  we had to hardcode.
if (drupal_is_front_page()) {
  // maybe we should try to call this only on pages that have maps
// but almost every page has a map
  $path = drupal_get_path('module', 'gmap') .'/js/';
  drupal_add_js($path .'icon.js');
  drupal_add_js($path .'markerloader_static.js');
}
*/

Cleverly searching for maps.google.com, because this was in the text of the javascript printout presenting the all-important API key:

cd ~/workspace/repos/agaric/drupal-contrib
      grep -nHR maps.google.com .

we traced our way back to this function:

_gmap_doheader();

hmm, the markers still aren't showing up

internal page, works:

...
@import "/sites/all/modules/gmap/gmap.css";
...

Drupal.extend({ settings: { "gmap_markermanager": [ ] } });

@import "/sites/all/modules/gmap/gmap.css";

Drupal.extend({ settings: { "gmap_markermanager": [ ] } });

So I knew something then that I don't know now, the two files I tried including originally are the two missing now. They are not in any way called by the _gmap_doheader() function but must be called by the theme_gmap function that calls it -- in the gmap_widget_ or the pre-theme gmap hook or something, but anyway as posited earlier they are not called if the call to the view is inside the page template itself.

  <?php
  $gmap_path = drupal_get_path('module', 'gmap');
    drupal_add_css($gmap_path .'/gmap.css');
    drupal_add_js($gmap_path .'/js/gmap.js');
    $mm = variable_get('gmap_mm_type', 'gmap');
          if ($mm=='clusterer') {
              drupal_add_js($gmap_path .'/js/icon.js');
                  drupal_add_js($gmap_path .'/thirdparty/Clusterer2.js');
                    }
                      drupal_add_js($gmap_path .'/js/marker.js');
                        drupal_add_js($gmap_path .'/js/'. $mm .'_marker.js');
                          $mms = variable_get('gmap_markermanager', array());
                            if (empty($mms[$mm])) {
                                $mms[$mm] = array();
                                  }
                                    drupal_add_js(array('gmap_markermanager' => $mms[$mm]), 'setting');
                                    // @@@
                                    drupal_add_js($gmap_path .'/js/poly.js');
                                      $key = variable_get('googlemap_api_key', '');
                                        drupal_set_html_head('');
                                                ?>

                     
drupal_set_html_head('<script src="http://maps.google.com/maps?file=api&amp;v='. GMAP_API_V .'&amp;key='. variable_get('googlemap_api_key', '') .'" type="text/javascript"></script>');

from 5/modules/gmap/gmap.module:177

 
 /**
 * Set up the HTML header for GMap.
 */
function _gmap_doheader() {
  static $gmap_initialized = FALSE;
  if ($gmap_initialized) {
    return;
  }
  $gmap_path = drupal_get_path('module', 'gmap');
  drupal_add_css($gmap_path .'/gmap.css');
  drupal_add_js($gmap_path .'/js/gmap.js');
  $mm = variable_get('gmap_mm_type', 'gmap');
  if ($mm=='clusterer') {
    drupal_add_js($gmap_path .'/js/icon.js');
    drupal_add_js($gmap_path .'/thirdparty/Clusterer2.js');
  }
  drupal_add_js($gmap_path .'/js/marker.js');
  drupal_add_js($gmap_path .'/js/'. $mm .'_marker.js');
  $mms = variable_get('gmap_markermanager', array());
  if (empty($mms[$mm])) {
    $mms[$mm] = array();
  }
  drupal_add_js(array('gmap_markermanager' => $mms[$mm]), 'setting');
// @@@
drupal_add_js($gmap_path .'/js/poly.js');
  $key = variable_get('googlemap_api_key', '');
  if (module_exists('keys_api')) {
    $key = keys_api_get_key('gmap',$_SERVER['HTTP_HOST']);
  }
  drupal_set_html_head('');
  $gmap_initialized = TRUE;
}
 

Same trouble

Hello,

I have the same problem; I'm trying to put a custom gmap in the front page, but I can't. Only show the message 'Javascript is required...' ¿Where you put this functions? ¿On the frontpage.tpl.php or in the template.php? ¿In a particular function?

Thanks.

Posted by Palimp (not verified) on Mon, 2008-09-15 12:31
Honestly

I don't remember what issues we were working around in the above post, but there were definitely more complications than you should have.

See http://awebfactory.com.ar/node/335 for links to some examples recently presented at DrupalCamp LA.

Posted by Benjamin Melançon on Tue, 2008-09-16 10:54
I had the same problem: I

I had the same problem: I need to add in the home page a gmap and addint theme('gmap',...) don't work (javascript error message) as said above.

I solved using a block in a custom module. In the hook block (switch view) I was able to use theme('gmap', $markers). In this way _gmap_doheader() is called long before template.php or page.tpl.php

Posted by Visitor (not verified) on Wed, 2008-09-17 12:24
Post new comment
The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <blockquote> <h1> <h2> <h3> <h4> <h5> <h6> <small> <pre> <strike> <sub> <sup> <kbd> <s>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Copy the characters (respecting upper/lower case) from the image.