Home

Drupal 5 Custom GMap Node

I really enjoy Google Maps. And though they keep a little for themselves, the Google Maps API offers a really easy way to embed these maps into your own personal site. Fortunately for us Drupal users, the swell folks at the Chicago Technology Cooperative and the other wonderful open-source developers have put together an amazing module called GMap that integrates well with Location, Views, and even CCK (sort of).

I have recently set up this site to use the GMAP module. And since this module is still not had a stable release yet, I figured I would explain what I have done with this site to get some custom maps on each node. I will go through setting up CCK fields, custom theming, and some extras.

Table of Contents [hide]

In Action

First, have a gander at what this will look like once we are done.

Goals

Given that I already have a bunch of nodes to create a Map View with, I want to also display a map on each of the nodes for that location or place. I also want the node maps to be customize for each node.

The main reason I would like this functionality is because I think in the context of a node that is a location, it should have a map with the node itself. Also, I think its a really nice feature to have control how that map looks. There are certain locations that I would like to be zoomed in real close, or that I want a map view, or a satellite view. This will give us that control.

Assumptions

The following is a list of assumptions in this process. If the following are not true, then this tutorial may not work for you.

GMap Bugs

There a couple things to note about this version of the GMap Module:

  • You will need to hack the GMap Module so that it uses the most recent stable version of the Google Maps API. See http://drupal.org/node/231473.
  • There are some inconsistencies between the API.txt file and the actual way to use the GMap API. See http://drupal.org/node/236352 for more information. For our purposes, the following needs to be noted for the associateive array that will be used to create each map:
    • Use controltype instead of control.
    • Use maptype instead of type.

Map Content Type

The first thing we need to do is set up a custom Content Type. This is where CCK and Location are going to come in.

Locative Information

First ensure, that Locative Information is added. When creating the Content Type, it will be at the top of the form. It's kind of hard to notice. Make sure that Maximum number of locations allowed for this type. is at least 1 and Default number of location forms is also at least 1. Plaese note that this tutorial is assuming one location per node. This could easily be changed so that it handled more that one location. Enabling this Location information, will ensure that Latitude and Longitude are collected. Again this could be changed to CCK fields instead.

Screen: Locative Information on Content Type Creation: Screenshot to point out where the Locative Information section is when creating a new Content Type.
Screen: Locative Information on Content Type Creation: Screenshot to point out where the Locative Information section is when creating a new Content Type.

CCK Map Parameters

Now you will want to create a set of fields to represent your map parameters. You can add or remove the ones you want. You will want to look at the GMap Macro Creator page that comes with GMap. Here is a brief description of my fields:

CCK Map Macro Parameters
Name Machine Name Type Widget Type
Map Width field_cck_txt_map_width Text Text Field
Map Height field_cck_txt_map_height Text Text Field
Marker field_cck_select_marker Text Select List
Magnification field_cck_select_magnification Text Select List
Control Type field_cck_select_map_control Text Select List
Map Type field_cck_select_map_type Text Select List

Screen: Macro Parameters as GMap Node Fields: Screenshot of the CCK fields that are used to create a custom GMap per node.
Screen: Macro Parameters as GMap Node Fields: Screenshot of the CCK fields that are used to create a custom GMap per node.

The Select Lists should be filled appropriately from the GMap Macro Creator page. Hint: changes some values and note the macro at the bottom. Please note that these values are Case Sensitive.

Theming

Now that we have our content type set up, now we just have to determine how it is going to render all this information. Feel free to make a couple nodes with this new content type, as it will help you see what is happening.

Display Function

