Drupal Tutorials and Blog Posts

Add Google Maps to Drupal Content

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

Comments

 
BIREN
#1 BIREN 2013-04-29 13:39

Please step by drupal 7.22 in map
 

Add comment


Security code
Refresh

blog-ad

Start Online Training

Members get access to all our video training. That's 1,244 training sessions in Joomla, Drupal, WordPress and Coding.

Latest Comments

The License for Our Tutorials

All of our tutorials are published under the Creative Commons Attribution-NonCommercial license. This means:

  • You can re-use these tutorials.
  • You can modify these tutorials.
  • You must link back to our original tutorial.
  • You can't use these tutorials commercially.

Click here to read the full license.

Copyright 2013 Open Source Training, LLC. All rights reserved.