The easiest way to add Google Maps to Joomla sites - JoomShaper

The easiest way to add Google Maps to Joomla sites

15 December 2017
Hits 31,537
3 min read
The easiest way to add Google Maps to Joomla sites

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.

Notice! Since June 2018 Google changed regulations for access to API keys, Google Maps service is no longer "free"  as it was before. If You do not have a valid Google Maps license  you get the watermarked maps. All google maps projects must be associated with a billing account. Starting on June, you’ll need a valid API key and a Google Cloud Platform billing account to access the core Google Maps APIs. The billing requirement is now being enforced. You have to associate a credit card so that you can get billed if your site has requests that exceed the $200 credit Google give you monthly for free. More official information & price list you will find here: https://cloud.google.com/maps-platform/pricing/

As free alterantive,  consider using Open Streets addon.

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

Comments (8)

burn.hard
burn.hard
This comment was minimized by the moderator on the site

If I need several maps for my clients and their outlets (some of them having more than one) do I need one key per client or even one per outlet or (hopefully) just one at all?

Towfiq Omi
Towfiq Omi    burn.hard
This comment was minimized by the moderator on the site

Just one key will do

Thanks for the comment.

P
primevarna    burn.hard
This comment was minimized by the moderator on the site

the API key is sidewise, I mean you need one key for one site

burn.hard
burn.hard
This comment was minimized by the moderator on the site

Thanks a lot!

F
Francesco
This comment was minimized by the moderator on the site

Congratulations on the tutorial, very clear and comprehensive.
I have a question: is it possible not to have cookies released?
I would prefer not to have third-party cookies.

Paul Frankowski
Paul Frankowski    Francesco
This comment was minimized by the moderator on the site

Until you use Google services ... it's not so simple.
Sometimes you do not need real interactive map, and screenshot from map would be OK in some cases.

B
Bogdan
This comment was minimized by the moderator on the site

Is it possible to add multiple locations on one map? I tried and failed. If you use ";" in the "Location field" after the gps coordinates in order to add a new set of coordinates for the second, third... location, the map on the page disappears. Do you have a solution for this problem?

Paul Frankowski
Paul Frankowski    Bogdan
This comment was minimized by the moderator on the site

We will add this feature in upcoming updates. It's on our list to do. Until then you have to use extra map module which have this feature, sorry.

There are no comments posted here yet

Sign up for our newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.