As of 28th November 2014, the video subscription has been shutdown. All videos are available for FREE to watch.

How to Store Locations Using Geolocation Field in Drupal 7


The common approach these days for storing geolocation data is to use a combination of Address Field, Geofield, geoPHP and Geocoder. Another way, is to use the good old Location module.

But, today I want to show you how to use the Geolocation Field module

The module implements a field that allows you to store longitude and latitude coordinates. But where the module really shines is with its field widgets and formatters.

It ships with two sub-modules called: "Geolocation Google Maps" and "Geolocation HTML5".

The "Geolocation Google Maps" sub-module comes with a pretty cool widget that allows a user to select a location using an address or by clicking on a map. You can select a location by entering in an address and if the location is not right, then just click on the map and fix it up.

The "Geolocation HTML5" sub-module allows you to define your location using HTML5's geolocation API.

Now it's important to note that you can't use this module to store and display postal addresses.

For example, an address entered using the "Google Map" widget is not stored. It is geocoded into longitude and latitude coordinates then stored in the database.

There is, however, a possible patch for storing and displaying postal addresses in the issue queue.

Also, the module can't be used to display a map full of markers. For this, you'll need to use Get Locations or IP Geolocation Views & Maps.

In this tutorial, we'll use the module to store geolocation data on the article content type. We'll also use the "Geolocation Google Maps" sub-module for its widget and formatter.

Getting Started

Installing the module is very simple because there are no dependencies, just head over to the project page and download Geolocation Field.

Then, enable "Geolocation" and "Geolocation Google Maps".

Fig 1.0

If you use Drush, run the following two commands:

drush dl geolocation

drush en geolocation geolocation_googlemaps

Create Geolocation Field

Seeing as this module implements a field, the first thing we'll need to do is create a Geolocation field on the Article content type.

1. Go to Structure, "Content types" and click on "manage fields" on the Article row.

2. Enter Location into the Label field, select Geolocation as the field type and "Google Map" as the Widget.

Fig 1.1

If you can't see "Google Map" in the widget drop-down list, then make sure you have enabled the "Geolocation Google Maps" sub-module.

From the field edit page you can configure two options: "Scroll Zoom" and "Draggable Marker".

The "Scroll Zoom" option allows you to zoom in onto the map using the scroll wheel on a mouse. The "Draggable Marker" option, as you might have guessed, makes the map marker draggable.

For now, we'll just check the "Draggable Marker" option, then scroll down and click on "Save settings".

Fig 1.2

Configure Geolocation Field Formatter

Now that we have the field sorted, let's configure the field formatter. We'll use a formatter to display the location using a map and marker.

1. Go to the "manage display" page on the Article content type, and from the Format drop-down list select "Dynamic Google Map".

Fig 1.3

If you need to configure the map's width and height, then click on the cog wheel and change the formatter settings.

Fig 1.4

For now, just use the default formatter settings.

2. Now, go to Content, "Add content" and click on Article. Enter in a title and some body text, then scroll down to the Location field.

You should see a widget with a map and a text field.

Fig 1.5

If you want to select a location directly on the map, then just click on it.

Fig 1.6

If you need to enter in a specific address, then enter it into the text field and click on "Get location"

Fig 1.7

3. Once you've selected a location and saved the form, then on the article page you should see the location within a Google Maps formatter.

Fig 1.8

Multi-Value Geolocation Field

Be aware that if you increase the "Number of values" option on a Geolocation field, it won't group the locations into a single map. It'll display a separate map for each location.

Fig 1.9

If you want to display a group of markers on a map, then look at Get Locations or IP Geolocation Views & Maps.

Conclusion

One thing I really like about Geolocation Field is its simplicity. To use the module you do not have to install three other modules or spend time configuring options. Granted, it may not be as flexible as the other modules. But it's fairly easy to use and offers a lot out-of-the-box.

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 6 years and has successfully completed several large Drupal projects in Australia.

Connect: Twitter drupal.org LinkedIn App.net

Comments

Submitted by Daniel on

Hi! Great article about geolocations :) i'm having a problem using multiple maps and I hoped that you could help me out.

The first location I enter works great. But when I want to add a second location, the address is supplied with the previous address and the map is all grey. What can I have done wrong?

I'm using the geolocation field inside a multifield and this multifield is used on my contenttype with no limitations on how many of the multifield you can add.

Best regards,
Daniel Lundahl

ivan's picture

Submitted by ivan on

I don't know what the problem could be without spending time researching it. When you say multifield, are you referring to the module?

If so, then complex fields like Geolocation may behave unpredictably. You'll need to debug the issue further.

Submitted by Pathik Gandhi on

What i do if i want to display a Raw Text Address on my View Block?? Is there any way to do this??

ivan's picture

Submitted by ivan on

What do you mean by "raw". Coordinates? postal address?

Look at the other formatters.

Submitted by Pathik Gandhi on

I mean Full Formatted text Address. I have checked other formatters but there is not any formatter for full text address.

ivan's picture

Submitted by ivan on

You can't do it out of the box. You'll have to implement that functionality using custom code.

Add new comment