Introduction

Do you want to add Google Map to Joomla 4 Articles to bring your visitor more clear information related to the topic you are showcasing? If this is everything you need, the blog today will be useful for you. So, we will show you 2 methods to embed the map to your site. You can select the most suitable one and do it for your site via some simple steps below. Now, let’s discover the blog now!

How to add Google Map to Joomla 4 Articles

Add Google Map to Joomla 4 Articles manually

This is the simplest and easiest way for you to add a Google map to Joomla 4. All you need to do is use the embed link from the Google Maps website and add it to your Joomla 4 articles.

First of all, simply go to the Google Map site, then enter the location you need. After that, click on the Share button.

Add Google Map To Joomla 4 Manually 1

There will be a popup for you to send a link or embed a map, so just press on the Embed a map tab. Then, click on the Copy HTML to copy the link.

Add Google Map To Joomla 4 Manually 2

Next, let’s log in to your Joomla 4 admin dashboard. After that, you need to switch the editor to CodeMirror so that you can add the HTML to the articles easily.

Now, you just need to go to Content -> Articles, then choose the article you want to showcase the map or create a new one.

Add Google Map To Joomla 4 Manually 3

Because the editor now is CodeMirror, you can directly add the link you copy before in the article text. Don’t forget to save or update the article after finishing.

Add Google Map To Joomla 4 Manually 4

Finally, let’s visit your site to check the result. You will see a Google map clearly appears on the article.

Add Google Map To Joomla 4 Manually 5

Embed Google Map to Joomla 4 by using an extension

If you don’t want to insert and display a Google map manually, you can also use Google Maps – Advanced Custom Fields to do that. Firstly, you need to download and install this extension on your Joomla 4 site. After installation, let’s get the API key from Google.

Get a Google API key

Now, let’s simply access Google Cloud Platform Console. After that, press on the Select a project button to choose the project you created before or the New Project button if you want to generate a new one. In our example, we will create a new project.

Add Google Map To Joomla 4-6

After clicking on the New Project,  you need to fill out the project name as well as browse the location. Then, select the Create option to generate a new project.

Add Google Map To Joomla 4-7

Now, in the Maps APIs and Services tab, let’s choose Maps JavaScript API that will support you to create maps for your site.

Add Google Map To Joomla 4-8

In the next step, let’s go to the Credentials -> Create Credentials.

Add Google Map To Joomla 4-9

Now, an API key created popup will appear to give you an API key, then click on Restrict Key.

Add Google Map To Joomla 4-10

In the API restrictions tab, you just need to choose the Restrict Key option, then select Maps JavaScript API. Don’t forget to save all your settings.

Add Google Map To Joomla 4-11

Finally, you simply need to get the API key by copying it in the Key column.

Add Google Map To Joomla 4-12

Generate a Google map custom field to Joomla! articles

Now, you need to create a new article field. Let’s open Content -> Fields -> New.

Add Google Map To Joomla 4-13

Simply enter the title, then select the ACF – Google Map for the Type option. You can also get more information about the vital option by visiting custom fields in Joomla 4 here.

Moreover, there will be a message to show that you need to set the API key. So, let’s click on the Set API Key now.

Add Google Map To Joomla 4-14

All you need to do is fill out the Google Maps API key you copy before. Finally, you just need to save the plugin.

Add Google Map To Joomla 4-15

Add Google Map to Joomla 4 Articles

Now, let’s go to the Google Maps website, enter the place you need. Then, right-click on the red locator icon on the map and copy the number sequence in the first line.

Add Google Map To Joomla 4-16

Next, simply go back to your admin dashboard, then access any article you want or create a new one. After that, in the Fields tab, let’s paste the number sequence you copied before. Don’t forget to save it.

Add Google Map To Joomla 4-17

Everything is done, let’s see how the Google Map appears on your site.

Add Google Map To Joomla 4-18

Conclusion

To sum up, we are happy to introduce to you the way how to add Google Map to Joomla 4 Articles. Therefore, we hope that you can do this successfully. You can get more information about the topic by leaving your comment below. Moreover, don’t forget to visit our site to get many responsive and attractive Joomla 4 Templates.

5/5 - (7 votes)
Lt Digital Team (Content &Amp; Marketing)
Latest posts by LT Digital Team (Content & Marketing) (see all)

Summer Sale Grab 50% Off for everything on today, don't miss it. Coupon code: SUMMER2024 Redeem Now
Last call: Summer Sale! Grab 50% Off for everything on today, don't miss it. Coupon code: SUMMER2024 Redeem Now