Skip to main content

Embedding Google Maps

Google Maps PinRecently a client inquired about incorporating a map within their event calendar. For relevant events they already provide the address in a field, so how can we provide the visitors with a navigable map? The robust solution involves combination of Location and GMap modules.

But this simple application does not pull complex database location queries, nor is it combining multiple locations onto the map. Effectively, it's a matter of stringing the address field into a Google Maps URL and embedding the iframe.

The simple solution assumes you have CCK module installed, which you'd also need for the robust solution.

  • Install and enable the Dynamic Field module
  • Edit content type fields at admin/content/node-type/yourcontentype/fields and add a new field with type Dynamic Field
  • In the "PHP code" configuration field add
 = ->field_address[0]['value'];
if (!empty()) {
     return "<iframe width=\"425\" height=\"350\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\" src=\"http://maps.google.com/maps?f=q&amp;source=s_q&amp;geocode=&amp;q=".."&amp;ie=UTF8&amp;z=16&amp;output=embed\"></iframe>";
}

The first line grabs the address field from the current node. In this example, the full address is in one field named field_address, but you could easily string together multiple values such as street, city, and zip.

Next, it makes sure there are some values in this field. This allows the same content type to be entered without an address for virtual events and does not display the Google Map.

The next line returns escaped HTML iframe code. This includes configuration parameters used by Google and too numerous to list here. Mapki is one of many references. You can change the zoom level, get rid of the bubble, and with a bit more code even provide driving directions based on the address in the user's profile. It can also easily be changed to Yahoo maps or another provider.

For a working example visit Dallas AfterSchool Network's calendar and browse through the events.

Share this post