Wednesday, 16 March 2016 10:47
Modified: Friday, 13 March 2020 10:10

how to use google maps api keys

IMPORTANT: As of June 11, 2018 you need a valid API key and a Google Cloud Platform billing account to access Google core products. Once you enable billing, you will gain access to your $200 of free monthly usage to use for Google Maps, Routes, and Places products.

Using Google Maps on the website requires API keys. To get API keys, you need to register a Google account if you do not already have one, and provide your credit card details.

Although you must provide your credit card details, Google Maps service is free for basic purpose because you get $200 free credits every month. This should be enough for a small website. For a website with more than few thousands of vistiors per month, you will probably need to buy more credits. Worth to mention is that Google will not charge you automatically if you will be out of free credits. Check the pricing for Google products usage per 1000 requests.

Google Maps is not the only map solution for DJ-Classifieds. Alternatively, you can use OpenStreetMaps without the need of registering or providing your credit card details.

Check how to use OpenStreetMaps instead of Google Maps

What is it and how to get Google Maps API key?

The API key is a unique identifier that is used to authenticate requests associated with your project for usage and billing purposes. The API key is required to use Google Maps in such Joomla extensions like DJ-Classifieds or DJ-Catalog2.

Follow this steps to get API key

Enable Google Maps APIs required by Joomla extension

After creating the key, you need to make sure the appropriate Google Maps APIs are enabled.
DJ-Classifieds extension for Joomla requires the following APIs:

  • Geocoding API
  • Maps Javascript API
  • Places API

DJ-Catalog2 extension for Joomla requires the following APIs:

  • Geocoding API
  • Maps Javascript API
  • Directions API

Enable the Google Maps APIs as follows:

1. Go to the Google Cloud Platform Console
2. Click “APIs” from the left sidebar
3. Select an API and click Enable (repeat this step for each API required by the Joomla extension you are using)

Add API key to the Joomla extension

Now you are ready to enter the API key in the component options.

For DJ-Classifieds go to Components -> DJ-Classifieds -> Options -> Global -> Map & Locations Settings
Enter the API key for both fields server and browser:

DJ-Classifieds Map options

For DJ-Catalog2 go to Components -> DJ-Catalog2 -> Options -> General settings -> Map settings
Enter the API key for both fields server and browser:

DJ-Catalog2 Map options

The difference between browser and server key

You will probably notice two fields in the options of Joomla extension: for Browser and Server key. The browser key is used by Google Maps Javascript API and Places API, while the server key is used by Geocoding API.
For most scenarios, you can use the same API key for both fields. However more advanced users may want to use different keys for them, for example when they have multiple projects with different billing options.

Restrict API key

It is recommended that you restrict API key to ensure only authorized requests are made with your API key.

Follow this steps to restrict API key

Note: Remember that you need to restrict the API key per each API service like Geocoding API, Maps Javascript API, Places API so make sure you select all of them.

Troubleshooting

If you are sure you have put the API keys correctly and something still does not work, you will probably see errors in your web browser console. In most cases, the error message should inform you what is wrong.

Possible issues:

1. If you see only one field for the API key in the Joomla extension options you are probably using a very old version of the extension, you need to update it.
2. If you have restricted your API key and Google Maps do not work, make sure you have restricted your API key correctly. Check if Google Maps are working fine without setting restriction to your API key.
3. Make sure you have enabled billing for your Google Maps project.
4. If the map does not work for some pages or modules only, make sure that you have not overridden those files:

  • components/com_djclassifieds/views/item/tmpl/default_localization.php
  • modules/mod_djclassifieds_maps/tmpl/cluster.php
  • modules/mod_djclassifieds_maps/tmpl/default.php
  • modules/mod_djclassifieds_search/tmpl/default.php
  • modules/mod_djclassifieds_search/tmpl/oneline.php

Questions? Let us know!

 

DJ-Classifieds

Ultimate classified ads solution for Joomla.

Learn more