Display a GMap of a Referenced Location

Jocelyn's picture

If you have many events that are at the same location, instead of adding the location information to each event, you can setup one location that is referenced by each of your events.

When you display a node reference, you have the options to display as a title, teaser or body. In order to generate a Google Map, you have to create a View that will load the reference to your Location and display those fields as a GMap

In the example below I'll setup an Event & Location content type for the next Toronto Drupal Meetup and use Views to build the GMap.

June Drupal Meetup
June 28, 2010 (6:30pm - 8:30pm)
CSI (Centre for Social Innovation)
215 Spadina Ave, Suite 120, Toronto

Modules

  • Content Construction Kit (CCK)
    (6.x-2.6: Content, Node Reference)
  • Date
    (6.x-2.4: Date, Date API, Date Timezone)
  • GMap Module
    (6.x-1.1-rc1: GMap, GMap Location)
    There is a bug with the GMap view type in 6.x-1.0, which is listed as the Recommended Release. You need to use 6.x-1.1-rc1 to manually select latitude & longitude fields.
  • Location
    (6.x-3.0)
  • Views
    (6.x-2.10: Views, Views UI)

Step 1: Configure GMap

You need to configure GMap to geocode your locations.

admin/settings/gmap

  • Google Maps API key
  • Default Width (100%)
  • Default Center (Toronto: 43.64675865498884,-79.37982559204102)
  • Default Zoom (13)
  • Map Type (Map: Standard street map)
  • Map Behaviour Flags (nokeyboard, nomousezoom, autozoom)

admin/settings/location

  • Default Country (Canada)
  • Use a Google Map to set latitude and longitude

admin/settings/location/geocoding

  • Canada (Google Maps)

Step 2: Create Event & Location Content Types

Location: Edit
admin/content/types/location (Fieldset: Locative Information)

  • Number of Locations (1 for minimum, maximum & number of locations...)
  • Collection Settings
    • Location name: Allow
    • Street location: Require
    • Additional: Allow
    • City: Require
    • State/Province: Require
    • Postal code: Allow
    • Country: Force Default (Canada)

Event: Manage Fields
admin/content/types/event/fields

  • Add Location Field:
    • Label: Location
    • Name: location (field_location)
    • Type: Node Reference (Select list)
  • Configure Location Field: Global Settings
    • Required
    • Content types that can be referenced (Location)
  • Add fields for Date & Time

Step 3: Create a Location & Event

I'm going to create an Event for the June Drupal Meetup @ CSI in Toronto. Since Google Maps is already setup to provide the geocoding, the latitude & longitude will be added when the Location node is saved:

Location coodrinates

If you don't see the highlighted coordinates, then either GMap isn't configured correctly or Google Maps couldn't find the location. If Google Maps can't find the location, then you can manually add the coordinates (fun!).

Step 4: Create a View

Many views start out by defining filters, but for this view the first step is to add a relationship to the referenced location. By setting up this relationship, when we're viewing an Event node, the view can also access the data from the referenced Location.

  • View Name: location_gmap
  • View Description: Display a GMap of a referenced location
  • View Type: Node

Relationships

  • Content: Location [Configure]
    • Require this relationship

Arguments

  • Node: Nid [Configure]
    • Action to take if argument not present: Provide default argument (Node ID from URL)

Fields
Since we've defined a relationship to Location, when you add your fields there's now the option to select a relationship:

Views field relationship

  • Node: Title
  • Location: Address (Relationship: Location)
  • Location: Latitude (Relationship: Location) (Exclude from display)
  • Location: Longitude (Relationship: Location) (Exclude from display)

Basic Settings
You can only configure the GMap style once you've added the latitude and longitude fields above. By setting them to Exclude from display they're loaded into the view, but not displayed in any other way.

  • Style: GMap [Configure]
    • Data Source: Choose latitude and longitude fields
    • Latitude field: Latitude
    • Longitude field: Longitude
  • Items to Display: 1

Add Display (Block)
You don't need to make any changes for the Block display, it will inherit the defaults.

In the end your view should look something like this:

Views Configuration: location_gmap

Step 5: Add Your GMap Block

You can now add your block to your Event pages:

Toronto June Drupal Meetup @ CSI (Centre for Social Innovation)

Comments

webtoolmaster.com's picture

Every weekend i used to pay a visit this website,
because i want enjoyment, since this this web page conations in fact pleasant funny material too.

drtrueblue's picture

Wonderful, do you have any insight to D7. I simply can't find a way to get location content in a related node to play nice with D7. Any insight would be fantastic!

@sethhinz's picture

Would love for this to be updated for Drupal 7! Views terms, etc. have changed, and I'm lost!

en-Jim's picture

Ninja Girl you are the best! Looks like I had the same challenge as Diogo. Thanks :o)

Bob Donaldson's picture

Not sure if you are monitoring this post but your example was great and worked first time. Thanks. However as I tried to extend it for multiple reverse references it failed to find any references at all. Any experience working with multiple reverse references and GMAP? Didn't mean to be Anonymous.

Anonymous's picture

Not sure if you are monitoring this post but your example was great and worked first time. Thanks. However as I tried to extend it for multiple reverse references it failed to find any references at all. Any experience working with multiple reverse references and GMAP?

Seth's picture

Thank you - thank you!

Diogo Correia's picture

Thank you ninja girl! I did most of that on my own but then I got stuck, as I didn't knew we could provide the Longitude and Latitude values to the gmap view style :D Thanks!

Add New Comment