The OpenStreetMap Field

Updated 04 Jun, 2020

The OpenStreetMap custom field lets you easily add a map to your site by selecting any place on the map by either typing an address, entering coordinates or dragging over a marker.

How to add a OpenStreetMap Custom Field to Joomla! Articles

To add a OpenStreetMap Field on Joomla Articles, go to Content > Articles > Your Article > General Tab > Select ACF - OpenStreetMap Type.

Advanced Custom Fields OpenStreetMap Field Settings

As you can see from the screenshot above, after selecting the "ACF - OpenStreetMap" type, the settings for this field will appear.

Let's see what each option does.

Name Description
Name The name will be used to identify the field. Leave this blank and Joomla will fill in a default value from the title.
Label The label of the field to display.
Description A description of the field that will be displayed in the label tooltip.
Required Is this a mandatory field?
Default Value Set the default value of the field
Front-end
Map Width Set the width of the map.
Map Height Set the height of the map.
Zoom Set the zoom of the map.
Marker Image Replace the default marker image by uploading an image of your choice.
Marker Tooltip Enable to set and display a tooltip upon clicking the marker. If left blank, the tooltip will not appear.
Map Scale Select the scale unit that appears at the bottom left side of the map.
Back-end
Show Address Input Set whether to display the Address text input to enter your own addresses.
Default Map Coordinates Enter the default latitude and longitude coordinates separated by comma.

Usage

Once you are in your Article's Edit screen, choose the "Fields" Tab to see the OpenStreetMap field as you can see in the screenshot below.

Advanced Custom Fields OpenStreetMap Usage

You can now select a place from the map, enter your Address or coordinates in the search field to find a location.

Adding a tooltip

After you have set the marker location, you can set the marker tooltip on the Marker Tooltip to display information about the location you have selected to your users that click on the marker.

Typing an address in the search box

While you type in the search box, a list of addresses will be presented to you that have the most relevance based on your search. After you find your desired address, you can click on it to re-center the map.

Advanced Custom Fields OpenStreetMap Usage Example

Frontend Display

Take a look at the screenshot below to see how it could be displayed in your frontend.

Advanced Custom Fields OpenStreetMap Frontend

How the tooltip appears when you click on the marker

Once you have set a tooltip on the marker, you can view it by clicking the marker. Here is how it looks:

Advanced Custom Fields OpenStreetMap Frontend

Frequently Asked Questions

Do I need an API Key to use the OpenStreetMap Field?

The OpenStreetMap Field uses a completely free library called OpenLayers which utilizes the OpenStreetMap data and lets you display an map you desire without the need of an API.