Hi there

I've skimmed most of this thread: http://drupal.org/node/315236 but this doesn't seem to answer my issue.

Here's what I am trying to do (and though I'm proficient at php and old-school Javascript, and Drupal itself, i'm pretty new to AJAX/AHAH and JQuery, which isn't helping matters here!)

we are building a website where a "low-bandwidth" setting can be made via a session variable (details not important here) and in those cases, a Content Template (ie: from module "contemplate") needs to display both pictures and google maps as a link "click here to load" instead of the picture or map... and then if the user clicks that link, AHAH is used to load the picture, or map, in-place. This splits up the page load time and means that they only load the picture or map if they actually want to see it.

my code looks something like the following:

in the content template:

if ($LOW_BANDWIDTH) {
	$fids = array();
	$bindings = array();
	drupal_add_js('misc/jquery.form.js');
	drupal_add_js('misc/ahah.js');
}
 ...
 
if($LOW_BANDWIDTH) {
	
	_gmap_doheader();
	
	//only show link to map (which will load via AHAH) instead of the map itself
	$nid = $node->nid;
	?>
	<div id="loadmapbyniddiv_<?php print $nid ?>">
	<a href="#" id="lbv_loadmapbynid_trigger_<?php print $nid ?>">Click here to view map</a>
	</div>
	<?php
	$ahah_binding = array(
	  'url'   => url('loadmapbynid/' . $nid),
	  'event' => 'click',
	  'wrapper' => 'loadmapbyniddiv_' . $nid,
	  'selector' => '#lbv_loadmapbynid_trigger_' . $nid,
	  'effect'   => 'slide',
	  'method'   => 'replace',
	  'progress' => array('type' => 'throbber'),
	);
	$bindings['loadmap_' . $nid] = $ahah_binding;

} else {
	print gmap_location_node_page($node->nid); 
}

...

foreach($node->field_host_picture_1 as $vobPicture) {
	if ($vobPicture['view'] != '') { 
	?>
		<div class="field field-type-image field-field-host-picture-1">
			<div class="field-item odd">
				<?php
				if($LOW_BANDWIDTH) {
					//only show link to picture (which will load via AHAH) instead of the picture itself
					$fid = $vobPicture['fid'];
					$fids[] = $fid;
					?>
					<div id="loadpicdiv_<?php print $fid ?>">
					<a href="#" id="lbv_loadpic_trigger_<?php print $fid ?>">Click here to view picture</a>
					</div>
				<?php } else { ?>
					<?php print $vobPicture['view']; ?>
				<?php } ?>
			</div>
		</div>
	<?php }
}

...
      
if($LOW_BANDWIDTH) {
	foreach ($fids as $fid) {
		$ahah_binding = array(
		  'url'   => url('loadpic/' . $fid),
		  'event' => 'click',
		  'wrapper' => 'loadpicdiv_' . $fid,
		  'selector' => '#lbv_loadpic_trigger_' . $fid,
		  'effect'   => 'slide',
		  'method'   => 'replace',
		  'progress' => array('type' => 'throbber'),
		);
		$bindings['loadpic_' . $fid] = $ahah_binding;
	}  
	drupal_add_js(array('ahah' => $bindings), 'setting');
}

the part to load pictures is calling an AHAH callback handler with Drupal path "loadpic/n" where n is the file id. code for this handler is something like this:

function lbv_loadpic($fid) {
	$picture = field_file_load($fid);
	$output =  "<div>" . '<img src="/' . $picture['filepath'] . '">' . "</div>";
	drupal_json(array('status' => TRUE, 'data' => $output));
}

and the part to load maps (calling a handler with path "loadmapbynid/n" where n is the node id) is like this:

function lbv_loadmapbynid($nid) {
	$output = gmap_location_node_page($nid);
	drupal_json(array('status' => TRUE, 'data' => $output));
}

so... my code to load pictures essentially works ok as-is. when you click a link "click here to view picture", that link disappears and is replaced by a div containing the picture, all using AHAH.

the code to load the google maps (structured very similarly) is loading a div of the same size as the map, when the link is clicked, with all the classes that should be there, like so:

<div id="gmap-nodemap-gmap0" class="gmap-control gmap-gmap gmap gmap-map gmap-nodemap-gmap gmap-processed" style="width: 100%; height: 400px;">Javascript is required to view this map.</div>

however, that div is empty, you see no map, just the "Javascript is required to view this map."

i already figured out that all the gmap and google maps javascript was NOT being included properly by calling gmap_location_node_page in an AHAH callback, i am guessing that drupal_set_html_head (called within _gmap_doheader) doesn't work properly in that context. That is why i added _gmap_doheader to the content template itself, so that the page would be loaded with all the javascript included already, even if the map wasn't there yet. and looking at the page source, it does seem to be including them in the "right" places (ie: same as if the google map was part of the initial page load). however, the map still doesn't load via AHAH.

i am pretty sure that what's happening is that some of this javascript isn't just to be "included in the page" but must actually be executed to draw the map. but WHICH parts?

****

after a little research on the internet, i found this forum post:

http://stackoverflow.com/questions/2512737/loading-gmaps-via-ajax

and in particular this comment:

"If I remember correctly, the Google Maps API script will only work when included normally on the page; it will not work if it's added after the page is loaded, like you're doing."

another post says:

"Try using the google ajax loader code instead: http://code.google.com/apis/ajax/documentation/"

however that link is no longer valid, instead redirects to: http://code.google.com/apis/loader/ where there doesn't seem to be any mention of an AJAX loader.

****

taking all this into account, my question for the gmap experts is the following (in multiple parts):

if delivering the results of gmap_location_node_page via AHAH (in the way i am doing above) instead of the initial page load, what javascript should be included in the page load and what javascript in the AHAH return?

is there javascript that actually has to be executed, not just loaded, in the AHAH return? if so, which pieces specifically? and how do i tell my AHAH binding to execute this, as well as calling the AHAH handler on the server? as i said, i am pretty new to AJAX, AHAH and JQuery, but not to php or old-school Javascript.

or... is this mysterious "google ajax loader" code the actual answer? does it even exist anymore, if it's not on the code.google.com page given above? and if so, is there a Drupal module or patch that implements this, or would I have to write the Drupal side of the equation from scratch?

thanks!
Peter Fisera
Earth Angel Consulting