• belgium
• drupal
• googlemaps
• howto
• location
• planetdrupal

This tutorial will show you how create a Google Map with location pinpoints in Drupal 6, and how to let your users filter the map based on postalcode.

This walkthrough was written to create a map for Belgium, as I encountered some gotchas while doing so. However most of it will apply to other countries as well, and you might even skip some steps that are only required for the Belgium use case.

Imagine you would want to create a Google Map showing all shops in Belgium, and let your users enter their postal code and a distance range (in kilometers or miles) to filter the results to. This would allow a user to search for shops nearby his location. As you can see in the screenshot below our map shows only shops that are within a 20 kilometer range of Brussels.

To build this functionality you will need to download and install the following modules:

• GMap (6.x-1.1-rc1)
• Location (6.x-3.1-rc1)
• Views (6.x-2.6)

Some of these packages come with multiple modules, so these are the ones you'll need to enable: Location, GMap, GMap Location, Views and Views UI.

1Step 1: First, we will configure the GMap module. Go to admin/settings/gmap to do so.
Here you can configure how you want your Google Map to look and behave. Make sure to enter your Google API key. You might also want to check the autozoom option in the "Map behaviour flags" fieldset. Most of the other settings can be left at their default value for now.

2Step 2: Next we will configure the Location module settings at admin/settings/location.
You can adjust the settings so they match the following:

You can leave the other tabs of the Location settings pages untouched.

3Step 3: Now we have to assign location based data to a content type. You can either use an already existing content type, or create a new one specifically for this purpose. I created a content type "Shop", so we can create a node for each shop we want to show on the map.
To configure our content type to collection location data, go to the content type edit page (at admin/content/node-type/shop) and find the fieldset "Locative information".
Configure the first two included fieldsets as shown in the screenshots below:

We configure our content type to have one location assigned with it.
Next, we will define which location fields a user adding a shop node will be allowed or forced to enter. In my case I made the basic address fields required to make sure to have a complete address.

You can configure the other location settings as you wish, or leave them as they are. Now save your content type and go ahead and create some shop nodes. You will have the ability to enter location data on the node submission form.

4Step 4: Now we're going to make the Location module aware of the Belgian zipcodes and their latitude - longitude coordinates. The Location module already comes with this data, so all we need to do is import the file sites/all/modules/location/database/zipcodes.be.mysql into our database (e.g. use PHPMyAdmin to import this file).

Important: at the moment of writing there is still an issue with this file: latitude and longitude values are switched. You will need to run the following SQL query to fix this:

UPDATE zipcodes SET latitude =(@temp:=latitude), latitude = longitude, longitude = @temp

More information on this issue: http://drupal.org/node/566792

5Step 5: Now we will create a View which will show our shops on the map. I assume you have at least some basic knowledge on how to create and configure a View.

First of all, create a new View, and make sure to create a Page display. Also assign a path to this page, so your users can browse to the map.

A. Add fields

Add at least the following fields to your View, and make sure to exclude them from display (unless you have a reason to show this information in the Gmap marker):

• Location: Distance / Proximity
  configuration options:
  Exclude from display: checked
  Units: Kilometers
  Origin: Use Distance / Proximity Filter
• Location: Latitude
  configuration options:
  Label: Latitude
  Exclude from display: checked
  Display style: Decimal degrees
• Location: Longitude
  configuration options:
  Label: Longitude
  Exclude from display: checked
  Display style: Decimal degrees
• Any optional fields
  Any optional fields you add and don't exclude from display will show in the marker.
  I suggest adding at least "Node: Title".

B. Save the view

It is probably necessary to save the View now, so the Latitude and Longitude labels are stored, as we need them in the following step.

C. Basic settings

Configure the basic settings in your View as follows:

• Style: GMap
  • configuration: Data source = Choose latitude and longitude fields
  • Latitude field: select "Latitude" from list
  • Longitude field: select "Longitude" from list
    Note: if the select list shows only blank items, you didn't set a label for the latitude / longitude fields! See A. Add fields.
• Row style: fields
• Use pager: No
• Items to display: 0

D. Add filters

Add at least the following filters:

• Node: Published = yes
• Node: Type = [your content type] (e.g. Shop)
• Location: Distance / Proximity
  • Expose this filter
  • Operator = Proximity (Circular)
  • Form mode = Postal code (assume default country)
  • Optional = checked

E. Save the save (again)

This should give you a basic working map, with proximity search exposted filters. You can come back and tweak your view some more to fit your specific needs.

For an alternate resource on creating this View, check out http://drupal.org/node/359463

6Step 6: This is the point where things are getting a bit dirty, as we're going to have to make changes to a file in the Location module. This is not considered good practice, so you should make sure you document this step properly or create a patch file, so you can reproduce this step if you should update your copy of the Location module.

Browse to sites/[all]/modules/location/supported/location.be.inc and add the function location_latlon_rough_be to this file, as described in this comment (step 2/): http://drupal.org/node/326749#comment-1235822

Finished!

After following the steps above, you should now have a map showing your shops at the URL path you specified in the View we created, with the ability to search for pinpoints in the area near a given postalcode.

If you have suggestions or questions about this tutorial, feel free to add a comment below.

Submitted by Sven on Wed, 28/10/2009 - 21:37 10 comments