Home > CMS & Wikis > Mashup of Gmap into your Drupal website

Mashup of Gmap into your Drupal website

June 11th, 2008

Recently I had to setup a Drupal website (Drupal 5.7) that needed to display pages with a location and a Google map. I could achieve that by editing node.tpl.php but I wanted to use Views and Panels instead.. Here are the instructions on how to get your Gmap view to work with the Views module and the Panels module.

Before we start I assume that you have installed the Views, Panels2, Gmap, and the Location modules.


If you use Drupal these instructions should be easy to follow.

Create a View

To start we will create a new View, click on:

Administer > Site building > Views
On the Administer Views page click Add

Use these settings:

Name: node_map
Access: no change
Description: node gmap view
Provide Block: Check box
View Type: Gmap View
Node Per block: 1
Fields > Add these two: Location: Latitude and Location: Longitude
Leave the rest at default values

Next, for Arguments click Add.

Use these settings:

Type: Node: ID
Default: Return Page not Found
Ttile: %1
Option: equal
wildcard: %1

Filters: optional

Click Save

We are done with the Views module now.

Create a Panels View

Now go to Panels > Views
From the drop list select: node_map
Click Create panel view

Use these settings:

Panel view name: node_map_panel_view
title: Map
view type: block
Required context: node
rest is default

Save your panel view.

Mini Panels

Next, we want to create a mini panel.

Go to Administer > Panels > Mini panels

Click Add

Use these settings:

Layout tab: select layout, I use single column
Settings tab >

Mini panel title: node_map_mini_panel
name:node_map_mini_panel

Context tab > select Node from drop box click Add required context

Save your mini panel

Click Content tab >
Click the + button. You will see a Views section with an object titled ‘Map’
Click on ‘Map’

Click save

Panel Page

Next, we want to edit or create a panel page and insert our mini panel.

Go to Admin > Panles > Panel page. Add the mini panel to the content section.

Make sure to have these settings:

Settings tab > Path: node/%
Context tab > Argument > select Node ID click Add argument

Save

You’re done! ;)

Why did we create a mini panel? because we need to pass context to the view and that’s done via the mini panel..

Are there other or better ways to show google maps in a Panel or with your node/page? I’m sure there are. Like anything else, there are multiple ways to achieve your goal with Drupal because Drupal rocks and has a great community of programers that support it.

If you rather just edit a php file to show the google map in a node or page, if one exists, use this php code. Edit the node.tpl.php file in your theme folder and just add the following code:

<?php
if ( ($location['latitude'] != 0) && ($location['longitude'] != 0) && ($teaser != 1) )
{
$homes=array('id' => 'outfittermap',
'zoom' => 8,
'width' => '300px',
'height' => '200px',
'type' => 'Map',
'latitude' => $location['latitude'],
'longitude'=> $location['longitude'],
'markers' =>
array( array(
'markername' => 'blue',
'latitude' => $location['latitude'],
'longitude' => $location['longitude']
))
);

$outfittermap = theme(‘gmap’, array(‘#settings’ => $homes));
print
$outfittermap;
}

?>

Also, altering a node template is another way to embed gmap map inside a node body, whether that node is in teaser mode or in full body mode. And you can use the built in gmap_simple_map() function which is part of gmap to display the map.

Furthermore, you can use gmap macros which you can type directly in the body when you are editing a node. e.g:
[gmap zoom=3 |center=40,0 |width=300px |height=200px |control=Small |type=Map]

New to Drupal, don’t despair, you can start using the best CMS in the world now, visit http://www.drupal.org

CMS & Wikis , ,

  1. February 12th, 2009 at 12:34 | #1

    This topic also gets touched in Drupal 6: Ultimate Community Site Guide

  1. No trackbacks yet.