Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

How to Add Google Maps to Drupal 8

Parent Feed: 
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.

Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web