How to add map to Joomla website

Creating a map in Joomla can help you visually represent locations, provide directions, or enhance your website's content. You can integrate maps into your Joomla site using various methods, such as extensions or embedding services like Google Maps. This article provides a detailed guide on how to create and display a map in Joomla using two common methods: using a Joomla extension and embedding a Google Map.

how to add map to joomla website

Method 1: Using a Joomla Extension

Using a Joomla extension is one of the easiest ways to integrate a map into your site. Several extensions are available for creating maps. We suggest you our simple in use yet full of all needed functions Joomla Map.

Choose and Install a Map Extension

  • For this guide, we'll use Ordasoft Joomla Map extension as an example, so download it from Joomla Map page.
  • Log in to your Joomla administrator backend.
  • Navigate to "System" > "Extension".
    • how to add map install extension how to add map install extension
  • Upload the extension package file and click "Upload & Install."
    • how to add map upload extension how to add map upload extension

Configure the Map Extension

  • After installation, go to "Modules" > "New".
    • how to add map modules how to add map modules
    how to add map new module how to add map new module
  • Select the map module type
    • how to add map location map module how to add map location map module
  • Enter the map title and description.
    • how to add map module settings how to add map module settings
  • Set the map dimensions (width and height) and the default zoom level.
    • how to add map module width height how to add map module width height
  • Input the default location's coordinates (latitude and longitude) or use the search function to find the location.
    • how to add map module coordinates how to add map module coordinates
  • Customize the map appearance and controls, such as map type, marker icons, and zoom controls.
  • Assign the module to a position on your template.
    • how to add map module position how to add map module position
  • Once you've configured the map and added markers, click "Save" or "Save & Close" to save your settings.
  • To display the map on your website, you can either create a module or embed the map in an article.

Read more about how to Create Map with Joomla CCK.

Method 2: Embedding a Google Map

Another simple method to add a map to your Joomla site is by embedding a Google Map directly into an article.

Create the Map on Google Maps

  • Go to Google Maps.
  • Search for the location you want to display.
  • Click on the "Share" button and then click on "Embed a map."
    • how to add map share google code how to add map share google code
  • Choose the map size and copy the provided HTML embed code.

Embed the Map in a Joomla Article.

  • Log in to your Joomla administrator backend.
  • Go to "Content" > "Articles" and select the article where you want to embed the map or create a new article.
    • how to add map articles how to add map articles
  • Switch to the HTML mode in the editor by clicking the "Toggle editor" button or using the HTML icon.
  • Paste the HTML embed code from Google Maps into the article content where you want the map to appear.
    • how to add map insert code how to add map insert code
  • Save the article and check the frontend of your website to ensure the map displays correctly.
    • how to add map source code how to add map source code

IMPORTANT: In Joomla version 4-5, if you're having trouble inserting an iframe into an article, it's likely due to Joomla's content filtering settings which are designed to prevent potentially harmful code from being added to your site.

Allow Iframes in Editor

Joomla's default editor (like TinyMCE or the new Joomla Editor) may strip out iframes by default. You can adjust the settings to allow iframes.

For TinyMCE Editor:

  • Go to "System" > "Global Configuration".
  • Under the "Site" tab, look for "Default Editor" and try another editor from the list.
    • how to add map configuration editor how to add map configuration editor
  • Also, try navigate to "Text Filters" and change "Filter Type" to "No Filter". Only for Super Admin
    • how to add map text filters how to add map text filters
  • Click "Save & Close".
  • Navigate to "Content" > "Articles" and open the article you want to edit.
  • Switch to the "Code" view (often a button with '<>' or a similar icon) in the editor.
  • Insert your iframe code directly into the HTML.

Creating a map in Joomla can significantly enhance your website's user experience by providing valuable location-based information. Whether you use a Joomla extension or embed a Google Map, the process is straightforward and can be customized to fit your website's design and functionality needs. By following these detailed instructions, you can easily add interactive maps to your Joomla website, making it more engaging and informative for your visitors.