Creating a Google Maps Mashup with Drupal and GMap
The standard GMap module in Drupal is designed to display one location at a time on a Google map. There may be times however, when you will want to display several locations on a single map, otherwise known as making a mashup.
This document describes the steps needed to create a Google Maps mashup in Drupal. It covers the following topics:
- Background information for the example map
- Requirements and installation
- Making the mashup
- Setting up GMap
- Creating a content type using CCK
- Importing data into Drupal
- Using the Views module to build a mashup
- Setting up GMap
- Creating a content type using CCK
- Importing data into Drupal
- Using the Views module to build a mashup
- Setting up GMap
Background
The example I am using for this document is a map to display watershed organizations in the United States. I use data that I screen scraped from the EPA's Surf your Watershed site. This site is set up to let people search for watershed groups in a specific area or it can be used to enter information about your watershed organization. I didn't like the access to the data provided by the EPA, so I thought I would see what else could be done with it.
The data consists of the name of the watershed organization, a URL if given, and x, y coordinates that approximate the location of the group. I wanted all of the groups on one map with the ability to click on a marker and have a popup window with contact information.
Requirements and installation:
This mashup is created using version 6.xx of Drupal. Drupal comes with a core set of optional modules, including Forum, Poll, and Taxonomy. To do anything outside of the range of the core modules, you will need to load user-created modules onto your site. To do this, they must be located in the directory “sites/default/modules”. If that directory doesn't exist, go ahead and make it. Once that is done, download and copy the following modules into the directory:
CCK – This is required for this example, but is not necessary to use Gmap.
Location - Location – Required for Gmap.
Views – Required to create the mashup
If you plan to import your data from a file as I have done, download and copy the following modules:
Once these are all installed, go to “Administer->Site building->Modules” on your website. You will see that all of the modules you added are now listed, but none are active yet. To activate the modules necessary for the mashup, click on the check box next to the following:
CCK
Date/Time
Development
Location
Other
Views
Making the Mashup
Setting up GMap
Before you can get Google Maps to show a map on your website, you have to get an API key from Google and use it to configure Gmap. Here are the steps:
- Go to http://code.google.com/apis/maps/signup.html, enter the top-level URL where the maps will be displayed (e.g., http://www.ecotropolis.com), and copy the API key that is generated.
- On your Drupal site, go to “Administer->Site configuration->GMap” and enter the API key in the box labeled “Google Maps API Key”.
- On this same page, you can also recenter your map, set the initial zoom level, choose the type of map initially viewed, and set the screen size.
- On this same page under the heading “Map Behavior flags” you can customize some of the behavior your map will have. I like to disable using the scroll to zoom the map by checking the box next to “nomousezoom: Disable mousezoom”. I also like to select the radio control button “Open info window” under the heading “Marker action”.
- When you are done making changes to your default map settings, click “Save configuration”.
You have now set your system up to display maps, but they won't show on your content until you enable the location block. Note that since we are going to use a view to display the map, this isn't necessary here is how to enable the feature anyway.
Go into “Administer->Site building->Blocks” and enable the block entitled “Location map” by selecting a display area in the dropdown box to the right of the block name. The block can be customized by going to the “Configure” page, but that is beyond the scope of this document to cover.
Create a new content type using CCK
The data I am going to use for my map looks like this:
Watershed Group | URL | Lat | Lon |
|---|---|---|---|
1000 Friends of Minnesota | http://www.1000fom.org/ | 44.93 | -93.13 |
| 1000 Friends of Wisconsin | http://www.1kfriends.org | 43.07 | -89.39 |
| 4-H Watershed Project, San Luis Obispo County | http://www.slo4h.org/!ridges.html | 35.27 | -120.65 |
| A River Runs Through Us: The Bear River Watershed Education Project | http://extension.usu.edu/cooperative/waterquality/index.cfm/cid.814/tid.... | 41.74 | -111.84 |
| Accokeek Foundation | http://www.accokeek.org/ | 38.69 | -77.07 |
| Adirondack Mountain Club (ADK) | http://www.adk.org | 43.4 | -73.71 |
| Adopt-A-Stream Foundation | http://www.streamkeeper.org | 47.88 | -122.22 |
| ADCNR Coastal Programs | http://www.adem.state.al.us/fieldops/coastal/coastal.htm | 30.56 | -87.89 |
Before importing the data, you need to create the field “URL” to store the URL data. We will store the field “Watershed group” in the Title field. Here are the steps:
- Go to “Content management->Content types” and click on “Add content type”.
- Enter a name for your new content type under the heading “Name” and a machine readable version of the name under the heading “Type”. I'm going to use “Watershed Data” and “watershed_data” respectively.
- Remove the word “Body” from the line labeled “Body field label”. This will keep the body field from displaying. I am doing this because my content will be displayed in popup windows and all I really want the user to see is the information I am importing.
- Under “workflow settings” uncheck “promoted to front page”.
- Under “comment settings” set “default comment settings” to disabled.
- Under “Locative information->Number of locations, set values as follows:
- Minimum number of locations: 1
- Maximum number of locations: 1
- Number of locations that can be added at once: 1
- Minimum number of locations: 1
- Under “Locative information->Display Settings”:
- Uncheck “Display location in teaser view”. This isn't necessary for this example since our particular display will only be seen in an popup window, but I uncheck this anyway in case I ever use this content type differently.
- Uncheck “Display location in full view”. We want this unchecked because it will display a map in the popup window when viewing the individual nodes. We are creating one map with all the locations on it, and we want to just display the text as a popup for each node.
- Uncheck “Display location in teaser view”. This isn't necessary for this example since our particular display will only be seen in an popup window, but I uncheck this anyway in case I ever use this content type differently.
- Click on “Save content type”.
- To disable the display of “submitted by Username on date”, go to “Administer->Site building->themes” and click on the”Configure” tab. Under the heading “Display post information on”, uncheck the box next to your new content type.
Now it is time to add the field. To do this, go back to “Content management->Content types” and click on “manage fields” for your new content type. Next, enter the following under the category “New field”:
Label
Name
Type
URL
field_url
Link
Click the “Save” button when you are finished.
Now click on the “Configure” option next to your new field and do the following:
- For Council Name, leave everything at the default settings.
- For URL, set “title” to “no title”.
- Click “Save field settings” to save your settings.
Importing Data into Drupal
The Import module imports from either a CSV (Comma Separated Values) or TSV (Tab Separated Values) file. You can save to these file types out of standard spreadsheet programs. Once you have done that, do the following:
- Copy your CSV file into the “Drupal->sites->default->files” directory, which is where the Import module will try to search.
- Go to “Administer->Content management->Import content”.
- Select “New Import”, then click on the “Next” button.
- Click on the radio button for your new content type and click “Next”.
- Click on “upload file”, click on “Browse”, then locate your file and select it.
- Click on “Upload file” and your file should then show in the window.
- Click on the radio button next to your filename and click “Next”.
- Make sure settings on the next screen are set to match your data. On my screen, I make sure the box next to “First row contains column names” is checked, and I am using a CSV file, so I have selected the File format radio button next to “Comma Separated Values”. After you've set the file format, click on “Next”.
- On the next page, I will set Title to Watershed Group, URL to URL, Latitude to Lat, and Longitude to Lon. Your data will be displayed at the bottom of the screen as it appears from the database if you need to recall the correct data type.
- When you have set the appropriate fields, click on “Next”.
- Click on “Next” on the following page.
- The next screen will let you change any of the default options for your content type. Make sure of the following:
- For “Input format” select the radio button next to “Full HTML”.
- “Promoted to front page” should be set to “No”.
- Published should be set to “Yes”.
- “Sticky at the top of lists” should be set to “No”.
- Comment settings should be set to “Disabled”.
- For “Input format” select the radio button next to “Full HTML”.
- Click on “Next”.
- If the preview of your data on the next page looks good, click on “Next”.
- Click on “Start import”. You should see a progress bar showing how far along your import is.
Using the Views Module to Build a Mashup
Once the import is complete, the last step is to make a view. So go to Administer->Site building->Views and perform the following steps:
- Click on the “Add” tab.
- Enter a view name. I called mine “EPA_XML_Data”.
- Make sure the radio button labeled “Node” is selected, then click on “Next”.
On the screen you get, you will see the word “Defaults” toward the top on the left of the main content portion of your window. This is where you establish the default settings for the view, settings that will be in place for any additional displays you make unless you override them. I am only planning to make one display for this view so I will set everything within the default Here are the settings for your default view:
- Next to “Basic settings->Style”, click on “Unformatted”. At the bottom of the page, you will see a list of available styles. Click on the radio button next to “GMap” then select “Update”.
- Next to “Basic settings->Items to display” click on “1” and set the number to the number of nodes you imported, then click “Update.”
- Next the the title “Fields”, click on the “+” to add a new field definition. Under the heading “Groups:”, select “Node” from the drop-down box, then click on the checkbox next to “Node: Type”. Click on “Add”.
- Click on “Update”.
- Click on the “+” next to “Fields” again.
- Scroll down to find “Content: URL” and click on the checkbox next to it.
- Scroll down until you locate “Node: Title” and click on the checkbox next to it.
- Click on “Add”.
- Next to the “Filters” heading, click on the “+”.
- Under the heading “Groups:”, select “Node” from the drop-down box, click on the checkbox next to “Node: Type”, then click “Add”.
- Click on the checkbox text to “EPA XML Data” (or whatever you called your content type), make sure the”Is one of” radio button is selected, then click on “Update”.
- Now click the “Save” button.
The next step is to make a page display:
- Make sure “Page” is showing in the dropdown box below the word “Defaults” and click on “Add display”.
- Click “Save”.
Everything should be set up for your page. If you want to add a path for your page, select “None” next to “Page settings->Path” and enter the relative path in the text box, then click “Update”. Make sure to click “Save”.To view your page, click on the 'View “Page”' link near the top right of your content window. You should get a google map with little Drupal icons on all of your nodes.
- For Council Name, leave everything at the default settings.
- Enter a name for your new content type under the heading “Name” and a machine readable version of the name under the heading “Type”. I'm going to use “Watershed Data” and “watershed_data” respectively.
Help improve this page
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion
