Mapping with Drupal: GMap, Location & Views

You are viewing a wiki page. You are welcome to join the group and then edit it. Be bold!

Summary

These are very rough notes from tom_o_t's session at DrupalCampNYC6 on how to use Drupal for mapping. Feel free to add screenshots, configuration options, etc, and we can contribute back to the GMap documentation page.

Other Resources

YouTube video (Drupal 7): How to integrate the gmap,location and views module in drupal.

Outcomes

To create a site that displays users or nodes on a map with different colors of pins for different content types or taxonomies - some examples include:

http://www.climbnyc.com/climb
http://www.toiletradar.com
http://greatbrewers.com/beer-map
http://www.globaldoctoroptions.com/mumbai-hotels-page/446
http://www.opengreenmap.org/en/greenmap (heavily customized)

Modules

This tutorial was written with the following modules. The most recent releases should also work.

GMap 6.x-1.x-dev (13th Feb release)
Location 6.x-3.x-dev (26th Feb release)
Views 6.x-2.3
Advanced Help 6.x-1.1

Installation

These instructions assume a fresh installation of Drupal 6.10 using the default theme. It's recommended not to use a custom theme until you have things set up as some contributed/custom themes do not add javascript in a way that's compatible with GMap.

Location Module

Other modules are available for storing location information, but the location module is a very straightforward option and integrates well with the GMap module.

Enable the location, location search, node locations & user locations modules

Set geocoding options (enable the countries you expect to cover with your site) & Google api key (click 'Configure parameters) in admin->site configuration->location (get the key from http://code.google.com/apis/maps/signup.html)

Set user location options (enable the address fields you want people to use) in admin->user management->User settings

It is important to get this right - there can be issues with geocoding (getting the latitude & longitude) if the country is set to force default, or if certain fields are disabled.

Set node locations (enable the address fields you want people to use) in admin->content management->content types

It is important to get this right - there can be issues with geocoding (getting the latitude & longitude) if the country is set to force default, or if certain fields are disabled.

Users can now set their location by typing in an address or coordinates, and content types can now be configured to associate location(s) with nodes.

Locations of users or nodes will now be displayed as text.

GMap

Set Google API (again) and other basic map options - admin/settings/gmap
- This is where you set defaults for the center of the map, map type, etc - if your maps are always centered somewhere off the coast of Africa this is where you can fix that!
- There are some great clustering options here. I would recommend not using these until you have everything else set up and working

See an example configuration (opens in new window)

Set up pages for node locations & user locations - admin/settings/gmap_location
- These pages require a 'macro' to determine the appearance of the user and node maps. You can create a macro at the "Build a GMap macro" link in your navigation menu. It should look something like [gmap zoom=3 |center=37.3002752813443,-82.08984375 |width=100% |height=300px |control=Small |type=Physical]

Change location settings to use map - admin/settings/location - this allows people to choose the location from a map rather than having to type in an address.

There are now two maps by default on your site - a map of all the user locations, and a map of all nodes. These maps can be set to display different color pins based on user role, content type, or taxonomy term.

Enable 'Location map' block - admin/build/block and set to display in sidebar or content footer - now a small map will be displayed next to nodes that have a location.

Views

Enable the views modules
Create a new view
View type: node
Style: gmap

Video tutorial on integrating gmap with views http://www.drupalove.com/drupal-video/gmap-location-module-and-views

You can now use the full power of views & CCK to choose which fields to show in info window, size images with imagecache, theme the view, etc. You can use views to create maps that only show particular content types for example, or only display nodes near a particular location. You can expose filters to the user, so they can filter what is displayed on the map (see the great brewers map example). Some of the views integration is a bit buggy, so search the issues queue for gmap if you are having problems.

Taxonomy

Content with different terms can have different markers (see Toilet Radar example)
Create a new taxonomy - set it to be single select, required, enable gmap markers

Adding Your Own Custom Markers

Instructions for doing this are in the 'extended help' for gmap - enable the Extended Help module, then go to help/gmap/extending. This is copied from there:

You can add custom markers to GMap by placing the marker images in the markers/ directory, and configuring the marker with an ini file. You may wish to make your own folder to keep your markers seperate from the built-in markers.

An ini file:

; Defaults
[defaults]     ; The defaults section holds the settings that will be used if they are not specified on the marker.
;shadow = ""   ; The filename of the image to use for the "shadow" of the marker.
anchorX = 10   ; anchorX and anchorY are the pixel coordinates relative to the top left corner of the image
anchorY = 29   ; to define where the "pushpin" of the marker is.
infoX = 17     ; infoX and infoY are the pixel coordinates relative to the top left corner of the image
infoY = 6      ; to define where the "tail" of a popped-up info window points to.

; Marker sets
[mycustom]                    ; This is the "internal" name of the new marker type. It's used
                              ; in macros and when placing markers using PHP code.
name = "My custom"            ; This is the name that appears in the marker chooser dropdown.
sequence = "my1.png,my2.png"  ; The list of image files to use. Specifying multiple filenames
                              ; will let you have changing images when placing a series
                              ; of markers. The "Numbers" marker is a good example.

; Files

After creating your .ini file, be sure to go to the GMap settings page and click the Regenerate button.

In case of any error, you can also try running the script written in file gmap.strings.php inside gmap module directory. Please copy the code and paste it in a block/page with Input Format as PHP Code and then run it. Once it is done, then remove the block/page. Icon shall appear fine. :)

Advanced Use of Gmap

In the advanced help section (if you have enabled that module on your site) you will find an introduction to some of the other things you can do with Gmap. You can create much more customized maps in your node.tpl.php files. The issues queue of the Gmap module also contains examples of how to build a key for your maps, and how to access the map object in javascript.

It's also worth reading the README.txt and THEMING.txt in the GMap module.

Finally

Remember to set all the permissions correctly, or no one will be able to use these features!
/admin/user/permissions
gmap_location module
gmap_macro_builder module
location module
location_user module

AttachmentSize
location-countries.png8.23 KB
location-user-settings.png18.99 KB
location-user.png6.91 KB
location-user-display.png8.08 KB
gmap_config.png126.72 KB
gmap-location.png11.48 KB
gmap-create-content.png25.32 KB
view-gmap.png22.91 KB

Location and Mapping

Group organizers

Group categories

Wiki type

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week