Adding Google Maps to your website is fun and easy, thanks to SP Page Builder's Google Maps addon. This dedicated addon can embed and display Google Maps frames on your web pages in seconds without any coding. Your task is to generate a Google Maps API key and the rest will be done by the addon. Today we are going to see how you can generate the Google Maps API key and add a Google Maps of your location to your Joomla site.

Step 1 - Generate Google Maps API key

Follow the below described guideline to generate your Google Maps API key.

Create a new project

First, you have to go to Google Developer Console. Click the profile button right beside the Google API’s logo.

Creating the Google Maps API Key

A new window will popup. Now click the plus sign (to the right side of the search bar) to create a new project.

Creating the Google Maps API Key

Enter the project name and click Create.

Creating the Google Maps API Key

Enable API

Now switch to your project dashboard and click “ENABLE APIS AND SERVICES”.

Creating the Google Maps API Key

Then select Google Maps Javascript API and open it.

Creating the Google Maps API Key

Click the ENABLE button to enable it.

Creating the Google Maps API Key

Create credentials

After enabling the API, now you have to generate the API key. To do that, Click on the Credentials option in the sidebar.

Creating the Google Maps API Key

Now click ‘Create credentials’ button and select API key.

Creating the Google Maps API Key

This is your API Key.

Creating the Google Maps API Key

Step 2 - Add Google Maps with SP Page Builder to your site

First, add your API key to SP Page Builder Configuration in the Global Configuration section of your Joomla site backend. From your Joomla backend go to Systems>>Global Configuration>>SP Page Builder. Here you will find the option to add the Google Map API key. 

Adding Google Maps with SP Page Builder to a Joomla site

Now drag and drop the Google Map addon to the desired column position of your page layout using the frontend editor of SP Page Builder. After adding the addon, a default map location will be generated. Use the Address field option to add the latitude and longitude of your location. Also, you can do more customization using the Customization options of the addon.

Adding Google Maps with SP Page Builder to a Joomla site

So, this is the easiest way to add Google Maps to your Joomla site. Now we believe you would not feel difficulties adding Google Maps. If you still do, don't worry we will assist you. If you have any opinion or thoughts regarding this, please use the comment section below.

Get SP Page Builder