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.
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.
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.
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.
Finally, let’s visit your site to check the result. You will see a Google map clearly appears on the article.
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.
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.
Now, in the Maps APIs and Services tab, let’s choose Maps JavaScript API that will support you to create maps for your site.
In the next step, let’s go to the Credentials -> Create Credentials.
Now, an API key created popup will appear to give you an API key, then click on Restrict Key.
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.
Finally, you simply need to get the API key by copying it in the Key column.
Generate a Google map custom field to Joomla! articles
Now, you need to create a new article field. Let’s open Content -> Fields -> New.
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.
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 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.
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.
Everything is done, let’s see how the Google Map appears on your site.
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.
- What are joomla tags and how are the used? - November 3, 2024
- Why and how to create hidden menu items in Joomla? - October 31, 2024
- How to publish smartslider 3 to joomla 4? - October 31, 2024
This info is outdated. Just fyi.