This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

✨ Vultr and Linode are back on Cloudways! VIEW PLANS→

How To Embed Google Maps Into Your Drupal Website

Updated on March 3, 2021

6 Min Read

Google Maps has become the defacto way of looking up a business or residential address. In a few taps, anyone could lookup any location or address in any city of the world. A business could greatly help all the visitors if they have Google Maps in Drupal site in their Contact page.

Embed Google Maps on Drupal

Adding Google Maps to Drupal is very easy. There are two ways in which you could accomplish this task:

  1. By using Embed Map
  2. By using Google Maps Module for Drupal

In this article I will discuss both ways. Let’s start with Google Maps Embed method.

Working with Embed Maps

First login with your admin credentials in Drupal and create a new basic page and give it a title

.Create Page in Drupal

Now go to Google Maps and search for location that you would like to provide in Embed Map.

Searching for Location in Google Maps

Once the location is viewed on Map click on share button and in the window that opens, click on Embed map tab. Copy the whole `<iframe>` code.

Google Maps iframe

image14

Now go back to new page that you created and paste this code. From the text format drop down, select Full Html and click on Save.

Google Maps iframe Code

 

Paste as Full HTML

Once the page is published, you will see the Map being shown on the page.

Google Maps in Contact Page

The method is quite easy. An important issue that if you wish to integrate different map locations on different pages, you have to add the embed code every time. To make this easy, we will add a Google Maps Drupal Module in which you only need to give the address of the location and the map will appear on that page or post.

Working with Google Maps Module

In this part, I will be using Simple Google Maps Module which is quite easy to work with. Let’s first install and run this module. You can download this module either through Drush Drupal CLI or through GUI. Let install the module via GUI.

  1. Login to Drupal site with admin credentials, click on Modules and then on Install new module.Install New Module
  2. Now go to Simple Google Maps module page and copy the download link of the tar.gz for Drupal 7.Download Simple Google Maps Module
  3. At the Install new module page, paste the link and click on Install.Install Simple Google Maps Module on Drupal
  4. Once the module is installed, click on modules. Find the newly installed module in Other tab, enable it and click Save Configuration.Configure Simple Google Maps module
  5. Once the Module is enabled, click on structure in the top menu and then on content type.Select Content Types under Structure
  6. Now on the Basic Page section click on the Manage FieldsSelect Managed Fields
  7. On the Manage Fields page, add a new Field Name (map address in this case) and it’s field type (text). Click Save and then Save Field Settings.Add New field
  8. Once the settings have been saved, click Manage Fields.Click Manage FieldsNow click Manage Display and make sure it is visible. In the format, select Google Map from one-line from the drop down.Click Manage Fields
  9. Now click the config button on the right.Click Config Button
    In the config area, you can control the default address and the size of the map that will be show on the page.Select Width and HeightFor now, let’s resize the map to 500 x 500. Once done, click Update and then Save.
  10. Now click Content in the menu and then on Add new content in the new window.In the new window, Click on Basic Page.Add Content
    Select Basic page
  11. Now give your page a title and scroll down to the field Map Address that is automatically added to your Basic Page creation page.In the text box, type the address which you would like to see on the map and then click Save.URL path settings
  12. When the page is created, you will find a Google Maps integration on the page with the address you have provided.Google Maps in Contact page

You can always resize the Map by going to the Content Type -> Manage Fields -> Display Setting.

Now whenever you want to show a Map on a specific page just give an  address in the Map Address box and the latest map will be shown on that page.

Summary:

In this tutorial, you learned how to Embed Google Maps in Drupal through two different methods. The first method is easier where you just need to insert the embed map in the Content Body. The second method is a bit technical which uses Drupal Google Maps module to add Google Maps to Drupal pages.

If you are looking to speed up your Drupal website with Google AMP, here’s a very easy-to-follow tutorial of the whole process by us on “Drupal hosting“:  Speed Up Drupal Websites With Google AMP.

Frequently Asked Questions

Q. How can I embed a Google Map on my Drupal website?

Embedding a Google Map on your Drupal website can be done using the Google Maps Embed API. You’ll need to generate an API key, create an iframe code, and paste it into your Drupal content.

Q. Do I need a Google account to embed Google Maps?

Yes, you’ll need a Google account to create an API key and generate the necessary embed code for your Drupal website.

Q. Can I customize the appearance of the embedded map?

Yes, you can customize the appearance of the embedded map by adjusting settings in the Google Maps Embed API. You can choose the map’s size, zoom level, default location, and more.

Q. Are there any modules available in Drupal to help with embedding maps?

Yes, Drupal offers modules like “Geolocation” and “GMap” that can simplify the process of embedding Google Maps on your website. These modules provide additional features and customization options.

Q. Can I embed multiple Google Maps on different pages of my Drupal website?

Yes, you can embed multiple Google Maps on different pages of your Drupal website. Each map will require its own API key, and you can customize their appearance and locations independently.

Q. How can I ensure that the embedded map is responsive and mobile-friendly?

The Google Maps Embed API automatically ensures that the embedded map is responsive and mobile-friendly. It adjusts its size and layout based on the user’s device and screen size.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Ahmed Khan

Ahmed was a PHP community expert at Cloudways - A Managed PHP Hosting Cloud Platform. He is a software engineer with extensive knowledge in PHP and SEO. He loves watching Game of Thrones is his free time. Follow Ahmed on Twitter to stay updated with his works.

×

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Want to Experience the Cloudways Platform in Its Full Glory?

Take a FREE guided tour of Cloudways and see for yourself how easily you can manage your server & apps on the leading cloud-hosting platform.

Start my tour

CYBER WEEK SAVINGS

  • 0

    Days

  • 0

    Hours

  • 0

    Mints

  • 0

    Sec

GET OFFER

For 4 Months &
40 Free Migrations

For 4 Months &
40 Free Migrations

Upgrade Now