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.