HOW TO: theme gmap popup - easy as pie...

Hello Fellow Drupalers,

Well, as of today no where online is there info on how to theme those dreaded gmap popups for drupal. Well, I am happy to share this with you. I spent hours learning to do this and only hope this will help someone NOT spend hours. My theme efforts were for map/node path/page. Not for any blocks or any other embedded gmaps, but I think my solution will still work, although I have not tested it for other scenarios.

:)

Ok, before I begin I want to explain a bit of what is happening on the map/node,
http://new.felixapartments.com/map/node

Ok, click on those little markers and watch the themed popup show up.

So now you have a visual of what I am talking about, let me explain what is happening. When gmap loads those makers, it essentially loops through each node (in this case) or user and then assigns a marker. In the background of each marker, on each loop, it actually acts as if it is loading that particular node (node or user) that the marker represents. So, for first marker, it gets the node info, then prepopulates (if i can explain it this way) the marker by running that node as if you were to open it in another window. Basically, that little popup can be thought of as the node page, just within the popup. Think about that for a second. It took me a while to understand this...

OK, if you are using CCK or are applying a gmap map to a node like story, blog etc, you might want to have a tpl file for the node. So if you created a new node type in CCK, let's call it properties, and plan to map out the nodes of that node type, then you will need to make a tpl (template) file. Go to your theme directory and copy and paste your node.tpl file, then renamed the copy one to node-properties.tpl (in this example).

From here you have a few options.
1) install the Contemplate module, then to go "create" template, select body or teaser, then copy all the possible node variables for the node type (in this case again, properties).
2) if you don't plan to use data from the node type, you can just use what you have in your tpl file and make a few changes the code to get the layout you desire.

Either way you go, you are going to need a if/else statement. Let's move into that...

in your tpl file, you wan to look to see what page you are on, to check and see if you are on the node with the gmap map embeded, if so, you are going to give it a modified theme, else you do nothing - just use the normal node.tpl (properties.tpl in this case) code that was in the file to begin with.

Why, just in case we are lost at this point, because the markers are looping through this tpl file and will use the default code in that file, unless you tell it to otherwise. If you do not make a tpl file for the node type, node.tpl will be used instead, which you could do the if/else statement there too I suppose.

Somewhere in the tpl file do a simple

if ($_GET['q'] == 'map/node'): // to be in line with the url I gave in the beginning...

If we are on http://new.felixapartments.com/map/node we want to use a different layout than what a normal property node has...

Add your layout for the gmap map popup now

else:

Use the regular tpl code here... to keep the example going here is the other layout for the property nodes: http://new.felixapartments.com/propertise/lafayette

endif;

That is it! All you have to do is add the new popup classes to your style.css sheet and you are on your way to a themed gmap popup. Below is what my properties.tpl file looks like - as a guide.

Please feel free to correct me gmap module creator if I did not explain the how the gmap markers loop etc. Please also feel free to expand on this, sharing what nodes/users popups you themed and how.

Have fun!

===============================

  <div class="content">
