Wrights HQ

A blog by Ian Wright - Front-end web developer

I’ve recently had the challenge of displaying node data on a Google Map, with the ability for the user to switch between satellite view, terrain view & Street View. In this tutorial I will aim to show you how to setup Google Maps in Drupal 7 using the following modules.

Please Note: Street View has only been available since Google Maps API 3.

Basic Setup:

Install Drupal 7 into the directory you want to run your website from & download the above modules into the following directory sites/all/modules.

Once you have all the modules placed you will need to active them from within Drupal, you can do this by visiting admin/modules, below is a screen grab of the modules you will need to enable.

You will now need to click Save configuration, located at the bottom of the page. You will then get a notice, warning you, you need to enable a few other modules – click Continue.

Overview

So far we have installed Drupal 7 & enabled the modules we need to setup our Google Map. In the next section I will take you through the process of configuring Get Locations.

Configuring Our Modules

Get Locations

Map Markers

By default Get Locations includes basic markers which will be displayed on the map but they do not come with the module you downloaded previously, you need to download the markers separately from Dropbox. Once you have downloaded the markers you need to place them in sites/all/libraries – your full directory should be sites/all/libraries/getlocations/markers.

Map Settings

To let Get Location know we now have our map markers we need to ‘regenerate’ the marker path. To do this visit admin/config/services/getlocations and click Regenerate at the top of the page. After the generation has been successful you will see the following confirmation message ‘Marker cache regenerated.

Get Locations has a lot of settings which you will need to update to suite your needs but I am going to go through a few settings which I think will benefit all:

Show streetview button:

This will place the street view man marker onto your map, allowing your users to switch between standard street / satellite map to streetview.

Content Map marker:

Content Map markers allow you to change the markers for different information on the map. By default, from the map markers pack downloaded previously you’ll find these options default to Drupal. This pin design is the Drupal icon.

Please note: This is not the markers for our content types – we will go through this in a later stage.

Marker Action:

The is the action taken when the user either clicks or mouseovers a marker, I like to use ‘infoBubble’.

Preload marker data:

Depending on how many nodes you would like to display on the map I would have this checked, this allows for the map to load in all the node information which will be in our Marker Action selection.

Use Cluster manager:

This option turns on grouping for nodes which are within a certain proximity of each other, when the user zooms in/out on the map. It will ‘combine’ the nodes together by displaying a number which represents the total grouped nodes.

Once you have configured the settings you will now need to click Save configuration, located at the bottom of the page.

Please note: The settings you have just created will be used as the default when setting up Views. When configuring a view you are then able to configure each view to have different map settings.

Please note: In a later tutorial I will go through the process of creating custom markers for content types and clusters.

Overview

Now we have setup our settings for Get Locations we need to build a content type which will include our geo data.

Creating Our Content Type

To build a new content type visit admin/structure/types and click Add content type:

You will now need to give your new content type some basic information before setting up any fields:

Name: The name of your content type.
Description: A description of the content type.
Extra: You are also able to configure how your content type works e.g. published, comments.

Once you have configured the settings you will now need to click Save and add fields, located at the bottom of the page.

On the next screen we can now add the required fields we need for our new content type. In this example I’m only going to select the Geofield field type & latitude/longitude widget. This will be used to enter our map coordinates.

Once you fill out the field settings you will need to click Save, located at the bottom of the page. You will then be presented with the field settings page, here you can just click Save field settings to continue to the manage field default settings.

Overview

Now we have setup our content type & have our geofield field we can create new content & plot our points on the map.

Viewing our content on a map

Getlocations has multiple ways to view content on a map. In this tutorial I am just going to show some of the default view displays.

Viewings a single node on a map

http://yourdomain.com/getlocations/node/xxx (Replace XXX with your node ID)

Viewings all nodes from the same content type

http://yourdomain.com/getlocations/type/XXX (Replace XXX with your content type machine name)

Overview

Now we can easily display nodes on a map by using just a few modules. There are a lot of features built into Getlocations & I recommend playing around with the settings we went through on page 2. In the next tutorial I shall go over the process of how to create custom markers, clustering nodes & how to setup a custom views display.