| Drupal

google mapOur Drupal students frequently want to add a map to their content. In this tutorial we're going to show you how.

We'll take the example of a Yellow Pages-style directory and show you how to display a Google Map beside each business listing.

Install

Install and enable these two modules:

If you don't have it, you will also need CTools:

Create a Content Type Using Address FIeld

The first step is create content using the Address Field module.

  • Go to Structure > Content types.
  • Create a new content type called Companies
  • Add a field using the Postal Address field.
tutuploadsmedia_1349207999285.png

Add Content

Click Add content and add a company to your site. We used Phase2 as an example, because they actually built these address modules:

tutuploadsmedia_1349208196356.png

Configure the Address FIeld Static Map Block

  • Go to Configuration > Address Field Static Map Block
  • Configure the Address Field option to use the field that you just created.
tutuploadsmedia_1349208476556.png
  • Configure the Image Size option to fit the area of the site that you'll place this map into.
tutuploadsmedia_1349208528039.png

Place the Block

  • Go to Structure > Blocks.
  • Publish the Address Field Static Map block.

No matter which pages you try to place this block on to, it will only appear under two conditions:

  • If the full content for a node is showing.
  • If the full content contains a field_address entry.

Here's how Phase 2 appears:

tutuploadsmedia_1349208620830.png