How to Embed Google Map in Joomla 3.x

Sometimes you may find the difficulty in adding the Google maps in your Website. This problem occurs due to the settings of the editor, that you are using.

No need to worry guys, I have prepared this article, wherein you will learn to embed google map in Joomla 3.x , just go through the simple steps as explained below.

Steps to Embed Google Map in Joomla 3.x

Step 1: Login as an Administrator in your Joomla based website. Click on “System” option at the menu bar, and then select “Global Configuration” from the drop down list.

Step 2: Under “Site settings” section, Default Editor option is available, from where you can change your existing editor.

Set it as “Editor – None”, so that google map can be linked to your site easily.

Above two steps are necessary due to some security protocol, that are enabled in Joomla on its own. These protocol restricts iframes to link to your site. Now you may be thinking that, if I can enable the iframes from the settings of the existing editor such as Tiny MCE, JCE or any other iframe, but remember one thing, even if you allow the iframes in the respective editor, it will not work.

Now, go to the next step.

Step 3: In the new tab, open the Google maps and then, type in the search bar, the location which you want to locate in the google maps.

I have searched for the map of India.

Step 4: Then at the bottom right corner you”ll see “Settings or gear” button, click on it. A list of option get displayed choose the “Share or embed map” option.

Step 5: Click on “Embed map”, here you can set the size of the map by clicking an arrow next to small and then copy the code as highlighted below and paste it in a notepad.

Step 6: Now go to your Dashboard, Click on “Content” menu and then select the “Article Manager”.

Step 7: From the list of article you can select the one in which you want to link the google map.

For the demo purpose, I will create a new article and then will copy the code over there, so I have clicked on “New”.

Step 8: Give the “Title” to that article and paste the code that you have copied in a notepad to the “Content” section.

Once you are through with these steps, click on “Save & Close”.

Step 9: To check out whether the map is actually linked or not, reload you website and go to the content in which you have added the map.

In my website, it is successfully attached in the respective article as shown below.

NOTE:

Now, if you people want to switch to your previous editor then you can do, by just changing the settings in “Global Configuration”.