A simple embedded Google map with address fetching in Drupal

As a newbie to Drupal, implementing a simple embedded Google map is more than confusing. More than a dozen modules claim to offer mapping functionality, but I just couldn’t get any of them to do what I needed. So I just did it myself.

What do I seek to accomplish?

I want to set up a directory with adresses and when viewing those nodes, I’d like to have a small embedded map that pinpoints the address. Very basic, really.

Why didn’t I just use a module?

I tried to get the job done with a couple of modules (Location, GMap and the like) but either no map showed up, if it did, it failed to fetch the address data and I generally became frustrated with the complexity of these modules that unfortunately coincides with a lack of documentation.

One module that was easy to use and worked just out of the box was embed google maps field, which lets you create a CCK field that turns into an embedded map. The only drawback is that it does not fetch address data from other fields but the user has to enter the address again into the embedded map field, which does not seem very user friendly when the user just entered the same data into special “street”, “town” and “zip code” fields a few lines above.

Hijacking this module’s iframe tag from the HTML code, I set out myself to feed the iframe dynamically with the address data.

What did I start from?

I’m in a Drupal 6.13 environment (I suppose any 6.x will do) and my little solution utilises the following modules:

Dynamic Field lets you create CCK fields that can be filled with PHP code and thus dynamically fills the field in view mode with computed data.

I also already have a custom content type with the CCK fields “street” and “town”.

What did I do?

1) Add a CCK field to your content type under admin/content/node-type/yourcontentype/fields

2) Choose “Dynamic Field” from the field type droplist

3) In the text field titled “PHP-Code”, add this code:

$street = $node->field_street[0]['value']; $town = $node->field_town[0]['value']; return "";

The first two lines just fetch the values of the current node’s town and street fields into more handy variables. The rest returns the Google maps iframe I hijacked from the Emded Google Maps Field module and inserts street and town in the right places.

In my experience, street and town are sufficient for Google to pinpoint the right spot on the map, but following the pattern above, you could of course also add more fields, like country or zip code.

Also, feel free to tinker with the settings in the iframe tag, that’s just plain HTML and can probably also be extended with further settings.

4) Create a test node for your content type, fill the address fields with an existing address and see if it all works.

As a plus, it doesn’t even clutter the edit view with ugly code, because the dynamic field does not show up here.

Update: Changing the zoom level

To change the zoom level of the embedded map is not straightforward, so I add this hint.
In the iframe tag, just change the z-value, right here: …&ie=UTF8&z=16&output=embed…
The lower the value, the farther out you zoom.

Update: Turn the info balloon on/off

Lazyburners figured this out by himself in the comments, but I was also looking for this functionality and I guess some others might be, too. Just add &iwloc=near to your iframe src and the balloon should vanish.

Leave me a comment if it worked for you!

Deprecated: ltrim(): Passing null to parameter #1 ($string) of type string is deprecated in /var/www/clients/client4141/web11203/web/wp-includes/wp-db.php on line 3030

Deprecated: ltrim(): Passing null to parameter #1 ($string) of type string is deprecated in /var/www/clients/client4141/web11203/web/wp-includes/wp-db.php on line 3030

Deprecated: ltrim(): Passing null to parameter #1 ($string) of type string is deprecated in /var/www/clients/client4141/web11203/web/wp-includes/wp-db.php on line 3030

Deprecated: Creation of dynamic property WP_Query::$comments_by_type is deprecated in /var/www/clients/client4141/web11203/web/wp-includes/comment-template.php on line 1528

12 thoughts on “A simple embedded Google map with address fetching in Drupal”

Jonah Brown

23 August 2009 at 10:25

I keep getting: Parse error: syntax error, unexpected T_STRING in /var/www/vifun/public_html/modules/dynamicfield/phptext.module(46) : eval()’d code on line 4
basanta

23 August 2009 at 10:56

I forgot the code tag around my snippet, so your problem is possibly linked to overly stylish ‘ and ” that PHP can’t read.
Fixed that though, try copy-pasting the code snippet now.
Lazyburners

31 August 2009 at 15:52

Is there any variable so that google’s white rounded box with the address details do not appear. I have to click the X on the upper right hand corner for it to disappear.

If I use the map dimensions that you use width=”425″ height=”350″ sometimes the X of the white rounded box is out of the picture.
Lazyburners

31 August 2009 at 17:05

Actually, I figured out how to configure the URL so that the Info bubble does not appear on the embedded map.

You might want to add this to the tutorial

&iwloc=near
- basanta
  
  31 August 2009 at 20:09
  
  Hey Lazyburners, thanks a bunch for that input as I have been looking for this myself. Small maps are almost completely covered by that balloon, which ultimately defies the sense of having an embedded map.
Zlinman

1 September 2009 at 12:45

Thank You for the great tutorial!
Can you advise how can I show the map in the block (side) bar so that the content match displayed node?

Eg. “City A” is defined in node “story-A” and “City B” in “story-B”. I would like to show “City A” in the Block, when reading “story-A” and equally for “City B”. When city is not defined, block should be stay hidden.
ed

13 December 2010 at 19:31

you said The rest returns the Google maps iframe I hijacked from the Emded Google Maps Field module and inserts street and town in the right places, where did you do that?? please i need this for my website but i didnt understand how and where you altered the module!! can u plz help?? tx
- STaRMaN
  
  29 June 2011 at 17:02
  
  @ed, i would like to see that hack… i’m trying to implement this too.
  Please help.
- James
  
  15 September 2011 at 12:15
  
  @ed, it’s true that it is not clear at all, this important part has been completely ignored by the author of the article.
  I think the authors need to add a small paragraph to explain that part if he wants the article to be really useful for most Drupal users.
  - basanta
    
    23 October 2011 at 15:58
    
    Sorry if that part is unclear. You do not actually need the Embed Google Maps Field module. Just follow the instructions in the post.
    However, it’s been a while since I worked on that solution and Drupal may not support it anymore.
DC

6 May 2012 at 14:41

Hi Basanta,

Sorry, but I have to agree with some of the others who left comments saying that the instructions aren’t clear at all.

The instructions *should* still work on Drupal 6, however, the part that most people (based on the comments above) are having problems with is how you implemented the URL to display the Google Map using the PHP in the Dynamic Field.

Cheers,
Darren
DC

7 May 2012 at 06:35

Further to my other comment, I was able to get CCK and Embedded Google Maps to work by using the Computed Fields module (which is similar to Dynamic Field).

In my scenario, I had three CCK fields as follows:

field_address
field_city_town
field_state

I also had the Embedded Google Map field as follows:

field_gmap

I also added the Computed Field (which is hidden to users).

In the Configure options of the Computed Field, I added the following code to the Computed Code section:

$node->field_gmap[0]['value'] = $node->field_address[0]['value'] . ', ' . $node->field_city_town[0]['value'] . ', ' . $node->field_state[0]['value'];

I unchecked “Store using the database settings below (required for Views use)” as well as “Sortable in Views” and saved the settings.

After adding the appropriate information on the Content page, I now have an Embedded Google Map showing.

I spent quite a bit of time trying to get Dynamic Field working, but only a couple of minutes getting Computed Field to work.

Hope this helps someone else.

Deprecated: strpos(): Passing null to parameter #1 ($haystack) of type string is deprecated in /var/www/clients/client4141/web11203/web/wp-includes/comment-template.php on line 2512