Google Map iFrame Setup Guide

Table of Contents

Output - 

The admin can configure Google map iframe from System Settings > General Settings > General tab > Basic sub-tab. 

Fig. 1: Google Map iframe Settings at Admin-end

The steps to be followed are: 

  1. Visit Google maps and search the place or address whose location is to be embedded. 

Fig. 2: Search Location on Google Maps

  1. Once the location has been searched, click on the ‘Share’ button provided on the left side navigation bar. 

Fig. 3: ‘Share’ pop-up menu

  1. A pop-up box will appear which will display two tabs. Click on the ‘Embed a Map’ tab as shown below. 

Fig. 4: ‘Embed a Map’ tab

  1. Click on the ‘Copy HTML’ button provided besides the iframe. The iframe will be copied. Paste this iframe in the dashboard settings as shown in figure 1


Output - 

Once the iframe has been saved in the admin panel, please visit the Contact Us navigation page at the front-end. The embedded map will be displayed below the contact details. An example of how the output looks is shown in the figure 5 below. 

Fig. 5: Map Displayed at Front-end

Please note that the Contact Us can be linked to headers and footers of the website from CMS > Navigation Management module on the admin panel.