<?php if ($_GET['q'] == 'map/node'): ?>

 <div class="property-image-popup">
   <a target="_blank" href="/<?=$node->field_image[0]['filepath']?>">
    <img src="/files/imagecache/gmap/<?=$node->field_image[0]['filepath']?>" alt="<?=$node->field_image[0]['alt']?>" title="<?=$node->field_image[0]['title']?>" />
   </a><br />
   <center><a target="_blank" href="/<?=$node->field_image[0]['filepath']?>">Enlarge Image</a></center>
 </div>

 <div class="property-description-popup">
 <b>Address:</b> <?php print $node->locations[0]['street'] . ', ' . $node->locations[0]['city'] . ' ' . $node->locations[0]['province'] . ' ' . $node->locations[0]['postal_code']; ?>
 <br />
 <b>Print Driving Directions:</b> 
 <a target="_blank" href="http://maps.google.com/maps?f=d&hl=en&saddr=<?=$node->locations[0]['street']?>+<?=$node->locations[0]['postal_code']?>&daddr=&layer=&ie=UTF8&z=16&om=1&iwloc=addr">Google Maps</a>, 
 <a target="_blank" href="http://maps.yahoo.com/index.php#mvt=m&q1=<?=$node->locations[0]['street']?>+<?=$node->locations[0]['postal_code']?>&trf=0&mag=3">Yahoo Maps</a>, 
 <a target="_blank" href="http://www.mapquest.com/maps/map.adp?searchtype=address&country=US&addtohistory=&searchtab=home&formtype=address&popflag=0&latitude=&longitude=&name=&phone=&level=&cat=&address=<?=$node->locations[0]['street']?>&city=&state=&zipcode=<?=$node->locations[0]['postal_code']?>">Mapquest</a>
 <br /><br />
 <b>Description:</b> <?php print $node->field_description[0]['value'] ?>     
 </div>
 
<?php else: ?>
   <div class="property-image">
     <a target="_blank" href="/<?=$node->field_image[0]['filepath']?>">
      <img src="/files/imagecache/thumbnail/<?=$node->field_image[0]['filepath']?>" alt="<?=$node->field_image[0]['alt']?>" title="<?=$node->field_image[0]['title']?>" />
     </a><br />
     <center><a target="_blank" href="/<?=$node->field_image[0]['filepath']?>">Enlarge Image</a> | <a target="_blank" href="/properties">See Map</a></center>
   </div>

   <div class="property-description">
   <b>Description:</b> <?php print $node->field_description[0]['value'] ?><br /><br />
     
     <?php if ($node->field_unit1[0]['view']): ?><b>Unit 1:</b> <?=$node->field_unit1[0]['view']?><br />
      <?php if ($node->field_unit1_desc[0]['view']): ?><b>Description:</b> <?=$node->field_unit1_desc[0]['view']?><br />
      <?php endif;?>
      <br />
     <?php endif;?>
     
     
     <?php if ($node->field_unit2[0]['view']): ?><b>Unit 2:</b> <?=$node->field_unit2[0]['view']?><br />
      <?php if ($node->field_unit2_desc[0]['view']): ?><b>Description:</b> <?=$node->field_unit2_desc[0]['view']?><br />
      <?php endif;?>
      <br />
     <?php endif;?>
     
     <?php if ($node->field_unit3[0]['view']): ?><b>Unit 3:</b> <?=$node->field_unit3[0]['view']?><br />
      <?php if ($node->field_unit3_desc[0]['view']): ?><b>Description:</b> <?=$node->field_unit3_desc[0]['view']?><br />
      <?php endif;?>
      <br />
     <?php endif;?>
     
     <?php if ($node->field_unit4[0]['view']): ?><b>Unit 4:</b> <?=$node->field_unit4[0]['view']?><br />
      <?php if ($node->field_unit4_desc[0]['view']): ?><b>Description:</b> <?=$node->field_unit4_desc[0]['view']?><br />
      <?php endif;?>
      <br />
     <?php endif;?>

     <?php if ($node->field_unit5[0]['view']): ?><b>Unit 5:</b> <?=$node->field_unit5[0]['view']?><br />
      <?php if ($node->field_unit5_desc[0]['view']): ?><b>Description:</b> <?=$node->field_unit5_desc[0]['view']?><br />
      <?php endif;?>
      <br />
     <?php endif;?>
     
     <?php if ($node->field_unit6[0]['view']): ?><b>Unit 6:</b> <?=$node->field_unit6[0]['view']?><br />
      <?php if ($node->field_unit6_desc[0]['view']): ?><b>Description:</b> <?=$node->field_unit6_desc[0]['view']?><br />
      <?php endif;?>
     <?php endif;?>
     
   </div>

<?php endif; ?>
   <div class="clearboth"><hr /></div>
  </div>