jump to navigation

How to embed a Google Map into a Joomla Page June 21, 2011

Posted by Tournas Dimitrios in Joomla-1.6.

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,  the next local Joomla meting  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.

This article will demonstrate two examples for embedding a Google map on your Joomla site . A good practice is to disable the WYSIWIG editor first , as the the default editor isn’t code friendly .

First example : Using IFrames

  • Go to the Google Maps website: maps.google.com and find the location that you’d like to use.
  • Click the ‘Link’ link in the top-right toolbar  notice the “Customize and preview embedded map” link below the second field. Click it.
  • 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.
  • Once you have your map size/location how you want it, copy the HTML code at the bottom of the page.
  • Once your WYSIWYG editor has been disabled , locate the article that the map will be embedded and paste the code ..  End …..

Second example : Using a Joomla plugin , this is my preferred method , as you can highly customize the ” look and feel ”  of the map . Although Joomla has over 40 plugins for creating a map , my preferred is googlemap2  . This plugin works almost ” out-of-the-box” is well documented with lot of code examples .

  • Download , install and enable the plugin .
  • Set your Google-API key in the plugin
    Extensions-> Plugin-Manager->Google-Maps->General-Settings tab ->GoogleMaps API Key
  • Once your WYSIWYG editor has been disabled ,embed the following code in the article where the map will be displayed . The code uses the lightbox map .
    {mosmap lightbox=’1’|lbxwidth=’900px’|lbxheight=’550px’|lbxcaption=’Map’|lbxzoom=’16’}
  • Explore many code examples .

As you see the ” mosmap directive enables the map in the article , posible atributes for the directive are :

{mosmap width='500'|height='400'|lat='31.052312'|lon='6.327142'|
ype='1'|overview='0'|text='sv DWO'| tooltip='DWO'|marker='1'|align

These attributes can be ” hand-coded” directly inside the directive or they can be configured as default options in the central configuration file of the plugin :

Admin-Panel -> extensions -> Plugin-Manager->plugin-Googlemap2->On the right side of the window many tabs are dedicated to configure the general “look and feel” of the plugin

As seen in the preceding screenshot , that displays the Mediterranean sea  , default controls can navigate the map .




1. google maps joomla - Search Yours - January 8, 2015

[…] How to embed a google map into a joomla page | tournas […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s