Tassos Marinos Developer of Joomla Extensions

ACF Google Maps - Add a Google Map Field in Joomla

Updated 03 Jul, 2023

The Google Map custom field gives you the ability to display a Google Map video at your frontend just by filling out the ID of the Google Map video.

This custom field will be deprecated and we advise you to switch over to ACF - Map that combines OpenStreetMap, Google Maps, and Bing Maps.

How to add a Google Map Custom Field to Joomla! Articles

The Google Map field provides you the way to select the width, the height and the zoom of the Google Map which will be displayed at your frontend.


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?
Map Width Set the width of the map
Map Height Set the height of the map
Zoom Set the zoom for the map


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


In this textbox you can type in the coordinates which are going to be used as a center for the Google Map you are interested in.

Get the coordinates of a place

  • Open Google Maps.
  • Right-click the place or area on the map.
  • Select What's here?
  • At the bottom, you’ll see a card with the coordinates.


Frontend Display


Setting up your API key

Once you create the a Google Map Field, you will be shown with a warning on the top of the screen to remind you to set up your Google API key.


Simply click the Set API Key now link and you will be redirected to the Plugin's page to set up your API key.

To get an API key:

  1. Go to the Google Cloud Platform Console.
  2. Click the project drop-down and select or create the project for which you want to add an API key.
  3. Click the menu button and select APIs & Services > Credentials.
  4. On the Credentials page, click Create credentials > API key.
    The API key created dialog displays your newly created API key.
  5. Click Close.
    The new API key is listed on the Credentials page under API keys.
    (Remember to restrict the API key before using it in production.)

All is left is to grab the API key you just created and enter it in the plugin's page below.


Frequently Asked Questions

How can I override the layout of "ACF - Google Maps" custom field?

To override the "ACF - Google Maps" custom field, read here: How to override the "ACF - Google Maps" custom field.