Using the Map Module (Google Maps, OpenStreetMap, Bing Maps)

The Smile Pack Map Widget is the all-in-one mapping solution for Joomla that seamlessly integrates with Google Maps, OpenStreetMap, and Bing Maps. Create single or multiple marker maps easily. Display interactive maps via standard modules, shortcodes, custom fields, or popups for enhanced conversions. Manage markers with a modern UI. Automatically populate markers via ACF Map Field integration. Enjoy the advantage of reducing the number of map extensions on your site – no need for separate solutions for different map types.

This article provides insights into the functionality of the Smile Pack Map Widget and guides you through integrating a map module into your Joomla! site.

TABLE OF CONTENTS

• How to add a map module to Joomla
  • How to add a Google Maps module to Joomla
  • How to add a Bing Maps module to Joomla
  • How to add an OpenStreetMap module to Joomla
  • Customize the center of the map
  • Using the map module editor
  • Transfer map markers between sites
  • Populate map markers via an ACF Map field
  • Limit the number of markers allowed
  • Module settings table
• How to display a map anywhere using a shortcode
• How to display a map as a custom field
• How to display a map in a popup
• Setting up API Keys
  • Google Maps
  • Bing Maps
  • OpenStreetMap
• Frequently asked questions

How to add a Map Module to Joomla

To start creating a map module, and add it to your Joomla Website, follow the steps listed below:

Step 1: Head over to Content > Site Modules and press the New button. On that page, search for "Smile Pack", and select the Smile Pack - Map Module.

Step 2: Select the module position and click on the Markers tab to start adding your locations.

Step 3: Once on the Markers tab, start populating your map with your desired locations. Once your map is ready, hit the Save button.

Step 4: Your map module is ready! View it on your site.

How to add a Google Maps module to Joomla

To add a Google Maps module, follow the steps listed in How to add a Map module to Joomla, and on Step 2, set the Provider to Google Maps, and click on the Save button.

Your map will now appear using Google Maps.

How to add a Bing Maps module to Joomla

To add a Bing Maps module, follow the steps listed in How to add a Map module to Joomla, and on Step 2, set the Provider to Bing Maps, and click on the Save button.

Your map will now appear using Google Maps.

How to add an OpenStreetMap module to Joomla

To add a OpenStreetMap module, follow the steps listed in How to add a Map module to Joomla, and on Step 2, set the Provider to OpenStreetMap, and click on the Save button.

Your map will now appear using OpenStreetMap.

Customize the center of the map

The map by default will automatically set both the map center and zoom based on the number of markers added to the map, and how far they are between each other. This means that no map center or zoom is required to be set. We call this feature Fit Bounds, and it can be found within the map module settings > Module > Map Center setting.

However, you can change this behavior, center the map around a specific address, and even set the map zoom as desired. To do this, enter your module settings > Module > Map Center and put it to Custom. You can type a custom address or coordinates and set the map zoom.

Using the map module editor

In this section, you will read how to add, edit, delete, and import/export markers.

Add Markers

The first thing you'll need to do in the map editor is add markers to specific locations. Smile Pack - Map Module provides multiple ways to add markers.

Method 1: Using the sidebar

If your map is empty, you can add your first marker by going into the sidebar and clicking the Add your first marker button.

Once the button is clicked, you will be presented with a modal to enter a new map location.

You can now add a new marker by filling in the form details:

• Location Address: Type an address or coordinates (latitude, longitude).
• Coordinates: You can customize the address latitude and longitude.
• Marker Title: Set the marker title.
• Marker Description: Set the marker description.

Method 2: Using the Search bar

Another way to add a map marker is by typing an address or coordinates in the search bar at the top of the map editor.

Once you have typed in an address or coordinates, it will autocomplete and display the available locations to choose from.

You can now select which location to add to your map as a marker. Note that the marker is temporarily added on the map and you'll need to click Add to Map to save it.

Method 3: Using right-click

The last method of adding a new map marker is the mouse right-click. Locate where you'd like to add a marker on the map, right-click your mouse, and click on Add Marker.

The marker is now visible on the map. Note that the marker is temporarily added on the map and you'll need to click Add to Map to save it.

Editing Markers

Once you have added your markers, you may need to customize their address/location or marker label and description. To do so, you can use two different ways.

Method 1: Using the sidebar

To edit a marker, hover over the marker you're interested in and click the edit icon on the right.

You should now see the modal to customize the marker. Once you have customized your marker, you can save it by clicking the Save button.

Method 2: Using the marker tooltip

You may edit a marker by locating it on the map, clicking it to reveal the tooltip, and clicking on the edit icon.

You should now see the modal to customize the marker. Once you have customized your marker, you can save it by clicking the Save button.

Delete Markers

Deleting all markers

To delete all markers from a map, go to the sidebar > click on the checkbox next to the search bar. This will select all markers.

Then, click on the trash icon next to it, allowing you to confirm the deletion of all markers.

Your map should now be empty. Click Save to save the module.

Deleting a marker

You may use either the sidebar or the marker tooltip to delete a specific marker. To delete a marker via the sidebar, locate the marker you'd like to delete from the list, hover over the right side of the marker, and click the trash icon.

To delete a marker from the marker tooltip, find the marker you'd like to delete from the map, click on it, and then click on the trash icon.

Transfer map markers between sites

If you have markers on a map that you'd like to use on another map module on the same or different site, the don't worry, the provided import/export markers functionality provided helps you do just that. Below, you will find how to import and export map markers by following a few steps.

Importing Markers

