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.
Adding Google Maps to Drupal is very easy. There are two ways in which you could accomplish this task:
- By using Embed Map
- 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
.
Now go to Google Maps and search for location that you would like to provide in Embed Map.
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.
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.
Once the page is published, you will see the Map being shown on the 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.
- Login to Drupal site with admin credentials, click on Modules and then on Install new module.
- Now go to Simple Google Maps module page and copy the download link of the tar.gz for Drupal 7.
- At the Install new module page, paste the link and click on Install.
- Once the module is installed, click on modules. Find the newly installed module in Other tab, enable it and click Save Configuration.
- Once the Module is enabled, click on structure in the top menu and then on content type.
- Now on the Basic Page section click on the Manage Fields
- 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.
- Once the settings have been saved, click Manage Fields.Now click Manage Display and make sure it is visible. In the format, select Google Map from one-line from the drop down.
- Now click the config button on the right.
In the config area, you can control the default address and the size of the map that will be show on the page.For now, let’s resize the map to 500 x 500. Once done, click Update and then Save. - Now click Content in the menu and then on Add new content in the new window.In the new window, Click on Basic Page.
- 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.
- When the page is created, you will find a Google Maps integration on the page with the address you have provided.
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.
Inshal Ali
Inshal is a Content Marketer at Cloudways. With background in computer science, skill of content and a whole lot of creativity, he helps business reach the sky and go beyond through content that speaks the language of their customers. Apart from work, you will see him mostly in some online games or on a football field.
