Embedding an iFrame in to your Joomla Website

Recently I was working on a Joomla Website for our university. There I wanted to add a Google Map to the footer. So I tried to do it with a CustomHTML module. This was the iFrame I wanted to add.

So I went to Extensions > Module Manager and created a new module with the type of CustomHTML and added my code for the iFrame and selected the position of the module and saved it and went to the site. The map was not there.

What happened was Joomla Stripped out everything and the iFrame was removed. So no map on the website. But fortunately there is a workaround for this.

What you need to do is simple. First go to Extensions > Module Manager to open up Module Manager.

And from there Click on the New Module button to create a new module.

And you will get a popup windows to select the type of module you wanna create. What we want to do is to create a Wrapper. So select the wrapper from the popup windows.

The wrapper would be viewed as an iFrame at any location we want the wrapper to be positioned. You can select where it is shown using the Position setting from the module settings. Then you need to take ONLY the URL from the Google Maps iFrame you want to use. And then paste the URL in the Basic Options – URL field.

src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3947.487195748568!2d80.50291299999999!3d8.353639!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3afc8a63d9e8ff6d%3A0x8e08bdb2ad12375c!2sFaculty+of+Applied+Sciences!5e0!3m2!1sen!2slk!4v1420092128987"

You can specify the width and height of the iFrame and other settings such as Auto Height, Frame Border etc. from Basic Options. You can set the Menu Assignments where you want this iFrame to show up from the Menu Assignment section. And the Save your changes.

And folks that is it :) Now go to the page where you set the iFrame and see it in action. I have set the iFrame (Google Map) in the Footer of each page. And now you can see the Google Map is properly displayed in the Footer (or your position of choice in your site).

In this scenario I have used a Google Map, but you can use any thing that you want to embed using an iFrame.

Well that is neat and solves my problem. And hope it will help you out as well.  :) So once again, HAPPY NEW YEAR people. Stay with me for more posts in 2015.