---
title: "Map Field - Advanced Custom Fields"
description: "Help visitors find your business location with an interactive map. Choose between Google Maps and OpenStreetMaps."
url: "https://www.tassos.gr/docs/advanced-custom-fields/fields/map"
date: "2026-04-06T09:43:11+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/index.php?option=com_content&view=category&layout=blog&id=24&Itemid=1088) / [ Advanced Custom Fields ](https://www.tassos.gr/index.php?option=com_content&view=category&id=44) / [ Fields Types ](https://www.tassos.gr/index.php?option=com_content&view=category&id=64)

#  Map Field

##  Help visitors find your business location with an interactive map. Choose between Google Maps and OpenStreetMaps.

 Map Field Has More Options in Pro

 Additional features are locked in the free version. Upgrade to Advanced Custom Fields Pro to get the most out of it.

 [ Unlock all features ](https://www.tassos.gr/joomla-extensions/advanced-custom-fields/subscribe)

The "ACF - Map" custom field enables creating interactive maps on your website. It offers seamless integration with OpenStreetMap, Google Maps, and Bing Maps, allowing you to incorporate location-based information effortlessly. This custom field provides flexibility regarding map markers, and 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.

## [Setting up Map Field](#setup)

To get started using the Map Field, create a new custom field and select *ACF - Map*.

![acf map field settings](https://www.tassos.gr/images/acf-map-field-settings.png)

Once you have selected the *ACF - Map* Field, you will be presented with all available options to configure the custom field.

### [General](#setup_general)

#### [Provider](#provider)

Select which provider will display the map on the front end. The available providers are:

- OpenStreetMap
- Google Maps
- Bing Maps

**OpenStreetMap ArcGIS Key**

If you desire to use the satellite map type of the OpenStreetMap provider, you must set your OpenStreetMap ArcGIS Key within the **Fields - ACF Map** system plugin.

**Google Maps Key**

To use the Google Maps provider, you must set your Google Maps API Key within the **Fields - ACF Map** system plugin.

**Bing Maps Key**

To use the Bing Maps provider, you must set your Bing Maps API Key within the **Fields - ACF Map** system plugin.

#### [Map Type](#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](#map-scale)

Select whether to show a scale on the map and which scale to use. The available options re:

- Metric
- Imperial

### [Front-end](#setup_frontend)

#### [Map Width](#map-width)

Set the map width for desktop/tablet/mobile devices.

#### [Map Height](#map-height)

Set the map height for desktop/tablet/mobile devices.

#### [Map Center](#map-center)

Select how to center the map. The available options are:

- Custom: Define a custom zoom level.
- Fit Bounds: Center around the map markers.

#### [Set Map Center](#set-map-center)

If a custom map center is selected, we define a custom location, which will be used as the map center.

#### [Zoom Level](#zoom-level)

Define the map zoom level.

#### [Enable Info Window](#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.

#### [Maximum Markers](#maximum-markers)

Define the maximum allowed markers to be added on the map.

#### [Marker Image](#marker-image)

Override the default marker image and select a custom image.

### [Back-end](#setup_backend)

#### [Show Sidebar](#show-sidebar)

Set whether to display the sidebar on the map.

#### [Default Map Coordinates](#default-map-coordinates)

Set the default map coordinates used when 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.

**Initial Zoom Level**

Set the default zoom level for the map editor when editing a Map field without any markers.

### [Conditional Logic](#conditional_logic)

Using Conditional logic, you can fine-tune when your custom field appears on your site, by specifying some criteria, such as when the user is viewing your site from a mobile device, whether they are viewing a specific page if Google referred them, and more! The possibilities are endless.

When editing a custom field, you can configure when your custom field will appear by going into the Display Conditions tab.

![Advanced Custom Fields Display Conditions](https://www.tassos.gr/images/acf-setup-display-conditions.png)

Once on the Display Conditions tab, you can configure when your custom field appears. Leaving the condition logic empty, tells Advanced Custom Fields to display the custom field site-wide.

## [Manipulate Markers](#manipulate_markers)

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

### [Add Markers](#add-markers)

The first thing you'll need to do on the map editor is to add your own markers on specific locations on the map. ACF - Map provides multiple ways to add markers.

#### [Using the sidebar](#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.

![Adding your first marker](https://www.tassos.gr/images/acf-mapeditor-add-first-marker.png)

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

![New Marker Modal](https://www.tassos.gr/images/acf-mapeditor-add-marker-popup.png)

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.

#### [Using the Search bar](#using-the-search-bar)

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

![Add New Marker From Search bar](https://www.tassos.gr/images/acf-mapeditor-add-marker-searchbar.png)

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

![New Marker Search bar Results](https://www.tassos.gr/images/acf-mapeditor-add-marker-searchbar-results.png)

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

To save it, click on the **Add to Map** button within the marker tooltip.

![Save Temp Marker](https://www.tassos.gr/images/acf-mapeditor-add-marker-save-temp-marker.png)

#### [Using the mouse right-click](#using-the-mouse-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**.

![Add New Marker Mouse Right-Click](https://www.tassos.gr/images/acf-mapeditor-add-marker-right-click.png)

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

To save it, click on the **Add to Map** button within the marker tooltip.

![Save Temp Marker](https://www.tassos.gr/images/acf-mapeditor-add-marker-save-temp-marker.png)

### [Edit Markers](#edit-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.

#### [Using the Sidebar](#using-the-sidebar-1)

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

![Edit Marker From Sidebar](https://www.tassos.gr/images/acf-mapeditor-edit-marker-sidebar.png)

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.

![Edit Marker Form](https://www.tassos.gr/images/acf-mapeditor-edit-marker-modal.png)

#### [Using the Marker Tooltip](#using-the-marker-tooltip)

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

![Edit Marker From Tooltip](https://www.tassos.gr/images/acf-mapeditor-edit-marker-tooltip.png)

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.

![Edit Marker Form](https://www.tassos.gr/images/acf-mapeditor-edit-marker-modal.png)

### [Delete Markers](#delete-markers)

#### [Delete all markers](#delete-all-markers)

To delete all markers you've added on the map, go to the sidebar > click on the checkbox next to the search bar. This willich will select all markers.

![Select all markers from sidebar](https://www.tassos.gr/images/acf-mapeditor-delete-markers-select.png)

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

![Confirm deletion of all markers](https://www.tassos.gr/images/acf-mapeditor-delete-markers-confirm.png)

Your map should now be empty.

![Empty Map Editor](https://www.tassos.gr/images/acf-mapeditor-empty-map.png)

#### [Delete a specific marker](#delete-a-specific-marker)

To delete a specific marker, you may use either the sidebar or the marker tooltip.

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.

![Delete marker from sidebar](https://www.tassos.gr/images/acf-mapeditor-delete-map-marker-sidebar.png)

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.

![Delete marker from tooltip](https://www.tassos.gr/images/acf-mapeditor-delete-map-marker-tooltip.png)

### [Import/Export Markers](#import-export-markers)

#### [Importing Markers](#importing-markers)

ACF - Map makes importing markers into your map easy using either an address name or coordinates.

To get started, click on the three dots on the sidebar and click "Import Markers".

![Import markers](https://www.tassos.gr/images/acf-mapeditor-import-markers.png)

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

![Import markers modal](https://www.tassos.gr/images/acf-mapeditor-import-markers-modal.png)

#### [Exporting Markers](#exporting-markers)

Similarly with importing markers, ACF - Map provides an easy way to export your markers and later import them into another ACF - Map custom field.

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

![Export markers](https://www.tassos.gr/images/acf-mapeditor-export-markers.png)

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

![Export markers modal](https://www.tassos.gr/images/acf-mapeditor-export-markers-modal.png)

You can copy the coordinates later to import them into another ACF - Map instance.

## [API Keys](#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](#get_osm_arcgis_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](https://developers.arcgis.com/dashboard/) by first logging in.

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

![Get your ArcGIS API Key](https://www.tassos.gr/images/osm_arcgis_api_key.png)

You can now copy and paste the API Key into the ACF Map plugin > OpenStreetMap ArcGIS API Key field.

### [Get Google Map API Key](#get_googlemap_key)

To use the Google Maps provider, you must first grab a Google Maps API Key. To do so read Google's documentation: [Get a Google Maps API Key](https://developers.google.com/maps/documentation/javascript/get-api-key)

### [Get Bing Map API Key](#get_bingmap_key)

To use the Bing Map provider, you'll need to get an API key. To do so read more on Bing Map documentation: [Get a Bing Map API Key](https://learn.microsoft.com/en-us/bingmaps/getting-started/bing-maps-dev-center-help/getting-a-bing-maps-key)

## [Use Cases](#use-cases)

The Map Field can be used with any component that supports the Joomla! Fields such as the Articles (com\_content), User (com\_user), and the Contact (com\_contact) component. Now that we've seen how to create an *ACF - Map* custom field, let's see a use case.

### [How to add a Map Custom Field to Joomla! Articles](#how_to_add_a_map_custom_field_to_joomla_articles)

In this use case, our website provides business listings, and we'd like to display a map with all branches for each business on our Joomla articles. To do so, we need to add all business branches to the ACF - Map field on the article's editing page in the backend, and website visitors can see our map on the front end.

### [Step 1: Create a new Map field](#step-1-create-a-new-map-field)

![ACF map field settings](https://www.tassos.gr/images/acf-map-field-settings.png)

Click to save the field to return to the same page where, now, you can see two new setting groups.

### [Step 2: Set the map provider](#step-2-set-the-map-provider)

We must first select which provider to use to display our map. The default one is OpenStreetMap. However, you may also use Google Maps and Bing Maps. Furthermore, you can also specify the map type (road, satellite) and the map scale (imperial or metrics).

![ACF - Map Field Settings Select Provider](https://www.tassos.gr/images/acf-mapeditor-map-settings-provider.png)

### [Step 3: Set the map dimensions](#step-3-set-the-map-dimensions)

Next, we need to define the map dimensions. We can specify the map dimensions for desktop, tablet, and mobile devices. Also, we can define whether to center all markers around a specific area on the map or center the map around our markers.

![ACF - Map Field Settings Set Dimensions](https://www.tassos.gr/images/acf-mapeditor-map-settings-1.png)

### [Step 4: Add markers to the map](#step-4-add-markers-to-the-map)

After properly configuring our Map field, we should go to the article's editing page and add markers. Head over to Joomla Content and click to edit the article you want to attach to the map. In most cases, the Map Field should be in the Fields tab. Once there, you can start adding markers.

If you haven't added any markers, yet, you can read more on adding markers here: [Add markers](#adding_markers).

![ACF - Map Added Markers](https://www.tassos.gr/images/acf-mapeditor-map-markers-added.png)

If the field is displayed disabled in the form, and you're not allowed to upload files, you probably don't have the right permissions to edit the field's content. To fix it, you must set the Edit Custom Field Value option to Allowed in the Permissions tab in the Field settings and the Content component configuration page.

![Joomla Gallery Custom Field](https://www.tassos.gr/images/acf_gallery_field_case_step9.png)

You’re now done! Once you’ve finished adding your markers, save the article and go to the front end to enjoy your new map.

![ACF Map Frontend](https://www.tassos.gr/images/acf-mapeditor-map-display.png)

## [To-do list](#todo_list)

Advanced Custom Fields is regularly updated with new features and bug fixes. The roadmap is quite packed with new features, and enhancements. Find out the upcoming new features by visiting the [Roadmap](https://www.tassos.gr/joomla-extensions/advanced-custom-fields/roadmap) page.

## [Frequently Asked Questions](#faq)

### [Can I hide the sidebar?](#can-i-hide-the-sidebar)

There are two ways to hide the sidebar. The first one is by going into the ACF - Map custom field settings and disabling the "Show sidebar" toggle, and the second is by going into the sidebar and clicking the toggle sidebar button found on the top right.

### [How do I search for a specific marker?](#how-do-i-search-for-a-specific-marker)

The sidebar contains a search bar that allows you to search for specific markers that match your criteria.

### [Can I override the field's layout?](#can-i-override-the-field-s-layout)

To override the custom field layout, consult the following documentation pages: - [How to override the custom field layout](https://www.tassos.gr/joomla-extensions/advanced-custom-fields/docs/how-to-create-an-alternative-layout-for-joomla-custom-fields).
- [How to create an alternative layout for Advanced Custom Fields](https://www.tassos.gr/joomla-extensions/advanced-custom-fields/docs/how-to-create-an-alternative-layout-for-advanced-custom-fields).

### [Is there any list with all available Joomla Fields?](#is-there-any-list-with-all-available-joomla-fields)

Advanced Custom Fields consists of over 30 custom fields, and you can find more about each one by clicking here: [Advanced Custom Fields Collection](https://www.tassos.gr/joomla-extensions/advanced-custom-fields/docs/fields-collection).

### [How to add Custom CSS to your Joomla Custom Fields](#how-to-add-custom-css-to-your-joomla-custom-fields)

You can easily add Custom CSS to your pages when a Joomla custom field appears, using ACF Options. You can read more here: [How to add Custom CSS to your Joomla Custom Fields](https://www.tassos.gr/joomla-extensions/advanced-custom-fields/docs/add-custom-css).

### [Can I use it with YooTheme?](#can-i-use-it-with-yootheme)

All Advanced Custom Fields are YooTheme compatible and can be used with YooTheme Pro Dynamic Content, meaning you can create pages in YooTheme that used as source, any custom field created by Advanced Custom Fields. You can read more here: [How to use Advanced Custom Fields with YooTheme Pro Dynamic Content ](https://www.tassos.gr/joomla-extensions/advanced-custom-fields/docs/yootheme-pro-dynamic-content-integration).

### [I have more questions. Can you help?](#i-have-more-questions-can-you-help)

If you have further questions after reading this documentation, we suggest you look into our general [Frequently Asked Questions](https://www.tassos.gr/joomla-extensions/advanced-custom-fields/docs/frequently-asked-questions-acf) page for Advanced Custom Fields, and if your question is still not answered, contact us by clicking [here](https://www.tassos.gr/contact).

 Map Field Has More Options in Pro

 Additional features are locked in the free version. Upgrade to Advanced Custom Fields Pro to get the most out of it.

 [ Unlock all features ](https://www.tassos.gr/joomla-extensions/advanced-custom-fields/subscribe)

 Last updated on Aug 18th 2025 10:08

## Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://www.tassos.gr"
        },
        {
            "@type": "ListItem",
            "position": 2,
            "name": "Home",
            "item": "https://www.tassos.gr/docs"
        },
        {
            "@type": "ListItem",
            "position": 3,
            "name": "Advanced Custom Fields",
            "item": "https://www.tassos.gr/docs/advanced-custom-fields"
        },
        {
            "@type": "ListItem",
            "position": 4,
            "name": "Fields Types",
            "item": "https://www.tassos.gr/docs/advanced-custom-fields/fields"
        },
        {
            "@type": "ListItem",
            "position": 5,
            "name": "ACF Map - Add an OpenStreetMap, Google, and Bing Maps in Joomla",
            "item": "https://www.tassos.gr/docs/advanced-custom-fields/fields/map"
        }
    ]
}
```

```json
{
    "@context": "https://schema.org",
    "@type": "Article",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://www.tassos.gr/docs/advanced-custom-fields/fields/map"
    },
    "headline": "ACF Map - Add an OpenStreetMap, Google, and Bing Maps in Joomla",
    "image": {
        "@type": "ImageObject",
        "url": "https://www.tassos.gr/"
    },
    "publisher": {
        "@type": "Organization",
        "name": "Tassos",
        "logo": {
            "@type": "ImageObject",
            "url": "https://www.tassos.gr/https://www.tassos.gr/media/brand/logo-text.png"
        }
    },
    "author": {
        "@type": "Person",
        "name": "Stergos Zamagias",
        "url": "https://www.tassos.gr/docs/advanced-custom-fields/fields/map"
    },
    "datePublished": "2017-05-06T00:41:56+03:00",
    "dateCreated": "2023-12-04T11:50:19+02:00",
    "dateModified": "2025-08-18T10:24:33+03:00"
}
```

```json
{
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
        {
            "@type": "Question",
            "name": "Can I hide the sidebar?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "There are two ways to hide the sidebar. The first one is by going into the ACF - Map custom field settings and disabling the "Show sidebar" toggle, and the second is by going into the sidebar and clicking the toggle sidebar button found on the top right."
            }
        },
        {
            "@type": "Question",
            "name": "How do I search for a specific marker?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "The sidebar contains a search bar that allows you to search for specific markers that match your criteria."
            }
        },
        {
            "@type": "Question",
            "name": "Can I override the field's layout?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "To override the custom field layout, consult the following documentation pages: How to override the custom field layout. How to create an alternative layout for Advanced Custom Fields."
            }
        },
        {
            "@type": "Question",
            "name": "Is there any list with all available Joomla Fields?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "Advanced Custom Fields consists of over 30 custom fields, and you can find more about each one by clicking here: Advanced Custom Fields Collection."
            }
        },
        {
            "@type": "Question",
            "name": "How to add Custom CSS to your Joomla Custom Fields",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "You can easily add Custom CSS to your pages when a Joomla custom field appears, using ACF Options. You can read more here: How to add Custom CSS to your Joomla Custom Fields."
            }
        },
        {
            "@type": "Question",
            "name": "Can I use it with YooTheme?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "All Advanced Custom Fields are YooTheme compatible and can be used with YooTheme Pro Dynamic Content, meaning you can create pages in YooTheme that used as source, any custom field created by Advanced Custom Fields. You can read more here: How to use Advanced Custom Fields with YooTheme Pro Dynamic Content ."
            }
        },
        {
            "@type": "Question",
            "name": "I have more questions. Can you help?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "If you have further questions after reading this documentation, we suggest you look into our general Frequently Asked Questions page for Advanced Custom Fields, and if your question is still not answered, contact us by clicking here."
            }
        }
    ]
}
```