Mapping with Drupal

Mapping with the GMap Module

The GMap module integrates Drupal with the Google Maps API to display maps. One of its strengths is that it is faster and simpler than using the OpenLayers API to display Google Maps. The drawback is that you are then committed to using just Google Maps. Switching to another source would require big changes to your code and data. Google Maps are not open source; they come with restrictions. However, for many purposes they are free to use.

Note

If you are going to build a site that relies on Google Maps, it is worth reading and understanding the usage limits and terms of service.

Basic Configuration

The basic configuration of the GMap module was covered in Extending the Location module with the GMap module, so if you have been following through the examples, this module should already be installed and enabled.

Integrating with Views

Unlike the OpenLayers module, GMap does not require two separate displays, so creating a map is a little simpler. Just as it was when using the OpenLayers module, the maps are created using the Views module. In this example, we will use the GMap and Views modules to create a map of “Drupal companies.” We created the “Drupal companies” content type earlier in Adding geographic data to a node with the Location module.

1. Download and install the Views module, including the Views UI module if you do not already have these set up for your site.

2. From the Views page, add a new view at admin/structure/views/add.

3. For the “View name,” enter Drupal companies.

4. Tick the “Description” checkbox and enter the description Map of Drupal companies.

5. In the “Show” section, from the first drop-down leave “Content” selected. Change the “type” drop-down to “Drupal Company.” Leave the “sorted by” drop-down set to “Newest first.”

   Note

   If you do not see the “Drupal Company” item in the drop-down, make sure that you created this content type in Adding geographic data to a node with the Location module.

6. Leave “Create a page” checked. This is the page that will contain the map. In the “Display format” section, change the first drop-down to “GMap.” Change the second drop-down to “fields.” Change “Items to display” to 100.

   Note

   See Browser Capabilities on why to avoid displaying an unlimited amount of data.

7. Click the “Continue & edit” button.

8. All the basic configuration has been done to create a map. Click the “Save” button on the top right.

9. Click the “view page” button on the right to see the map, which will be at /drupal-companies. As shown in Figure 4-10, the default map is very small and shows an unhelpful part of the world, unless your Drupal companies are in southern Europe and northern Africa. If you drag the map around, you should see the locations that you added to the map.

   

   Figure 4-10. Basic map with GMap and Views

10. Edit the view again. In the “Format” section, click the “Settings” link next to “Format: GMap” as shown in Figure 4-11.

    

    Figure 4-11. Configuring GMap in Views

11. The reason the map is small and centered on Spain is because of the macro that is being used for this View, which is currently set to [gmap ]. The concept of a macro in the GMap module was introduced in Extending the Location module with the GMap module. Using the instructions from there, create a macro that will make the map fill the width of the page. It should be something like:

    [gmap zoom=2 |center=27.9944,4.9218 |width=100% |height=400px |control=Small |type=Map]

    Enter this value into the “Macro” field on the Style options screen for the map view.

12. The next field is “Data source.” For this example, it should be left set to “Location.module,” but it is possible to change this if you need to select specific fields that contain the latitude and longitude. This makes it possible to use the GMap module in conjunction with the Geofield module, or with a content type that has latitude and longitude fields added in some other way.

13. The “Marker handling” field gives some options to choose which markers will be used on the map. For this example it could be left with the default “Use single marker type.” The other options provide ways to have different markers representing different information on the map:

    By content type

    To use markers by content type, configure the markers at admin/config/services/gmap_location. When configuring a location field for a content type at admin/structure/types/manage/drupal-company/fields/field_company_location, a particular style of marker can be chosen. This marker will then be used when a node of that content type is displayed on a map.

    Use marker field

    This advanced configuration requires a field on a content type that matches the markername of a marker. The markernames can be found in the .ini files contained in the markers folder inside the GMap module.

14. With “Use single marker type” selected, the “Marker / fallback marker to use” field defaults to “Drupal.” Change this to whatever marker you like, such as “Small Light Gray.”

15. There are some more advanced choices on this form, but the last two checkboxes provide some useful Behaviors that can occur when people interact with the map. Tick the “Display a tooltip when hovering over markers” checkbox and select “Content: Title” to have the company name show when the user moves their mouse over a marker. Tick the “Display a popup bubble with additional information when a marker is clicked” checkbox and select “Content: Title” to have the company name show when a user clicks on a marker.

16. Click the “Apply (all displays)” button to save the configuration.

17. The view that creates the map is now complete. Click the “Save” button on the top right. The map should look something like Figure 4-12.

    

    Figure 4-12. The final map of Drupal companies

18. Having the same information show up both on hover and in the pop up bubble is not very useful. We can improve this by adding a second field to the view so as to display the body of the node (the description of the Drupal company).

19. Edit the map view again. In the “Fields” section, click the “add” button. Select “Content: Body” from the list of available fields and click “Add and configure fields.” Click the “Apply (all displays)” button to save the configuration.

20. Go back to the GMap settings for the view, as described in Step 10. Change the “Bubble pop-up field” drop-down to “Content: Body.” Click the “Apply (all displays)” button to save the configuration. Click the “Save” button on the top right to save these changes to the map. Clicking on a marker on the map should now display a more useful pop up bubble, as shown in Figure 4-13.

    

    Figure 4-13. Pop up bubble with GMap

We have now used GMap and Views to create a map that displays all content of a particular type (Drupal businesses) with customized markers and useful information when hovering or clicking on a marker.