There are many reasons to integrate your Drupal site with Google map (GMap). You can create a business directory with company contacts and locations, or a list of local restaurants with directions. Good news is that it can be achieved using Gmap and Location Drupal modules. And we will show you how to use Gmap and Location modules in Drupal in this article.

Demo of GMap in a Drupal site

Let's take our Drupal theme ST Pipe as an example. Basically it is a restaurant review website. It shows restaurant information such as images, contact details and a Gmap block to show directions to the location. Very nice way to make the content more appealing to users.

Drupal Gmap and Drupal Direction in ST Pipe
Restaurant detail page with GMap

The following section is how we implement this feature in Drupal.

How to use Drupal Gmap and Location modules

  1. Download Drupal GMap and Drupal Location modules.
  2. Go to admin/build/modules page, enable Location, Gmap, and Gmap Location.
  3. Go to admin/settings/location, enable "Display of Locations", and check "Use a Google Map".
    gmap drupal direction configure location
  4. Go to http://code.google.com/apis/maps/signup.html and get an API key for your URL.
  5. Back to admin/settings/gmap, paste in your API key, scroll to the bottom of the form, and save the configuration.  (You must do this before the other configuration options will work.)
    gmap drupal direction configure gmap
  6. On the same page, set your Default Map Settings - this is for zooming, marker or etc. You can ignore it for now.
  7. Go to admin/settings/gmap_location and adjust the settings for your user and node maps.  If you're not going to use one or the other, just ignore it.
  8. Go to admin/user/permissions and set the permissions for the gmap_location and location modules. 
  9. Go to admin/content/types, edit each content type that you want to show location information, and turn on the Locative Information settings.
    gmap drupal direction configure location content type
     
  10. Edit or create a new node of a type that you want to set location. Under Location, click on the map to add a marker.  Pick up and drop the marker repeatedly to zoom in so you can place it more precisely.  (This is a lot quicker than zooming and panning)
  11. Go to admin/build/block, assign Location map block into Content region. In ST Pipe, we asign it into "Node Location" region.
    gmap and drupal direction configure location block

This is done. Hope you have a great time with Drupal Gmap and Location modules.

AttachmentSize
location_config_drupal.png22.24 KB
gmap_config_dupal.png13.94 KB
content_type_location_config.png30.02 KB
block_location.png28.11 KB
node_detail_location.jpg32.21 KB

Comments

gmaps doesn't work

i have set in my site the option "private download" and gmaps doesn't work... why?

Is it necessary create new content type or can i use the blog content type appropriately modified?

tnks

You can change height and

Yes, you can change height and width of the map at Macro text box on admin/settings/gmap_location page.

To display more marker on a page, you need to create a view and then choise Gmap for Style at Basic setting.

It works fine, thank you. The

It works fine, thank you. The height of the map seems to be 200px - is there somewhere I can define height and width? Also can I have more than one marker?

Thanks,

Ju

Subscribe to our mailing list

* indicates required