GMap views - listing clickable nodes with a GMap

By default the GMap view only allows for a map to be displayed with markers. To display a list with the Map and to allow for interaction between the two, follow these instructions:

First create your GMap page view. Try http://groups.drupal.org/node/19614

Ensure any specifics are added to the Defaults because the next step is to create a second "page" view but style it to display your node list. At some point you will want the "Fields" to be different and the "Path" will also differ. You will have two different pages now, one with a nodes list and one with a GMap that you'll want to combine into a single page.

Part of the difficulty is if you want to filter the results of both based on exposed filters. Add any exposed filters you like, but ensure they are in the Defaults so they apply to both the GMap and the node list and also ensure "Use Ajax" is set to "no".

To combine the two views into one, you must edit a file in the "gmap" module folder called "gmap-view-gmap.tpl.php" and add a call to embed your node list view with your GMap. The call will look something like this:

  $viewname = "gmapview";
  $output = views_embed_view($viewname, $display_id = 'default');
  print $output;

A couple notes, the 'name' variable should be set to the name of your view and the 'display_id' should be either 'default' or the name of your node list page view.

The last step that is a bit complicated is having the link in the node list trigger the "click" event for it's marker. To accomplish this add the following Javascript code to the the view page either through a page.tpl.php or use the drupal_add_js():

<script>
$(document).ready(function(){

	$('.views-field-title a').each(function(i){
	  $(this).bind('click', function(){
	    GEvent.trigger(Drupal.settings.gmap.auto2map.markers[i].marker, "click");
	    return false;
	  });
	});

});
</script>

This script will execute once the page is loaded and bind all the links in each class "views-field-title" (this might be different but I used the "node:title" as my link) to a corresponding marker in the DOM. I think the 'auto2map' might be different in some cases but a look at the DOM should show you what the ID of your map is.

Once completed, a map and node list will be displayed and clicking on the title in the node list will trigger the associated marker.