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

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>