Adding a Google map to Drupal's contact form

Submitted by litrik on

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.

  1. Download and install the GMap module.
  2. Go to your modules page and enable the "Contact" and "GMap" modules.
  3. Request a Google Maps API key, enter it on your GMap page and click on the "Save configuration" button.
  4. 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.
  5. Use the online GMap macro builder to design your map and copy the generated macro text to the clipboard.
  6. Go to your contact form settings page, paste the macro into the "Additional information" field and click on the "Save configuration" button.
  7. 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;
}
  8. 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.

Topic: 

29 Comments

Are both step 4 (making full

Submitted by Benjamin Melançon on

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).

You are right. By adding

Submitted by litrik on

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.

Hmm.. you mention it's

Submitted by Kris Buytaert on

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.

No idea. There has been no

Submitted by litrik on

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.

I have tested this function

Submitted by Pere Roca on

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

I suggest you also install

Submitted by 3freester on

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

Hello, I have been trying to

Submitted by dresde on

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

So digging through the pile

Submitted by Angus on

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']);
}

I also just get the macro

Submitted by Mark on

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/

M

I am still struggling with

Submitted by Mark on

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

1. Open maps.google.com 2.

Submitted by Sohail on

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

Hi, I did the following: -

Submitted by benpeti on

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

hook_form_alter() is a good

Submitted by jonathan mitchell on

hook_form_alter() is a good place to intercede on the form.


/**
* Implementation of hook_form_alter().
*/

//change modulename to the name of your module
function hook_form_alter(&$form, $form_state, $form_id) {
switch ($form_id) {

//change this to form_id of the form you want to alter
case 'contact_mail_page':

// the contact mail page is filtered so any additional HTML markup on it gets removed.
// regenerate the contact information using filter 2 - Full HTML
$form['contact_information']['#value']=check_markup(variable_get('contact_form_information', t('You can leave a message using the contact form below.')), 2, FALSE);

break;

//want to do more? No Problem.
//change this to form_id of a different form you want to alter
case 'user_profile_form':

// add to, edit, or unset portions of the $form array here

break;
}
}