We will create a function in our template.php file, in our theme directory, so that calling the map in the theme will be simple.

  1. #function to make Gmap macro data into a map
  2. function your_theme_node_map_maker($id, $mark, $lat, $long, $zoom, $width, $height, $control, $map_type) {
  3.     #intialize output
  4.     $output = '';
  5.  
  6.     #put together array
  7.     $arr_map = array(
  8.         'id' => $id
  9.         ,'zoom' => $zoom
  10.         ,'width' => $width
  11.         ,'height' => $height
  12.         ,'latitude' => $lat
  13.         ,'longitude'=> $long
  14.         ,'maptype' => $map_type
  15.         ,'controltype' => $control
  16.         ,'markers' => array(
  18.                 'markername' => $mark
  19.                 ,'latitude' => $lat
  20.                 ,'longitude' => $long
  21.             )
  22.         )
  23.     );
  24.  
  25.     #display map through GMap theme function
  26.     $output = theme('gmap', array('#settings' => $arr_map));
  27.  
  28.     #return output
  29.     return $output;
  30. } #end function

This should be pretty straightforward. It would not be too difficult to actually put this in the theme itself, but this way we could do some processing if necessary.

Calling the Function in the Theme

There is a couple ways to do this depending on how you like to make or edit themes. You can use the Content Template Module. But I like to stick with the traditional file method.

Here is my sample node-ct-map.tpl.php file:

  1. <?php if ($page == 0) { ?><h2 class="title"><a href="<?php print $node_url?>"><?php print $title?></a></h2><?php }; ?>
  2.  
  3. <div class="entry<?php if ($sticky) { print " sticky"; } ?>">
  4.     <?php if ($picture) { print $picture; }?>
  5.  
  6.     <div class="ct-map-content"><?php print $node->content['body']['#value'] ?></div>
  7.  
  8.     <fieldset class="fieldgroup group-visits">
  9.         <legend>Visits</legend>
  10.         <?php print alanpalazzolo_custom_visits($node->field_cck_date_location_start, $node->field_cck_txt_visited_descripti) ?>
  11.     </fieldset>
  12.  
  13.     <?php if ($node->content['field_cck_img_map_images']['#value']) { ?>
  14.     <fieldset class="fieldgroup group-map-pictures">
  15.         <legend>Pictures</legend>
  16.         <?php print $node->content['field_cck_img_map_images']['#value'] ?>
  17.     </fieldset>
  18.     <?php } ?>
  19.  
  20.     <?php 
  21.         # Call Map Function
  22.         # I have separated the parameters so that it easier to see
  23.         print alanpalazzolo_custom_node_map_maker(
  24.             $node->nid, $node->field_cck_select_marker[0]['view']
  25.             ,$node->locations[0]['latitude']
  26.             ,$node->locations[0]['longitude']
  27.             ,$node->field_cck_select_magnification[0]['view']
  28.             ,$node->field_cck_txt_map_width[0]['view']
  29.             ,$node->field_cck_txt_map_height[0]['view']
  30.             ,$node->field_cck_select_map_control[0]['view']
  31.             ,$node->field_cck_select_map_type[0]['view']
  32.         ) ?>
  33.  
  34.     <?php print alanpalazzolo_custom_location($node->location) ?>
  35.  
  36. </div>
  37.  
  38. <div class="meta">
  39.     <p class="byline"><?php print $submitted?></p>
  40.     <?php if ($terms) { ?><p><span class="taxonomy"><?php print $terms?></span></p><?php }; ?>
  41.     <?php if ($links) { ?><p class="links"><?php print $links?></p><?php }; ?>
  42. </div>

Check Our Work

Now, when going to the nodes that we have created, there should be a map with the parameteres we have set on them. For instance:

Views

This should be a fairly easy process. Create a new view.

  • Page Section

    • click Provide Page View
    • choose a URL
    • this is where the magic happens; under View Type choose GMap View
  • Fields Section
    • Location: Latitude
    • Location: Longitude (This is where the CCK fields could be substituted.)
    • I would also suggest choosing the Node: Title field so that there is link in each info bubble
  • Filter Section
    • Node: Published is Yes
    • Node: Type is One Of Map Type (This is the type that we defined above)

Questions

Please feel free to add a comment or contact me about this post. This is just a brief look into what can be done with these powerful technologies.

Submitted by alan on Tue, 2008/03/25 - 10:41pm.

Add new comment  

API-key

Submitted by Beres Mate (not verified) on Mon, 2008/06/09 - 7:43am.

