How to embed a Google Map into a Joomla Page

Written by James Hafner | July 02, 2009 | (10)

Hi, How To Joomla fans! My name is James and I'm the newest member of the Cory Webb Media team. I've been a long-time fan of How To Joomla and it's an honor for me to be able to contribute to the excellent resources that are here for Joomla! beginners and experts alike. For my inaugural article, I will show you how to embed a Google Map into a Joomla page.

A map is a great way to visually show your visitors the location of something--be it a business address, the location of a great restaurant, where you went on your ski trip, etc. Having a visual clue of where something is reinforces the location you're trying to provide in a way that a simple address doesn't. When it comes to businesses, the more likely someone is to remember where your business is located, the more likely they are to visit.

Using Google Maps

Google Maps actually has a pretty slick way to get a map into a page quickly. There are two manual methods of getting the map you want:

First Method

1. Go to the Google Maps website: maps.google.com.
2. Search for an address or business.
3. When you click the 'Link' link in the top-right toolbar, you'll be presented with two options: "Paste link in email or IM", and "Paste HTML to embed in website". Copy everything in the second option's text field to copy the HTML code needed to paste into an article.

Second Method

1. Go to the Google Maps website: maps.google.com and find the location that you'd like to use.
2. Click the 'Link' link in the top-right toolbar again, but this time, notice the "Customize and preview embedded map" link below the second field. Click it.
3. A new page will open that will let you customize the size and exact location in the map. Drag the map around to show and highlight exactly what you are pointing to.
4. Once you have your map size/location how you want it, copy the HTML code at the bottom of the page.

Embedding the Map

Once you've copied your HTML code, we need to paste it somewhere useful. One option would be to drop it directly into a page such as the 'Contact' page. Before we get to editing any articles, make sure you Disable your WYSIWYG editor. Here are some instructions on doing that. Once your WYSIWYG editor has been disabled, find and click on the article you'd like to add the map to via the Article Manager. Without your WYSIWYG editor enabled, you'll likely just see a bunch of HTML code. Paste the code you copied from Google Maps into your content (you may need to use trial and error to place it in a specific spot on your page) and save your article. That's all there is to it!

Other Solutions

Being the industrious community that it is, Joomla! developers have come up with a number of different ways to get a map into a Joomla! page. Here are some different solutions:

• Webmap+ - A commercial plugin that makes embedding maps easy while having many handy features.
• Googlemaps Plugin - allows an easy way to embed a map into your articles easily. Tons of configuration options. Be sure to check out the 'Demo' page.
• GoogleMap Component - This recently-updated component offers loads of customization options. It also has a very active community of users and developers.

Those are just a few of the solutions out there for Joomla! users to take advantage of. Check out the Maps category on the Joomla! Extensions Directory for lots more.

Questions/Comments

If you've got a question about embedding a map in a Joomla! site, or have suggestions for other cool ways to get a map into a Joomla! site, feel free to post a comment.

Trackback(0)

TrackBack URI for this entry

Comments (10)

Subscribe to this comment's feed

best solution for me
written by depika, July 04, 2009

I have embedded many times google maps to joomla, especially in the contact us page.

The best solution for me is Googlemaps Plugin. The creator provides also geat support and answers all the emails he gets.

• 
• +0
• 
• 

Easy and useful
written by Chrisa, July 07, 2009

Great article, easy and useful for everyone, even for me . Thanks

• 
• +0
• 
• 

Great Tutorial
written by Webagentur, July 08, 2009

There are several solutions for Joomla and Google Maps but i like yours. It's easy and everybody can integrate it on Joomla.

• 
• +0
• 
• 

web editor new
written by janet , July 21, 2009

I have a pdf file of a map of the US and I want to our customers to be able to click on a state and for the sales rep in that area to pop up? I am very new to joomla and i need all the help I can get. I have a boss that needs things done at a snap. Can someone help?

• 
• +0
• 
• 

IT Exams.
written by Martin, July 24, 2009

Your posts of this blog are very much useful and admirable. I really enjoy this post that you have written about Google mapping and its various solutions. In fact, i am searching for information about certification tests and find this blog. I really appreciate all your efforts. Well done.

• 
• +0
• 
• 

hey Thanks buddy!
written by i33t.com, July 27, 2009

I couldn't figure out why on earth it was such a problem getting Google Maps to work on Joomla, and luckily Joomla users are quick to develop solutions and help others in need! Thanks for sharing!

• 
• +1
• 
• 

Thanks
written by ramy, August 13, 2009

Thanks aloooooot

• 
• +2
• 
• 

Google Maps and Rokbox
written by Richard, September 30, 2009

Recently, I ran across someone elses how-to and it is remarkably easy. You have to have the rokbox plugin. I needed to have more than 40 google maps for all of the American Legion Posts in Erie County, NY. They have a county Legion Post and wanted maps so members of the county post could easily find other posts in thier district. The solution was to create a list with all of thier addresses and to simply embed a map link next to each address. Using rokbox tags outside the embedded google link, the map would then open in a lightbox. Users can even use the google buttons to shrink, expand, etc. the map without having to navigate away from the page they were on.

• 
• +2
• 
• 

Thanks Again !
written by Yaron, November 01, 2009

Did it already based on your explanation ...
Forgot all about it and than i found it again.

Works every time

• 
• +0
• 
• 

...
written by content management system, December 17, 2009

Suppose the best solution of this tip is the possibility to set up the precise custom size of google map embedding. But I'd really enjoyed the possibility to define the circle google maps cuts, not only rectangle

• 
• +0
• 
• 

Write comment