User login

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

Searched words: 
drupal template.php if page tpl drupal template.php front page

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;
}

<h3>Resolution</h3>

Comments

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.

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.

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

I am using hook_nodeapi with

I am using hook_nodeapi with $op='view' for this issue. But this obliviously requires a module.

Cheers!

Post new comment

The content of this field is kept private and will not be shown publicly.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • You can use Markdown syntax to format and style the text. Also see Markdown Extra for tables, footnotes, and more.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <blockquote> <small> <h2> <h3> <h4> <h5> <h6> <sub> <sup> <p> <br> <strike> <table> <tr> <td> <thead> <th> <tbody> <tt> <output>
  • Syntax highlight code surrounded by the {syntaxhighlighter SPEC}...{/syntaxhighlighter} tags, where SPEC is a Syntaxhighlighter options string or "class="OPTIONS" title="the title".
  • Lines and paragraphs break automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.