A Map View with Geo, Gmap and Gmap+Geo

This article describes how to set up a Drupal content type with Latitude and Longitude, and then how to display multiple nodes in a Google Map.

My goal recently was to find a light-weight solution for a small client website. There is a lot of noise in Drupal-land about how the Location module is ideal for this. I was looking for a lighter solution than the Location module - I only want to control Latitude and Longitude data, and pump it into a Google Map.

That said, it took me some time to find a balance of modules that worked for me, so here is the end-to-end configuration of a simple CCK + Gmap solution.

Requirements

This example uses Drupal 6 with CCK and Views + Views UI.

Additionally download the following projects:

  • Geo for geospatial tools, plus a CCK field,
  • GMap for Google Maps tools, and
  • Gmap+Geo for integration between the two.

The screenshots here show which modules to install:

GMap Configuration

GMaps does not require much configuration at /admin/settings/gmap. As instructed you need to obtain a Google Maps API key. You can also set the default map position.

An option that I set is "autozoom". This seems to make the Google Maps lock into the set of data that is displayed on the map.

Geo CCK field

In this example we take the available "Page" content type and add a Geo field to it. Visit /admin/content/node-type/page/fields to add these fields.

Add a new field of type "Geospatial" and the widget "Gmap Picker". When configuring the widget there are no other changes to make, just be sure that "Point" is the selected data type in the widget settings, and for my purposes I only wish to store one location per node.

Set display handlers


At this point you may want to set your display handlers for the node type. The key is that we have a Gmap display handler. This means that in views and panels (etc) we have the ability to output this field as a Google Map.

Create content


We create some content. In this example "Melbourne", "Sydney" and "Brisbane".

The node edit form will show you a Google Map and two inputs for Latitude and Longitude. It's a bit clunky to drill down to the location on the map and set a pin. In a future article I'll show you how to add a custom search field to the map.

Create a View

Now create a view at /admin/build/views/add. This view will be a list of nodes.

First add the Geo CCK field. We need to prepare a separate latitude and longitude that are configured in such a way as to be usable by Gmap.

There is only one Geo CCK field, but we add it twice. There is a setting for each field - set one field to "latitude" and one to "longitude". We will also select "Exclude from output" because the Gmap display is only interested in the data, we do not want to display the numbers.

Just to be clear: select the same Geo CCK field twice and specify each as Latitude or Longitude.

Once you have the Latitude and Longitude fields, you can add additional fields to be displayed in the popup box on the Gmap. In this example we choose the node title.

Set the Gmap Style

Select the style option and select "Gmap" as the style for the view. (Note: there is a "Geo for GMap" option which you might explore however the goal of this article is to show a successful end-to-end implementation. There may be some redundancy or shortcuts.)

You have to pick two separate fields, a Latitude and a Longitude. The fields you chose are both here, but they have the same description. Just be careful to choose each separately, and in the right order.

You can see that we could have any data exposed to the view as latitude and longitude, not just CCK fields. This is an indication that the solution is simple, easily upgraded, and flexible.

Final steps

We now add a page display to the view so that we can give it a path. The final result should be a page with a Google Map that displays the nodes returned by the View.

This solution is relatively simple and focused around Latitude and Longitude being the minimum critical data to find and store on our content types. My next article will show how to add some usability to the node edit form, allowing a user to search and automatically pick a map location.