The "ACF - Map" custom field enables the creation of interactive maps on your website. It offers seamless integration with OpenStreetMap, Google Map, and Bing Map, allowing you to incorporate location-based information effortlessly. This custom field provides flexibility in terms of map markers, customization options for info windows, dimensions, and map types. With the "ACF - Map" custom field, you can enhance your website by incorporating dynamic and engaging maps to showcase relevant geographical data.
- How to add a Map Custom Field to Joomla! Articles
- The Map Field Settings
- Field Usage
- Map markers manipulation
- Frontend Display
- Frequently Asked Questions
How to add a Map Custom Field to Joomla! Articles
To use the "ACF - Map" custom field, create a new Joomla! custom field and select the "ACF - Map" type, as seen below.
The Map Field Settings
Below, you can find a list of the available options of the Map Field.
| Name | Description |
|---|---|
| Provider | Select the map provider to use. Available providers:
|
| Map Type | Select the map type to use. Options vary from Road, to Satellite, to Light, and Dark modes, depending on the selected provider. |
| Map Scale | Select whether to show a scale on the map. Available options:
|
| Front-end | |
| Map Width | Set the map width for desktop/tablet/mobile devices. |
| Map Height | Set the map height for desktop/tablet/mobile devices. |
| Map Center | Select how to center the map. Available options:
|
| Set Map Center | If a custom map center is selected, we can define a location, where the map will be centered around. |
| Zoom Level | Define the custom map zoom level. |
| Enable Info Window | Set whether to enable map marker info windows to appear when clicking a marker. By default, the selected map marker address will appear. However, you can customize both the label and description of each map marker. |
| Marker Image | Override the default marker image and select a custom image. |
| Back-end | |
| Default Map Coordinates | Set the default map coordinates that will be used whenever editing an empty map. This is rather useful when you always want to focus around a specific area on the map to add your markers so you won't have to find the same map location again and again. |
Field Usage
Once you are in your Article's Edit screen, choose the "Fields" Tab to see the Map custom field as you can see in the screenshot below.
Map markers manipulation
How can I add a map marker?
To add a map marker, there are two ways.
1) Click the Add Marker button.
This will open a modal allowing you to enter either an address or coordinates. Then press "Save" to add the marker on the map.
2) Right-click on the map, and click the Add Marker option from the context menu.
A marker will be added at the location on the map.
How can I edit a map marker?
To edit a map marker, there are two ways.
1) Hover over the map marker on the markers list next to the map and click on the pencil icon, on the right side of the address.
2) Right-click on a marker on the map, and click on Edit Marker on the context menu that will appear.
Once you click the "Edit Marker" button, a modal will appear where you will be able to change the markers location, as well as set a custom label and description that will be used on the marker info window.
How can I delete a map marker?
To delete a map marker, there are two ways.
1) Hover over the map marker on the markers list next to the map and click on the trash icon, on the right side of the address.
2) Right-click on a marker on the map, and click on Delete Marker on the context menu that will appear.
Upon clicking the "Delete Marker" button, the map marker will automatically disappear from the map.
Frontend Display
Take a look at the screenshot below to see how it could be displayed in your frontend.
OpenStreetMap
Google Maps
Bing Maps
