Maps on your website: how they work in Drupal 8 and 9

Imagine an ancient parchment map that shows the way to hidden treasures. Today, maps have moved to the digital format. Still, by adding them to your business website, you will discover some real treasures, too! Among them are an enhanced credibility for your brand, better user experiences on your website, interesting data visualization opportunities, and, of course, easier ways for your customers to find you in any place of the world.

If you have a Drupal website, you can enjoy some ready-made solutions for adding a map to your website. You will not need a map to find them! The Golems Drupal development team has prepared a collection of useful Drupal modules, as well as a simple step-by-step guide to adding a map to your Drupal 8 or Drupal 9 site.

Some ideas for maps on your website

The first and most obvious function of a map on your website is visualizing your physical address. It has become a good UX practice to include a business location map in the Contacts page or other pages as well. However, this is not all — you can also use maps for:

• visualizing your business achievements across the globe
• showing the locations where your biggest customers live
• sharing some valuable stats and facts for different regions
• helping buyers locate the chain stores on a commercial company’s website
• attracting tourists with places of interest on a travel or municipal website
• displaying properties on a real estate website
• showing the locations of upcoming events
• and much more (depending on your business)

Collection of Drupal 8 and 9 map modules

Check out these useful contributed Drupal modules, all of which are compatible with both Drupal 8 and Drupal 9.

Geolocation Field

The Geolocation Field is a Drupal module that provides a special field type to store each location as a pair of coordinates (latitude and longitude). It is also able to find addresses by name.

Locations can be displayed in a wide array of options — for example, using Drupal Views or various map providers (Google Maps, Google Static Maps, Leaflet, OpenStreetMap, Yandex.Maps, HERE Maps, and Baidu Maps). The extensive functionality of these providers is also available to the Drupal users through this module.

This Drupal module integrates with plenty of other Drupal modules such as the Search API Location, Geofield, Address, Integrated Demo, and more.

Geofield

The Drupal Geofield module is another great module for storing geographical data. It supports entering the coordinates both as Decimal Degrees and as Degrees-Minutes-Seconds. This Drupal module provides a text area for direct input in WKT (Well-Known Text), which is a text markup language that represents vector geometry objects on a map. It also features HTML5 Geolocation that asks the browser about the Drupal website user’s location.

It has a wide array of data output options (WKT, GeoJSON, KML, OpenLayers Map, and so on), as well as an impressive list of other Drupal modules it supports.

Geofield Map

One of the interesting modules based on the Geofield is the Geofield Map module that helps you add interactive Drupal maps. It offers a Geofield Map widget to geolocate entities in very intuitive ways. Its highly customizable Interactive Geofield Map formatter can render geographical data in a variety of options. A special Geofield Map View style plugin provides perfect Views integration by allowing you to render Views results on a Google map.

One of the new features of the 8.x-2.50 version is the integration with the Geofield Map Widget Search Address Functionality, which eliminates the need for a Google Maps API Key.

Geocoder

The Geocoder module brings the capabilities of the Geocoder PHP library to your Drupal website. The latter is a feature-rich library that provides an abstraction layer for geocoding operations and helps you build geo-aware applications. The Geocoder module automatically converts string addresses into coordinates and supports a variety of geographical data input formats.

Leaflet

The Drupal Leaflet module enriches your website with interactive, modern, and lightweight maps thanks to the integration with a JavaScript mapping library — Leaflet JS. This Drupal module offers a powerful field formatter to configure your maps, Views integration to display data on a map (with the sub module Leaflet Views submodule), an easy-to-use API to display geodata, and much more.

Simple Google Maps

The Simple Google Maps Drupal module is an easy-to-use tool to display a Google map on your website. It provides a field formatter for a plain text field that can be added to content types, taxonomy vocabularies, user accounts, or other fieldable entity types. Simple, one-line addresses are recognized by Google Maps and can be displayed as a static or a dynamic map, or just a link to Google Maps.

With this module, you do not need to get a Google Maps API key for dynamic maps and links, only with the “static map” option. Let’s use this simple as an example in our little step-by-step tutorial.

How to create a map with the Simple Google Maps Drupal module

1. Install the Simple Google Maps module on your Drupal website in any preferred way (Composer is not compulsory).
2. Add a “Plain text” field to the Drupal entity type for which you want to display a map (you will find it in the “Structure — Content types — [Your content type name] — Manage fields” tab of your Drupal admin panel). Give this field a name (e.g. “Location”) and save the result.
3. Go to Structure — Content types — [Your content type name] — Manage display. Under “Format,” change the format of the newly created field from “Plain text” to “Google Map from one-line address.”
4. You will then see a cogwheel to the right with more settings:
   -dynamic or static embedded map (remember you will need a Google API key for the second option)
   -width and height
   -zoom level
   -link to map
   -link text
   -map type (satellite, hybrid, or terrain)
   -and more
5. Add some test content items of the respective content type. In the “Location” field, you can simply enter a one-line address.
6. See how the content item now looks.
   You can always come back to “Manage display” and update the settings to your liking. For example, see what happens if you change the map type to “Satellite.”

Using Simple Google Maps in Drupal Views

You can use the module in Drupal Views and create highly customizable collections of content (in this case — maps):

1. Go to Structure — Views — Add view. Set it to show the content of the respective content type in a grid of fields.
2. Under “Fields,” find your Location field and add it to the View.
3. While configuring the fields, set its formatter to “Google Map from one-line address” and the Embed option to the “Include embedded dynamic map.” Configure the dimensions as desired.
4. Add a couple of items of content of the respective content type. Specify a simple address in the “Location” type for each of them. Check the View page to see them all together.

It looks better if we also add an image field, as well as add a label to the Location field in our Views (e.g. “Directions” or “Find it here”).

Get maps for your Drupal website!

Your maps can be totally different from the simple example above. If you wish, you can make them interactive, equipped with real-time data updates, perfectly styled to match your brand design, and so on. Whenever you need these or other Drupal services, the Golems team of talented Drupal geeks is here for you!