How to Add Responsive Google Maps in Joomla Articles

Adding Google maps in Joomla articles is not hard as you can make use of extensions instead of coding everything. However, if you want the map to be responsive for mobile devices, you need to be careful in selecting an extension.

According to our experience and testing, Google Maps by Reumer is one of the best choices that help you insert adaptive Google maps with ease. Being actively maintained, this extension gains full scores in most user reviews.

This tutorial discusses how to use the extension to add maps that perfectly match your site design and mobile devices.

Google Map in Article

Install Google Maps by Reumer

Visit the download page of the extension and download the latest release for your Joomla version. Then, log into the admin panel of your site and go to Extensions > Extension Manager. You are now located on the “Install” page. Under the “Upload Package File” tab, select the file you downloaded before and click on the “Upload & Install” button.

Install Google Maps by Reumer

Waiting for a few seconds, you will get a message telling that the plugin is installed successfully.

Configure the Extension

Go to Extensions > Plugin Manager. In the long lists of plugins installed on your site, find the one named “System – Google Maps”. By default, the plugin is disabled.

Google Maps Plugin

The plugin includes a large number of settings that you can customize according to your needs. Also, there is a detailed description which offers guides about how to use the plugin to showcase maps in content. But first of all, enable the plugin by changing the status to “Enabled”. You can also define who can access the plugin.

Enable Google Maps Plugin

After enabling the plugin, you are now able to configure some general settings. Actually, the defaults settings are good to use, but if you have your own preference for code, brackets and Google Maps API, you can make changes there.

Google Maps Settings

Insert Google Maps in Joomla Articles

Using the plugin to add a Google map in an article is easy and quick. Firstly, go to Content > Article Manager > Add a New Article.

Add a New Article

You can add a map anywhere in the article content by inserting one line of code which is introduced in the description of the plugin. There are multiple parameters that can be changed based on your requirements: the width, height, latitude, longitude, map type, tooltip, zoom, text and more.

To make a test, we insert the following command into the content area of an article. Note that the code must be in one line.

{mosmap width='500'|height='300'|lat='34.0522300'|lon='-118.2436800'
|zoom='9'|text='Los Angeles'}

In the code above, we set the width of the map to a fixed figure. In this way, we can adjust the size of the map as we want. This works fine if the visitor uses a PC, but the map won’t show correctly on mobile devices.

Google Map Test

How to make the map responsive

To make a responsive map, you have to set a percentage to the width instead of an absolute number. The percentage tells the plugin to adjust the size of the map according to the visitor’s screen. Remember that the height still needs a fixed number.

Using the code below, we got a responsive Google map in the article. See any difference?

{mosmap width='100%'|height='300'|lat='34.0522300'|lon='-118.2436800'
|zoom='9'|text='Los Angeles'}

There is one thing that needs special attention. If you are using a responsive Joomla template, the percentage for the width must be 100%.

Google Maps by Reumer is a powerful extension whose features are definitely not limited to those discussed above. Just try more to make the most out of it. Hope this tutorial is helpful.