Having a map integrated into a website is a huge advantage for business owners, especially for those with brick-and-mortar locations. This helps your customers to find you easily. Google Maps is probably the most popular mapping service and having it embedded into your website will definitely be an advantage for your business.

Drupal has amazing possibilities to help you solve this issue. Whether you do this by using Drupal 8 modules or find other alternative technique, the process is going to be simple and easy. We’ve prepared a guide for you on how to implement Google Maps Data into your Drupal 8 website in different ways.

Methods to integrate Google maps into your Drupal 8 site

Embed Maps

The first way to include Google Maps on your website is to embed them. It is maybe the easiest and the least time consuming way to have Google Map Data shown on your website.

How to embed Google Maps to your Drupal 8 website

The first step is to choose a location you want to show on your website. To do this, you should visit Google maps and find a place you’d like to provide.

How to embed Google Maps to your Drupal 8 website

After a searched location appears, press the Share button. In the opened window choose “Embed Map” and copy the whole <iframe> code.

How to embed Google Maps to your Drupal 8 website

Then you should create a basic page and give it a title.

How to embed Google Maps to your Drupal 8 website

The next thing to do is to insert a copied code into a created page. Note that it will work properly only if you choose Full HTML in the drop down Text format. After that, don’t forget to save changes.

How to embed Google Maps to your Drupal 8 website

The Map will be shown on your website as soon as the page is published.

How to embed Google Maps to your Drupal 8 website

Simple Google Maps Module

Simple Google Maps module is really easy to manage. The main advantage is that you only need to give the address of a place and a map will appear on your website. The module may be installed in different ways. Let’s look at how to downlaod and install it.

How to integrate Google Maps to your Drupal 8 website with Google Maps Module

Log in into your Drupal website as an admin. Go to Modules and click on Install new module.

integrate Google Maps to your Drupal 8 website with Google Maps Module

Find Simple Google Maps module on Drupal.org and copy the link for download tar.gz for Drupal 8.

integrate Google Maps to your Drupal 8 website with Google Maps Module

Go to Install new module page and enter the copied link to Install from URL field and press the Install button.

integrate Google Maps to your Drupal 8 website with Google Maps Module

After module installation, find this one, enable it and save changes.

integrate Google Maps to your Drupal 8 website with Google Maps Module

The module is enabled and the next step is to create a new field to show a map. Go to Structure Content type. After that, add a new content type, and give it a name.

integrate Google Maps to your Drupal 8 website with Google Maps Module

As soon as a content type is created, go to Manage fields and add a new field with type Text (plain). Then save changes.

integrate Google Maps to your Drupal 8 website with Google Maps Module

After the settings are saved, go to Manage fields, click Manage display and check whether it is displayed on your page. Select Google Map on the one-line format from a drop-down.

integrate Google Maps to your Drupal 8 website with Google Maps Module

To manage the sizes of the map and addresses shown on your page by default, go to the config area (press the button on the right).

integrate Google Maps to your Drupal 8 website with Google Maps Module

The next step is to add a node. Click on Content → Add content and choose the content type you’ve added. Insert the title for your page. After that, in the newly created field enter an address you’d like to show on your map and save changes.

integrate Google Maps to your Drupal 8 website with Google Maps Module

After the page is created, Google Maps will be displayed on it.

integrate Google Maps to your Drupal 8 website with Google Maps Module

Geolocation Field module

Geolocation Field module is probably the most frequently used module when we talk about Google Maps integration. In short, it brings special field types for storing information about geolocation. Moreover, it has extended possibilities and enables mapping, connecting it with the desired content types.

How to integrate Google Maps to your Drupal 8 website with Geolocation Field module

The first step is to install a module. You can use the method described above.

After installing it, all you need to do is to add the Geolocation field to the content type. For this, go to Manage fields while creating a new content type and choose the Geolocation field type.

integrate Google Maps to your Drupal 8 website with Geolocation Field module

The next thing to manage is how the map will be viewed. Go to Manage from display page and choose the Geolocation Google Geocoder from the drop-down menu.

integrate Google Maps to your Drupal 8 website with Geolocation Field module

After that, go to Manage display and choose Geolocation Google Maps API - Map from a drop-down in address field. Then a map will be displayed on your page.

integrate Google Maps to your Drupal 8 website with Geolocation Field module

After a node is created, the map will be shown.

We’ve described 3 ways to integrate Google Maps Data into your Drupal 8 website. Thanks to the simplicity and flexibility of Drupal CMF, it is quite easy to perform. In case you don’t want to do it on your own or have troubles with Google Map Data integration into your Drupal 8 website, let us know and our Drupal maintenance company will assist you.