Helo Alan!

Thanks a lot for sharing this! But i'm still having problems to get it work. I made a new content type containing the map parameteres for each, built the function into the template.php file, and made the custom node template too. The problem is, that the map won't show up, when viewing the nodes. I didn't requested the API-key yet, could this be the problem? I'm developing the site at my local machine, so i don't know, how could i request an API-key for that kind of usage. Or my code could be wrong.. Could you check out the pictures below?

http://www.flickr.com/photos/zsopeg/2564623246/
http://www.flickr.com/photos/zsopeg/2564623334/

Thanks a lot once again!

API-key

Submitted by Beres Mate (not verified) on Mon, 2008/06/09 - 7:50am.

I've got an API-key now working, so probably my code isn't proper.

solved

Submitted by Beres Mate (not verified) on Mon, 2008/06/09 - 8:33am.

The problem was the case sensitivity, and i didn't gave the dimensions the "px" unit. Sorry for asking such a dumb question! And thanks again for this great article!

Could you please describe

Submitted by Treadings (not verified) on Sun, 2008/06/29 - 10:39am.

Could you please describe how to populate the select lists for cck field using the gmap macro info?

thanks

Submitted by widgets (not verified) on Mon, 2008/08/04 - 7:58am.

Thanks a lot for sharing this
API-key now working, so probably my code isn't proper.

I agree this works great for

Submitted by online degree (not verified) on Fri, 2008/08/15 - 7:54pm.

I agree this works great for me. I use goolge maps a lot.
thanks so much for sharing.

Drupal

Submitted by Jason (not verified) on Tue, 2008/08/19 - 6:50pm.

I've heard Drupal 6 is really good, but I haven't tested it yet. I wonder if your G-Map Node will be easy to port over.

Drupal

Submitted by GetYourLogos (not verified) on Sat, 2008/08/23 - 6:56am.

The article well explains the drupal.

without location

Submitted by bara.munchies on Wed, 2008/09/10 - 9:56pm.

hey, i tried to set up the same thing, but i don't want to use the adressfield part.
Instead i want to use a map to choose locatrion when creating a node.
so i set up everything and it safes the location, but i can not get all nodes displayed in one map overview.
any ideas?

Thanks for all this. Must

Submitted by Guinness Gifts (not verified) on Fri, 2008/09/12 - 6:53am.

Thanks for all this. Must have taken ages to post all this stuff

Very useful info

Submitted by Chris@Windows Hosting (not verified) on Fri, 2008/09/12 - 12:53pm.

Thanks for taking the time to write it up. I've had problems with that before. I'll give it a whirl and let you know how I go.

hello

Submitted by najibx on Sat, 2008/09/13 - 7:47am.

can you use views to filter/show only nodes related to specified taxonomy? using argument, indirectly hide others.
Example of usage like only show shops in the state. Since the state maybe next to each other, we might want to hide other shop at the adjecent state.

thanks

gmaps

Submitted by International Investing (not verified) on Wed, 2008/09/24 - 11:41pm.

Yeah, it's pretty cool what you can do with the google maps api. I like the direction you are taking with this and I hope you can release a stable version.

thank you! but need some help..

Submitted by theactiveme.com on Thu, 2008/10/02 - 9:08am.

Thanks for this great post! I've been looking everywhere for a guide on how to get the API working on drupal. I followed these instructions for my drupal 6 install, and got it to a point where a map is showing on my individual node. However, I soon noticed that it is just a default map (showing default center as I had set in gmap config) and that all nodes just show the same map, with no marker. Any idea what I goofed?

thanks!

Thanks so much for sharing,

Submitted by Chris Hutcherson (not verified) on Tue, 2008/10/07 - 9:57am.

Thanks so much for sharing, I love google maps also. This will be very helpful. Thanks again.

Google Maps

Submitted by checks online on Wed, 2008/10/08 - 6:19am.

I began life as a topographic surveyor and it is amazing how things have changed in the last 30 years. The ability to dump a digitally based map into another document would have been beyond my wildest dreams. Great fun!

