Mapping in Drupal 8 with GeoLocation Field

One of the ones that seems fairly stable and has a good set of features without being overly complex is the Geolocation Field module. We've used it on a site recently with great success, and in this blog post we will cover the fundamentals of how to use this module.

Add a Geolocation Field to your Content

After enabling the module, the first step you need to do is add a geolocation field to the entity you want to associate a location with. Locations are stored as latitude and longitude value pairs on the entity. This can be any entity type, but for the purposes of this we chose to create a Location content type and add a geolocation field to that.

The default configuration for new geolocation fields is to provide latitude and longitude text boxes on the node edit form. This may be suitable for some sites, but we needed the ability for the user to enter in an address which is then geocoded, and to be able to adjust the pin location if the calculated co-ordinates were incorrect (as is often the case with Irish addresses).

Luckily, the geolocation field module provides this functionality out of the box. On the "manage form display" page in the entity configuration, you can choose the type of input widget the editors will use. The "Geolocation Google Geocoder" is the option you need. You may want to configure your Google Maps API key at admin/config/services/geolocation if using this option however.

Similarly, the module also provides a number of options to choose from on the "manage display" page. In our case we chose to display the location on a Google map, rather than outputting the latitude and longitude values.

After selecting the "Geolocation Google Map" display output, you can then customise its display. For example, you can choose between a Road Map view and Satellite Map view, set the map zoom level, disable/enable various map controls and dimensions.

You can now create your Location content and associate a latitude and longitude with each. Below is a screenshot of what the edit form can look like. Here we have manually entered in an address and the Google geocoder has calculated the latitude and longitude from that. Note, it's not possible to drag and drop the pin to a different location (which caught me out a few times), instead clicking anywhere else on the map will move the marker there.

Create a View

After adding all of our mapped locations, we needed the ability to display them all on one Google Map view. To do this we created a new view of our content, and in the view format settings, we choose "Geolocation - Common Map". In order for this view format to work, you will need to add the geolocation field latitude and longitude co-ordinates to the view and a title for each location (which will appear in the popup). You can also optionally add an image field (make sure to choose the file uri output here) to the view which will be used as a marker for each location. This allows you to customise the marker per node.

Similar to the manage display settings on the node, you can also configure the map controls, zoom level, and so on. One other setting worthy of mention is the "JSON styles" setting. This allows you to embed a JSON encoded styles array to customise the look and feel of the rendered map. This is incredibly powerful and allows you to have a custom Google Map style that matches the design and colour palette of your site. Styled Google maps are easy to define using services such as Snazzy Maps.

The Results

Not everything we needed was quite there so we contributed a number of patches back to the module to make this happen, all of which have now been added to the module, yay!

• https://www.drupal.org/node/2734981
• https://www.drupal.org/node/2735061
• https://www.drupal.org/node/2734643
• https://www.drupal.org/node/2747251

Using the Geolocation Field module, we were able to map all our Location nodes and produce a map as can be see at the top of this article. If you want to see it in action, visit Glanbia Nutritionals.

Other Modules

At the time of launch, the only other modules that were available were Styled Google Map and Simple Google Maps. However, neither of these supported all the features we needed. Since then, a beta version of the Leaflet module has also been released. Have you used any of these or other mapping modules in Drupal 8? We'd love to hear what you thought of them. Why not let us know by leaving a comment below?