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.
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.
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".
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.
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".
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".
If you need to configure the map's width and height, then click on the cog wheel and change the formatter settings.
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.
If you want to select a location directly on the map, then just click on it.
If you need to enter in a specific address, then enter it into the text field and click on "Get location"
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.
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.
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.
Like what you see?
Join our free email list and receive the following:
- Discover our best tutorials in a 6 part series
- Be notified when free content is published
- Receive our monthly newsletter