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:
- Visit Google maps and search the place or address whose location is to be embedded.
Fig. 2: Search Location on Google Maps
- Once the location has been searched, click on the ‘Share’ button provided on the left side navigation bar.
Fig. 3: ‘Share’ pop-up menu
- 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
- 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.