How to Add Google Maps to Drupal 8

| Drupal
Add static Google Maps to Drupal 8

In this tutorial, I will explain how to use the Drupal 8 Simple Google Maps module to add a map to your website.

Google has made some the recent changes to the API requests and this tutorial will clarify the process.

1

Now that we have the Simple Google Maps module installed, we need to add a field to the content. In this example, I will use the Article content type, but you can go ahead and use any content type.

  • Go to Structure > Content types > Article > Manage fields.
  • Add a field from the dropdown for new fields. Select the "Text (plain)" option.
  • Give a "Label" to the field.

2

On the manage display for the content type, we need to set the field format from Plain text to Google Map from single one line address.

3

Now we need to edit the default settings for the format. Select Include embedded static map 

4

To get a Google Map API key we need to go https://developers.google.com/maps/documentation/static-maps/ 

5

Create a project that the API will be attached to.

6

7

After you have Enabled the API, you will be given the code to paste into your Drupal Simple Google Maps module. Enter the API key and update the field settings, Save the content type.

Now that we have a key for Google Maps and the content type, we need to test that it works.

  • Go to Content > Add content > Article.
  • Add an address to the google address field we created.

8

  • Save the article.
  • You should see that the map is displayed as below.

9

 


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.