Adding a Google map to Drupal's contact form

Posted on January 28th, 2008 at 20:15

Out of the box, Drupal's contact module provides a site-wide contact form. The default form allows some basic customization but if you want to include more advanced HTML (for example a Google map to indicate a location) you'll have to do a little bit more.

Download and install the GMap module.
Go to your modules page and enable the "Contact" and "GMap" modules.
Request a Google Maps API key, enter it on your GMap page and click on the "Save configuration" button.
Go to your input formats page and select "Full HTML" as default input format. Configure the "Full HTML" input format, select "GMap filter" and click on the "Save configuration" button.
Use the online GMap macro builder to design your map and copy the generated macro text to the clipboard.
Go to your contact form settings page, paste the macro into the "Additional information" field and click on the "Save configuration" button.

Open the "template.php" file of your theme in your favorite editor and add the following function (also explained here):

function theme_contact_mail_page($form){
  $output = check_markup(variable_get('contact_form_information',
    t('You can leave a message using the contact form below.')));  
  unset($form['contact_information']);
  $output .= drupal_render($form);
  return $output;
}

That's it! Visit your contact page to verify that the Google map is displayed correctly.

I suggest you also install the Keys module. This way you won't have to change the Google Maps API key each time you switch between your test and production environment.

On January 29th, 2008 Benjamin Melançon (not verified) said:

Are both step 4 (making full HTML the default) and step 7 (making the text above the contact form unfiltered) necessary?

Seems to me the first line to call output should have the bold text added:

$output = check_markup(variable_get('contact_form_information', t('You can leave a message using the contact form below.')), 3, FALSE);

FALSE means don't access check this on the user's privileges to input formats, which you don't want to do for showing content. (See http://api.drupal.org/api/function/check_markup/5).

'3' is the code for Full HTML, I don't know if there's a better way to find this than looking it up in the filter_formats table directly.

This way, the setting Full HTML to default can be skipped, or you could even assign the GMAP module to a different filter, and use that (figuring out the input format code by the number in its edit path).

On January 29th, 2008 litrik said:

You are right. By adding extra parameters to the check_markup() call, there is no need to make the Full HTML input format the default. It's is a bit unfortunate though that you'll need an additional database lookup to retrieve the number of the input format.

In fact, adding a completely new input format - containing just the GMap filter - seems like the cleanest way to implement all this. This way you do not pollute the Full HTML input format with the GMap filter.

Excellent suggestion. Thanks for the feedback.

On January 31st, 2008 JustMagicMaria (not verified) said:

I'm curious why you haven't put this on your contact form for this site? (Your link in step 8 goes to localhost.)

Maria

On January 31st, 2008 litrik said:

There is no map on my contact form because I work from home (most of the time) and I do not expect (nor want) people to visit me here.
Check out the contact page of one of my customers to see it all in action.

On March 14th, 2008 Anonymous (not verified) said:

Is this possible on Drupal 6 any other way without using GMap? GMap seems not to be available for Drupal 6 as of yet.

On March 14th, 2008 litrik said:

No idea. Worst case scenario is to look at the generated HTML and embed that directly in your pages.

On March 24th, 2008 Kris Buytaert (not verified) said:

Hmm.. you mention it's interesting to also install the Keys module.

I tried but It comes complaining to me that
No modules that use this feature have been installed.

For the rest I followed your guidance. So I`m wondering what I`m missing here.

On March 24th, 2008 litrik said:

No idea.

There has been no activity in CVS (besides some extra help messages) so you are probably using the same version as I am.

I can't recall the order in which I installed both modules but maybe it matters.

On August 13th, 2008 Anonymous (not verified) said:

Just what I'm looking for - thanks!

On August 18th, 2008 christefano (not verified) said:

My approach has been to place a custom block in the my theme's content_top region and put whatever I want (HTML, PHP, etc.) in that.

Here's an example: http://exaltations.net/contact

Another nice thing about about doing it this way is that the block is reusable depending on which paths I configure the block to appear at.

On November 11th, 2008 Pere Roca (not verified) said:

I have tested this function in drupal 6 and it does not work. I'm using marinelli theme and gmap-6.x-1.0-rc2 module.
Is there any chance that function could be working by drupal 6 enviroments?

Thank you

On January 26th, 2009 Anonymous (not verified) said:

Is this possible on Drupal 6 any other way without using GMap? GMap seems not to be available for Drupal 6 as of yet.

On February 15th, 2009 3freester (not verified) said:

I suggest you also install the Keys module. This way you won't have to change the Google Maps API key each time you switch between your test and production environment.

3freester

On March 13th, 2009 dresde (not verified) said:

Hello,

I have been trying to use this in Drupal6, but it seems not to work properly. I have the map working on normal content pages, so it is not a problem with the Macro but a problem with how to implement it on the contact page. There I just get the Macro code itself.

I haven't installed the Keys Module, but I don't think that would make any change... would it?

Thank you

On April 16th, 2009 fred (not verified) said:

I'm having the same problem than Dresde. I followed all your steps and it seems to work fine on any page but the Drupal contact form. :(
Do you have anyidea why this would happen?
Thanks,
Fred

On April 18th, 2009 Webmaster Mexico (not verified) said:

I'm having the same problem than Dresde and fred.
someone knows the solution?

On April 18th, 2009 Webmaster Mexico (not verified) said:

I have a simple solution for this problem. I make a block with the gmap. Then a put in content but I put show only for contact form. That's it.

On April 24th, 2009 Angus (not verified) said:

So digging through the pile tryhing to get all this to work for Drupal 6...

It turns out that there is an admin filter that is actually used filter_xss_admin if anyone cares.

But I found that editing a preprocess function was the way to get at this. Instead of using the admin filter I replaced it with the more robust check_markup but went to full html. Note that in D6 Full HTML is actually 2.

I dropped this function into template.php. There is actually a fair bit more that I did with the preprocess to change the size of the fields and other things. Powerful function worth exploring.

function theme_preprocess_contact_mail_page(&$vars){ $vars['form']['contact_information']['#value']=check_markup(variable_get('contact_form_information', t('You can leave a message using the contact form below.')), 2, FALSE); $vars['intro_message']=drupal_render($vars['form']['contact_information']); }

On June 12th, 2009 Anonymous (not verified) said:

Excellent. Thanks for this useful explanation. Does exactly what I want.

On June 17th, 2009 Mark (not verified) said:

I also just get the macro code itself. However I get the macro code on any page I try to place it on. I have followed the instructions carefully, and gmap is avialable for Drupal 6 now - is there something else I'm missing.

The php is in the correct theme template, I have a key - any ideas/

On June 17th, 2009 Mark (not verified) said:

However, on the input filter screen, I don't get "GMap filter" but instead "GMap macro expander"

I assume this is because it's newer?

On July 17th, 2009 rajoo (not verified) said:

Excellent one, fortunately or unfortunately I use WebForm Module instead of contact. How can we implement this using WebForms?

Regards

On July 27th, 2009 Mark (not verified) said:

I am still struggling with this, if anyone can offer any assistance on a Drupal6 contact form? I have noticed the map appears correctly on the Admin settings view of the contact page, where you can edit the "additional information" - could there by a user permissions thing for Anonymous users I need to set to allow them to see the map?

Thanks
M

On October 30th, 2009 Sohail (not verified) said:

1. Open maps.google.com
2. Search you area and the there is a link on the top right having label Link. Click and see the url and the code with
which you can embed map in your site.
3. Thanks in advance

On March 2nd, 2010 benpeti (not verified) said:

Hi,

I did the following:
- copied the code from google maps
- edited the contact form in HTML view and added a new div with id=gmapdiv into the position I would like to see the map:
- created a new block with this code:

var gmap=' iframe tag copied earlier';
$(document).ready(function() {
$('#gmapdiv').html(gmap);
});

- set the block to be displayed in the content bottom area and only visible on pages 'contact'

This way, the map is inserted exactly into the position where I desired.

Yours sincerely,
Peter