The Smile Pack - Map Module makes importing markers into your map easy using either an address name or coordinates. To start, click on the three dots on the sidebar and click "Import Markers".

You can now type in an address or coordinates, one per line, and click the Import button to import them into your map.

Exporting Markers

Similarly to importing markers, Smile Pack - Map Module provides an easy way to export your markers and later import them into another Smile Pack - Map Module.

To export your markers, go into the sidebar > click on the three dots > Click on Export Markers.

You will now have a modal containing all markers' coordinates.

You can copy the coordinates later to import them into another Smile Pack - Map Module instance.

Populate map markers via an ACF Map field

Do you have an ACF Map field populated across different Joomla articles, users, and contacts, and would you like to include all those markers in a single map? The Map Module allows you to do just that! To get started, follow the steps below:

1. Go into your Map Module > Markers > Add Marker > Select "Populate via ACF Map Field".
2. Select the Joomla Component where you've configured the ACF Map field.
3. Select the ACF Map field under the "ACF Map Field" dropdown.
4. Finally, use the available filters to fine-tune the Joomla items (articles, contacts, users) to get the ACF Map field markers.

Your map will now be automatically pre-populated with all markers set in the selected ACF Map field in the component items that you have selected.

Limit the number of markers allowed

Would you like to limit the number of markers on your map? Do you have an editor or another user group that must add a specific number of markers on your map? The Map Module allows you to set a limit on how many markers can be added on a map.

To set a limit, go into your Map Module > Markers > Maximum Markers > Set the maximum markers limit.

Settings Table

Below, you can find all settings available in the Map Module.

How to display a map anywhere using a shortcode

Smile Pack will soon provide a shortcode to display a map anywhere on your Joomla website. Whether it is an OpenStreetMap, Google Maps, or Bing Maps, we got you covered. You'll also be able to customize it fully using the shortcode settings.

Interested in the Map Shortcode? Get notified.

How to display a map as a custom field

To display your map using a Joomla! custom fields, you can use Advanced Custom Fields, which provides a plethora of custom fields, including the Map custom field, allowing you to embed an OpenStreetMap, Google Maps, and Bing Maps map across your Joomla Articles, Users, Contacts, and 3rd-party components.

Read more here: ACF Map - Add an OpenStreetMap, Google, and Bing Maps in Joomla.

How to display a map in a popup

To create a popup that embeds a map, you can use EngageBox, which helps you create high-converting popups that help you increase your sales. There are a variety of ways to embed a map in your popup:

Method #1: Do you have an existing map module? Click here to create a map module. You can include it in your EngageBox popup using the Joomla! built-in shortcode {loadmoduleid ID}. Replace the ID with the Module ID.

Method #2: Use ACF Map custom field. Within your EngageBox popup, you can use the Smart Tag {article.field.NAME --id=ID} to embed the ACF Map of a specific article in your popup. Replace NAME with the ACF Map custom field Name, and ID with the Article ID, where the ACF Map was set from.

Method #3: Use shortcode (Coming Soon).

Setting up API Keys

Some providers and map types require an API Key for the map to appear on your site. Below, we will see how to grab an API key for each option.

Get OpenStreetMap Satellite API Key

To use the Satellite map type when using the OpenStreetMap provider, you must first grab a free API Key from ArcGIS.

Go to the ArcGIS Developer Dashboard by first logging in.

Upon logging in, you should be presented with your API Key in the middle of the screen.

You can now copy and paste the API Key into System > Configuration > Smile Pack > OpenStreetMap ArcGIS API Key field.

Get Google Maps API Key

To use the Google Maps provider, you must first grab a Google Maps API Key. In the tutorial below, we'll see step-by-step instructions on creating a Google Maps API Key. You may read more on Google's documentation: Get a Google Maps API Key

Step 1: Go to the Google Maps Platform > Credentials page and either create a new project or select an existing project.

Step 2: After selecting your project, click on CREATE CREDENTIALS and then click on API Key. Your API Key is now being generated and a new modal will appear containing it, allowing you to copy it.

Step 3: Once the API Key has been generated, a new modal will appear with the actual API Key. You can now copy it to your clipboard by clicking the icon next to the API Key. Don't worry, you'll be able to copy it again, whenever you desire.

Step 4: Go to System > Configuration > Smile Pack > Google Maps API Key and paste your API Key.

Get Bing Maps API Key

To use the Bing Maps provider, you must first grab a Bing Maps API Key. In the tutorial below, we'll see step-by-step instructions on creating a Bing Maps API Key. You may read more on Bing Maps documentation: Get a Bing Map API Key

Step 1: Go to the Bing Maps Dev Center page > My Account > My Keys. Then click on "Click here to create a new key." to get started creating your Bing Maps API Key.

Step 2: Enter a name for your API Key, select "Website" under Application Type, and finally click Create. Your API Key is now being created.

Step 3: Once the page refreshes, your API Key appears in the list. Click on Show key to view your API Key.

Once you click the "Show key" button, the API Key will appear. Copy the API key in order to paste it into your Smile Pack Configuration settings.

Step 4: Go to System > Configuration > Smile Pack > Bing Maps API Key and paste your API Key.

Frequently Asked Questions

Can I embed this module in an article?

The map module can appear anywhere on your site, even on your Joomla! Articles, using the shortcode {loadmoduleid ID}, where ID is the module's ID, and placing it anywhere you desire on your Joomla! Article.

Can I use this module as a custom field?

Absolutely! You can read more on how to create a map field here: How to display your map using custom fields

Can I display this module in a popup?

Definitely. You can read more on how to display a map module in a popup here: How to display your map in a popup