Joomla Tutorials and Blog Posts

How to Embed a Google Map in a Joomla Article

January 3, 2011 | Written by Nick Savov

One of our students asked us how one can find Google code for a map of their location in order to embed a mag in an Article, so we created this tutorial for him. This tutorial will walk you step by step through the process.

 

Get the Google Map HTML to Embed in Website

tutuploadstutuploadsmedia_1294085691036.png

Go to http://maps.google.com/ and type in the location and then click on "Search Maps". In this example, we typed in "Atlanta, GA," however, you can put the full address of your desired location.

Click on Link.

 

tutuploadstutuploadsmedia_1294085930540.png

Copy the code in the "Paste HTML to embed in website" area.

If you desire to customize the map, such as changing the width or height, the zoom level, etc, then click on "Customize and preview embedded map".

 

Paste the Google Map Code in Your Article

tutuploadstutuploadsmedia_1294088256339.png

Next, go to your article and paste the code within the editor.

Note: It is best to place the code within the html/code section if you are using a WYSIWYG editor such as Tiny MCE, JCE, etc, or you can simply not use a WYSIWYG editor and paste it in. If you paste it within the actual WYSIWYG editor, the code can be reformatted by the editor. If the map does not appear, this is likely the reason.

 

tutuploadstutuploadsmedia_1294088345041.png

Save your changes.

 

Check Your Map on the Front End

tutuploadstutuploadsmedia_1294088821850.png

Looks like everything worked.

If it did not work for you, then make sure you are pasting the code in the html/code area or try not using any WYSIWYG editor. Also, if you're using Joomla 1.6 or great make sure that you don't have filtering for the super admin, go to article manager >> options >> filtering >> super users >> set it to no filtering.

 


 

 


To sign up for complete classes and support

 

Comments  

 
#1 Saira Ali 2011-02-08 14:42
Hi thanks for this useful tutorial!
 
 
#2 iowawebco 2011-02-08 19:07
Hi Saira,

You are welcome! :)

Kind regards,
Nick
 
 
#3 Emma 2011-06-07 13:32
Thanks, this helped alot!
 
 
#4 jackibar 2011-07-05 12:58
This was SO helpful, Nick - thanks! I need a little help, though... I'm seeing the following:

View Larger Map (a link)

and not the map itself. What am I missing?! I am using JCE and switched to code view when I pasted in the code...
 
 
#5 iowawebco 2011-07-05 13:03
Hi Jacki,

When you're getting the code from Google, make sure you copy the "paste HTML to embed" not simply the "Paste link".

See the second image in the tutorial.

Let me know if this does or doesn't help.

Kind regards,
Nick
 
 
#6 iowawebco 2011-07-05 13:03
You're welcome, Emma! :)

Kind regards,
Nick
 
 
#7 jackibar 2011-07-05 13:58
Yes, Nick - I'm using that code. I've tried turning from code view back to WYSIWYG and back to plain, I've tried turning OFF the editor completely to (NONE) - and still when I paste the code in and hit "Save" for the article, it is stripping off the "iframe" part of the code and leaving only where the code says:

View Larger Map
 
 
#8 jackibar 2011-07-05 13:58
Oops - keep forgetting it strips it here, too!! Anyway - where the code begins with the < small > and gives the link to View Larger Map - it strips the iframe part above that no matter what I do!!

I'm using Joomla 1.6, BTW.
 

Add comment


 


To sign up for complete classes and support