How do you add Google Map in Helix based Joomla sites

169

How do you add Google Map in Helix based Joomla sites

The Google Map block allows you to embed a Google Maps in your Joomla website page. Google Maps created on or after June 22, 2016 will require a free API key. As of June 22, 2016 free Google Maps are limited to 25,000 map loads per day. Map loads over 25,000 will require billing enabled or Premium Plans on Google.

Steps for getting the Google Map API key:

Step 1:

Go to the Google Developer Console.

Creating the new Google Maps API Key

Step 2:

Create or select a New Project.

Create a new Project link on Google Maps

Step 3:

Enter the project name and click on Create.

Project name and organization create

Step 4:

Click on ENABLE APIS AND SERVICES from your project dashboard.

Enable google map api and services

Step 5:

Then click on Google Maps Javascript API and open it.

Google Maps Javascript API Key

Step 6:

Click on ENABLE button to enable it.

Enable Google Maps API

Step 7:

Now going to generate the API key. For doing it, Click on the Create Credentials option in the sidebar.

Create Map Credentials

Google Map API Credentials

Step 8:

Now click Create credentials button and select API key.

Create the Google Maps API Key

Step 9:

Now popup API key created will appear with your API key for Google Map intagration on your website.

Copy Google Maps API Key

Adding Google Map on Helix based Joomla sites using Helix shortcode:

Let's taken sample google map key generated for our domain(pcmshaper.com) - iUdjSWEFyIVwUjfRt87djKJq6SdFHeWU8NBUPk - then added it in spmap shortcode, see example below,

[spmap lat="13.052414" lng="80.250825" zoom="15" maptype="ROADMAP" height="250" gmap_api="iUdjSWEFyIVwUjfRt87djKJq6SdFHeWU8NBUPk"]

Add Google Maps with SP Page Builder on your site:

For adding google map on SP Pagebuilder from Joomla site backend, then go to Systems => Global Configuration => SP Page builder => Google Map API Key from your site backend and here you will find the option to add the google map api key.

SP Pagebuilder Google Map API configuration

Rating
  • (1 Ratings)