interesting article, great

Submitted by spirulina (not verified) on Wed, 2008/10/08 - 4:10pm.

interesting article, great explains drupal

Great post! Thanks a lot

Submitted by mitch@ teak furniture (not verified) on Thu, 2008/10/09 - 11:01pm.

Great post! Thanks a lot for all the info you shared, a lot of people will learn from this.

Thanks

Submitted by James @ speeding up vista (not verified) on Thu, 2008/10/16 - 4:22pm.

Thanks

Very useful indead. I'll be definitley be giving the Gmaps mod a go.

Thanks for the guide.

James

API-Key

Submitted by Caterpillar (not verified) on Mon, 2008/10/20 - 9:21am.

With the api key, is there a limit in the number of searches you can make a day?

Awesomeness!

Submitted by Post to Host (not verified) on Tue, 2008/10/21 - 10:25pm.

Thanks for this, it helps a lot. I really appreciate it!

Update

Submitted by alan on Sun, 2008/10/26 - 11:00pm.

I am sorry I have not responded to any of these comments directly. I have been very busy. Just some general responses:

I do not know the limitations of the Google API Key. You should check out: http://code.google.com/apis/maps/signup.html

As the beginning of this article points out, it is for specific versions of modules. The GMap and Location modules have been very actively developed since this was put together so a lot of things could have changed. This tutorial will probably not work on Drupal 6, but the ideas are still similar.

I am currently working on two modules, one being a much more friendly solution to this tutorial and another is an image marker module. I should hopefully be able to release them this week or next.

Thanks for all the response; I am glad people are getting use out of it.

My forex journey!

Submitted by Forex Blog - Justins Forex (not verified) on Thu, 2008/11/06 - 2:22pm.

I think internet Ecology should be taught in schools ha... great post

Drupal 6

Submitted by Anonymous (not verified) on Sun, 2008/11/09 - 9:37pm.

I know there are some changes with Drupal 6, Views/CCK 2, etc, but does anyone know if the directions above will 'generally' work for D6? Any info would be greatly appreciated.

Zzolo - thanks for your work on this and other modules.

Cheers,
Kelly

I've knew Drupal 6 is really

Submitted by James Keller (not verified) on Tue, 2008/11/18 - 12:39am.

I've knew Drupal 6 is really good.I'll be trying to switch over.
Thanks a lot for sharing mate...Awesome post, Very useful.

James Keller.
Bridal Showers

I have only causally tried

Submitted by Internet Availability (not verified) on Mon, 2008/12/08 - 5:03am.

I have only causally tried out gmaps so my opinion should not count for much. but I'll agree that gmaops was a beast when i looked into it. i did some tests on this groups.drupal.org site that users and groups could be shown on maps and concluded that the modules were not ready at that time. maybe others are concluding same, based on marc's research. so, my barely informed gut says that this is a good move. I'm also eager to hear from people with more knowledge about this.

This is a really useful app!

Submitted by Shannon Brown (not verified) on Mon, 2008/12/15 - 2:38pm.

This is a really useful app! I have always been a map geek so when Google Maps hit the scene I was very happy. I have a ski site that this will be perfect for! Thanks for sharing it.

Drupal 6 is great, I new to

Submitted by Pregnancy Symptoms (not verified) on Wed, 2008/12/17 - 6:39am.

Drupal 6 is great, I new to drupal though, but I was wondering if this node would work right with it and if it would be easy to switch over.

This is a magical post

Submitted by Kopibaro-perfume and cologne (not verified) on Sun, 2008/12/21 - 8:05am.

This is a magical post because that is a cumbersome task to do. I have a few domains which are purely related to maps but I had to purchase a script to run them. This was my longest wish to implement that on wordpress or Drupal. Thanks for sharing all the tutorial.

Great

Submitted by IT Support (not verified) on Tue, 2008/12/23 - 8:55pm.

Great, thanks - very helpful.

This is a cool feature for

Submitted by migraine headaches (not verified) on Thu, 2009/01/08 - 5:59pm.

