As of 28th November 2014, the video subscription has been shutdown. All videos are available for FREE to watch.

Using Address Field Static Map Module In Drupal 7

I have written about how to handle addresses in Drupal before using a combination of modules such as Address Field, Geofield, Geocoder and GeoPHP. Installing and configuring all of these modules is time-consuming, and only worth while if you're building a complex system. On "most" websites, users just want the ability to enter in an address, and then have that address appear as a marker on a map.

If the address/location functionality for your website is not complex, then you should look at the Address Field Static Map module. The module is basically an extra formatter - and more - for the Address Field module. You need to use both modules together; Address Field for storing the address and Address Field Static Map for displaying the address as a map.

In this tutorial, we'll setup both modules and see how they work.

Getting Started

Go ahead and install the Address Field and Address Field Static Map.

Fig 1.0

Create An Address Field

The first bit of work we need to do is create an address field. We'll add this field to the Article content type.

Steps

1. Go to Structure -> Content types (admin/structure/types) and click on the "manage fields" link for the Article content type.

2. Create an address field using the values defined in Table 1.0.

Table 1-0. Create address field

Option Value
Label Address
Machine name field_address
Field type Postal address
Widget Dynamic address form

We'll leave all the default settings for the address field intact.

Configure Map Formatter

We just created a field to store an address. Now, we need to configure the formatter for the address field.

Steps

1. Go to Structure -> Content types (admin/structure/types) and this time click on the "manage display link for the Article content type.

2. Select the "Address Field Static Map" option from the Address format drop-down list and then click on the Save button.

Fig 1.1

3. Click the cog wheel icon to configure the map. Using the formatter settings you can configure the zoom level, map size and type.

The "Advanced Settings Block" drop-down list allows you to configure a few advanced options we'll look into these options shortly. For now just configure the level, size or type.

Click on the Update button, then the Save button.

4. Go ahead and create a piece of test content to make sure everything is working. If everything has been setup properly, you should see a static map appear.

Fig 1.2

Map Within A Block

You also have the ability to display a map in a block instead of within the content area. This just gives you extra flexibility on how a map will be displayed.

First, we'll need to configure the map settings for the block.

Steps

1. Go to Configuration -> "Address Field Static Map Block" (admin/config/system/addressfield_staticmap).

2. Select field_address from the "Address Field" option.

Fig 1.3

3. Within the "Addressfield block 1" field-set just change the "Image Size" to "100x100".

Fig 1.4

4. If you like, also change the map type and zoom level. Once you are done, scroll to the bottom and click on "Save configuration".

5. Now we'll need to place the block within a region. Go to Structure -> Blocks (admin/structure/block). Add the "Address Field Static Map" block to the "Sidebar second" region and then click on the "Save blocks" button.

Fig 1.5

6. Go to a test page, and you should see a block on the right-hand side.

Fig 1.6

If you have any questions, please leave a comment.

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 6 years and has successfully completed several large Drupal projects in Australia.

Connect: Twitter drupal.org LinkedIn App.net

Comments

Submitted by Tommy Styrbæk on

Hey this is a nice module. It could save me a lot of time in my next project.
Thanks for sharing

Submitted by Dori Kelner on

This works very well to display the map, but I'd like to also display the address text. I am trying to avoid using blocks so that my client can easily add an event and have it show both the text and the map. Any thoughts as to how to make this work without views?

Add new comment