How to use Google Maps API Keys

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 a basic purposes because you get $200 free credits every month. This should be enough for a small website. For a website with more than a few thousands of visitors 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. Google Maps service is free because you get $200 free credits every month Check the pricing for Google product 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.  

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.

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:
  1. Geocoding API
  2. Maps Javascript API
  3. Places API
DJ-Catalog2 extension for Joomla requires the following APIs:
  1. Geocoding API
  2. Maps Javascript API
  3. Directions API
Enable the Google Maps APIs as follows:

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:

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

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 the API key to ensure only authorized requests are made with your 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 of 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 restrictions 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:
  1. components/com_djclassifieds/views/item/tmpl/default_localization.php
  2. modules/mod_djclassifieds_maps/tmpl/cluster.php
  3. modules/mod_djclassifieds_maps/tmpl/default.php
  4. modules/mod_djclassifieds_search/tmpl/default.php
  5. modules/mod_djclassifieds_search/tmpl/oneline.php
Questions? Let us know! 

      • Related Articles

      • Custom Google Maps Styles

        You can use your Google Maps styles in component (Advert details) and Google Maps modules. Adjusting the map's look and feel is as easy as copying and pasting JSON code to fields in DJ-Classifieds. Where to get Google Maps styles? There are many ...
      • Default country for places API (google maps)

        In google maps module you can insert the country name that you want to search in. For example, you might want to let your users search the city Paris, but you don’t want to have in results anything else than Paris from France (for example if you’re ...
      • How to set the Leaflet OpenStreetMap in the component and Maps module

        Support for OpenStreetMaps in DJ-Classifieds component DJ-Classifieds uses the Google Maps API by default. To enable OpenStreetMaps maps, you need to publish the “DJ-Classifieds - Leaflet Maps” because it is disabled by default.  After enabling the ...
      • Disable mouse zoom scrolling in Google Maps

        You can disable the Google Maps scrolling in DJ-Classifieds Google Maps module and component. Check video explaining how it works: Module Open Google Maps module and change the Mouse zoom scrolling settings to "No" (1) Save the module (2)   Advert's ...
      • Maps module

        The DJ-Classifieds Maps module displays the Google Maps, Baidu Maps, Leaflet Maps with selected locations of the submitted adverts. Frontend view Backend view & settings Let's take a look at the module parameters: Short description Map Provider - Use ...