Dave Myburgh shows you how to create a custom global event map from location data stored in Drupal.
When we decided to update Acquia’s training website to Drupal 7, we wanted to have a map on the event page showing the locations of all our upcoming courses, as well as a map for each course, so users can quickly get a feel of where events will be taking place. Visitors can also open up the maps in Google Maps to obtain directions.
In the past, it’s been difficult to create maps from location data stored in Drupal. There are numerous modules and methods available to deal with this, but finding the right combination can be tricky. For the training site, we figured out how to make it all happen using the following three modules (along with any other modules they require):
In this walkthrough, I’ll show you how we used these modules to generate custom event maps. I’ll begin by configuring each module, using IP Geolocation Views & Maps to collect location data from the site’s visitors, then creating a global map that shows the location of upcoming events along with a pin indicating the location of the viewer.
You can take a look at the results here.
First, you need to enable the following modules: Location, Location CCK, GMap, GMap Location and IP Geolocation Views & Maps (IPGV&M). There will be some dependencies that are required – for example, Views – so go ahead and enable those too.
Admin > Config > Content > Location and configure the Location module. Under
Main Settings, we enabled the
Open map link in new window option and left the
Map Links tab alone. On the
Geocoding Options tab, we selected
Address level accuracy from the
Google Maps geocoding minimum accuracy dropdown. We also ticked the
Google Maps button for each country we run courses in. If you add an event in a new country, you must come back here and enable geocoding for that country.
To configure the GMap module, go to
Admin > Config > Services > Gmap, where you’ll enter your Google Maps API key. Enter the map defaults you want to use. We used a default width of 350px, a default height of 160px and no default centre, to fit in with our design for the event pages. The
Marker action option can be set to
Open info window, so that users get a pop-up when they click the marker.
The IPGV&M module enables you to collect location information from your users. When they visit a page with a map on it, their location can be shown on that map and used to give directions to an event. Go to
Admin > Config > System > ip_geoloc to configure it. We checked
Employ the Google Maps API…, along with
Employ Smart IP… as a backup. We also entered the URLs where we wanted to collect user location data: all the event nodes and the main events landing page. We left the other options on their defaults.
We wanted to show a Google map of the event location on each event node. The Location module can be used to create a location field that takes an address and geocodes it to a latitude and longitude for display on the map. We didn’t set any defaults in the
Default value settings, to prevent empty maps appearing if no location data is entered – for example, for an online event.
Collection settings, we chose to
Allow collection of the following elements for a location:
Dropdown from the second menu),
Postal code, and
Coordinate Chooser (this allows the editor to enter a latitude and longitude if geocoding fails for some reason). In
Display Settings, we ticked:
Country name and
GMap Macro is simply set to
[gmap] and our
GMap marker is
Manage Display tab for the event content type, select
Address with map as the
Format for the
Location field. Now when viewing an event with an address, you will see the actual address as well as a map of the location. A link to Google Maps is provided below the map so users can interact with it – for example, to get directions from their location.
If a map does not appear after saving an event, go back and edit the node to ensure that a latitude and longitude are now visible below the location data. If not, you might need to enable geocoding for that country, or manually enter the latitude and longitude. If that doesn’t work, double-check all the settings above. As a last resort, check the issues list for that particular module on the Drupal site to see if you can get some help there.
The last thing we need to do is create a display that shows all our events across a world map. We can do this using the Views module, in conjunction with the IPGV&M module. Views is one of those ubiquitous modules that tends to be used on all but the very simplest websites. It is required by IPGV&M, so you should already have it enabled at this point.
Create a new View (
Admin > Structure > Views > Add) and check
Create a block with the
Display format set to
Map (Google API, via IPGV&M). In the settings for this option, you’ll see dropdown selects for the latitude and longitude fields. If you’ve already added those fields to your field list in the View, select them; otherwise leave them blank for now – you can add them after you’ve added the fields. Leave the
Default location marker set to default.
Map options is where the tricky stuff comes in. You really have to play around with the options in order to get your desired outcome. We used the following:
Map style (CSS attributes) add CSS styles for the map itself: here, we’re using
height: 400px;width: 100%. Select
Center the map on the visitor’s current locationfrom
Map centering options and enter a hex colour code (without the
#) for the user’s icon colour.
Location: Latitude and
Location: Longitude fields to the View. Be sure to set these fields to
Exclude from display. Then add whatever other fields you want to show in the pop-up when someone clicks on the marker on the map: for example,
Location: City and so on. We added a filter to the View to show only event nodes that had a start date in the future (
Content: Date (start date) > now).
Save the View and add the block where you want it to show on your site. You can see our map here.