Add Google Maps to Drupal Content

google map

Our 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

Author

  • Steve Burge

    Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.

    View all posts
0 0 votes
Article Rating
Subscribe
Notify of
guest

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
BIREN
BIREN
11 years ago

Please step by drupal 7.22 in map

1
0
Would love your thoughts, please comment.x
()
x