This is a cool feature for Drupal. Google maps is hot and a creative developer can think of all kinds of ways to use this.

Thanks for the drupal tips.

Submitted by Pregnancy Week by Week (not verified) on Mon, 2009/01/12 - 11:54pm.

Thanks for the drupal tips.

Drupal 6?

Submitted by Albany Clean Red Widgets (not verified) on Tue, 2009/01/13 - 7:42pm.

Does the GMap plugin work for Drupal 6?

alan thanks for the info on

Submitted by Credit Card Guy (not verified) on Tue, 2009/01/20 - 9:00pm.

alan thanks for the info on the gmap still learning here, hope all is well.

That is wonderful guide.

Submitted by noosa accommodation (not verified) on Fri, 2009/01/23 - 1:45pm.

To be very true, I wasn't able to do that even though I tried more than I could do. I am not expecting that detailed post somewhere because nobody wants to reveal all those secrets. Thanks for sharing it.

Fine on Version 6

Submitted by Shower Tray (not verified) on Sat, 2009/01/24 - 2:57am.

To the above poster, yes it works fine for me on Version 6.

Kate.

Very Helpful Tip

Submitted by Frontpage Templates (not verified) on Sat, 2009/01/24 - 10:06pm.

That is a really good tip; I never knew you add Google Maps to a personal site so easily. I've got this bookmarked and as soon as I figure out a cool use for a map on one of my sites, I'll be back. Thanks a bunch!

So nice...

Submitted by Black & White Photography (not verified) on Thu, 2009/02/05 - 2:54am.

You have really provided a better view about the Drupal 5.. The Google maps are nicer to work with in your websites.. The social Drupal php is a better option to go out for if you are thinking about deploying a new site..

Great information, thanks

Submitted by Anonymous (not verified) on Mon, 2009/02/09 - 7:25pm.

Great information, thanks for sharing.

Thank you for this article..

Submitted by tower defense (not verified) on Wed, 2009/02/11 - 3:26am.

Thank you for this article.. I’ll bookmark it so that i can read every chapter.

google

Submitted by google (not verified) on Wed, 2009/02/18 - 9:52am.

nice post and great information thank you very much.

Hey is this drupal 5 working

Submitted by optical migraine (not verified) on Sat, 2009/02/21 - 3:19am.

Hey is this drupal 5 working for nodes...how do we take the location..think this is a very helpful article...thanks and all the best for your future posts..

Google

Submitted by Google (not verified) on Sun, 2009/02/22 - 11:01am.

nice post and great information thank you very much.

Great Information

Submitted by RBR Productions (not verified) on Sun, 2009/02/22 - 4:03pm.

Thanks for sharing this useful information.

Great code work! I got this

Submitted by tea party ideas (not verified) on Thu, 2009/02/26 - 2:17pm.

Great code work! I got this working on one of my sites and it looks great.

Gmap a great utility

Submitted by Acne Solution (not verified) on Sun, 2009/03/01 - 3:13am.

Thank you ALAN for such a great post.
I have been struggling to implement maps on Drupal and have used numerous APIs before I came across Gmap..
GMAP is just amazing and after reading your post I have cleared many of my doubts and I am sure will get it implemented on my Drupal site easily now. Thanks again...

Action Movie

Submitted by Action Movie (not verified) on Tue, 2009/03/03 - 10:09am.

So cute! Keep up the good work!

Google gets better and better

Submitted by Google Magic on Wed, 2009/03/04 - 12:49pm.

I really do love how many useful programs Google has come out with. I'll have to give this Drupal version of Google maps a try. Thanks!

http://www.dp-db.com/google-magic-formula

Hopefully this works with

Submitted by Suffolk Auto (not verified) on Sat, 2009/03/07 - 6:59pm.

Hopefully this works with 6.10. Either way, thank you.

cool

Submitted by Ellie - stretch marks removal expert (not verified) on Thu, 2009/03/12 - 9:44am.

Hey this is cool, gonna give it a go, might need some help hough, will let you know! : )

12345678next ›last »