Implementing GMap InfoWindow Tabs

(Please suggest a better place for this handbook-- themes? snippets? .. there's no "gmap theming" or "third party contrib details"..)

GMap Theming: Theming Map Markers

InfoWindow vs. openInfoWindowTabs - Tabs or no Tabs?

The Drupal third-party contributed gmap module exposes the theme hook theme_gmap_views_marker_label that lets the theme developer optionally and seamlessly use either tabs or text (html/text with no tabs) in the infoWindow. Technically, "infoWindow" is really "infoWindowTabs" at this point, but for simplicity it will be referred to as "infoWindow." Returning a flat html string from this theme function provides a themed infoWindow popup. Returning an array of html with text labels provides a themed, labeled, tab interface. in theory, the theme override function could arbitrarily return either depending on content and logic within the function for each marker.

Provide a function "phptemplate_gmap_views_marker_label" in template.php to theme the gmap_view marker. This theme hook overrides the default, tab-less output and returns optionally either an html or text string for tab-less infoWindow or an array of html or text strings representing tabs in the infoWindow.

How to make themable tabs based on node content in a gmap infoWindow (infoWindowTabs)

Simplified template.php snippet: The following example provides two tabs for a "historical marker" to be plotted in gmap. The tabs are "Marker" (describes the marker) and "Directions" (how to get to it).

function phptemplate_gmap_views_marker_label($view,$fields,$entry) {
  $marker_label = '';
  $marker_directions = '';
  drupal_add_css(path_to_theme() .'/histmarkers_map.css');
  $marker_label = '<div class="gmap-infowin">'
        .'... <b>some html containing php to grab relevant $node info for tab1 called Marker</b>'
        .'</div>'
  ;
 
  $marker_directionstxt = '... <b>some html for tab2 called Directions</b>...';

  $marker_directions = '<div class="gmap-infowin">'
        .'<h1 class="title">Special instructions containing php to grab relevant $node info for this historical marker</h1>'
        .'<div class="marker-text">'. $marker_directionstxt
        .'</div>'
        .'</div>'
  ;
 
  $marker_tabs = array(
    'Marker' => $marker_label,
    'Directions' => $marker_directions,
  );
  return $marker_tabs;
}

The meat that contains the node-references (where "containing php to grab relevant $node info" exists above) has been stripped out, but that's all basic theming there. To expose this info, you can use the dirty, brute force var_dump($node); die(); method, take advantage of the devel module, or any number of sneaky Drupal theming tricks. The following example snippet shows a more detailed "directions" part from above which would be stuffed into the "directions" element of the array returned by the theme function:

  $marker_directionstxt = views_theme_field('views_handle_field', 'node_data_field_directions_field_directions_value', $fields, $view->field[6], $entry, $view);
  $marker_gps = '<span>'. views_theme_field('views_handle_field', 'location_latitude', $fields, $view->field[8], $entry, $view) .', '. views_theme_field('views_handle_field', 'location_longitude', $fields, $view->field[9], $entry, $view) .'</span> <span>(lat, lon)</span>';
  $marker_directions = '<div class="gmap-infowin">'
        .'<h1 class="title">Special instructions for this historical marker</h1>'
        .'<div class="marker-text">'. $marker_directionstxt
        .'<br/><b class="title">GPS Coordinates</b>'
        .'<br/>'. $marker_gps
        .'</div>'
        .'</div>'
  ;

It is recommended that you get your map interface up and running with the gmap module without a theme first just to be sure everything is configured properly.

Theming gmap markers popup labels

Thanks for the code. I discovered that even on the views that were using the same field, the field id was different, so I use this modified code to display the label markers with the formatting I want:

<?php
function phptemplate_gmap_views_marker_label($view, $fields, $entry) {
  $marker_label = '';
   
  //Add each view field to the array $marker_label_field with the array key being the field name
  foreach ($view->field as $field) {
    $marker_label_field[$field['field']] = views_theme_field('views_handle_field', $field['queryname'], $fields, $field, $entry, $view);
  }
   
  $marker_label .= '<div class="gmap-popup">'. $marker_label_field['title'];

  // Display website in brackets only if the website address exist
  if($marker_label_field['field_website_url']) {
    $marker_label .= ' ('.$marker_label_field['field_website_url'] .')';
  }

  $marker_label .= '<br/>'. $marker_label_field['street'] .'<br/>';
  $marker_label .= $marker_label_field['city'] .', '. $marker_label_field['province_code'] .' '. $marker_label_field['postal_code'] .'<br/>';
  $marker_label .= $marker_label_field['country'] .'<br/>';
  $marker_label .= $marker_label_field['field_phone_value'] .'<br/></div>';
   
  return $marker_label;
}
?>

As you see, I'm using fields like title (standard), some location related fields (street, city, etc.) and website address. To find out what are the name of your fields, use

print_r($marker_label_field);

to print your array.

The same array with neat formatting:

print '<pre>';
print_r($marker_label_field);
print '</pre>';