In order to use the location search on your site, you will first need to get your own Google Maps Javascript API Key and add this to the Admin area of your site. 

This will enable Google Maps to work on your domain name. In this article, we will guide you step by step on what you need to accomplish in order to make this great tool work!


[NOTE] Before completing this step, you must FIRST connect your live domain name.
Please See: How To Move Your Site To Your Live Domain.


Important Information: Due to a change in Google's policy, beginning on June 11, 2018, Google requires all users to add billing information to their account in order to activate Google Maps API keys.  

However, Google gives all users enough free credits each month so that the vast majority of websites will never have to pay anything for this service (as of writing this article, we are not aware of any Brilliant Directories websites ever having to pay for this service).  

In fact, with this update, Google is actually giving users even more free credit than before.  The only difference is that they now ask for billing information during the setup process rather than after a user consumes all of their free credits.



1

To get started, visit this link: https://cloud.google.com/maps-platform/



2

After clicking on the "Get Started" button...
You will be prompted enter the billing information:

  • Select the country and agree to the terms and condition in order to continue:



  •  Fill in your billing information and click on "Start My Free Trial":





Success! Click "Got It"



** IMPORTANT NOTE: If after clicking "Got Ityou get redirected to a blank screen or different page or perhaps you suffer a connection issue; click on this link: https://cloud.google.com/maps-platform/ and select the "Get Startedbutton once more to continue the process.




3

On the next screen, ENABLE the APIs:


** It is important to select all three APIs - Maps, Routes & Places **





4

Now you will be prompted to answer a set of questions. 
Feel free to answer them based on your project:





5

Enable the project to create the key:



These are the API's that are enabled in the process:





6

Now you can copy and paste the key which will appear below "Your API key":


*They key in the image below has been removed for key privacy*




Once the API Key is set up, make sure to restrict the key here: 









8
THIS STEP IS EXTREMELY IMPORTANT. 
PLEASE BE SURE TO COMPLETE THIS CORRECTLY.


Select HTTP referrers (web sites) 


For the purposes of this tutorial, let's imagine that the domain of my website will be on is http://www.ilovebrilliant.com.  It is very important that you know what the final domain of your website will be for this step.


Enter the following one at a time to the "Accept requests from these "HTTP referrers (web sites)" field. Press DONE after typing in each domain to add it to the list:


  • *.directoryup.com - this is needed if your site is NOT live yet.

  • *.managemydirectory.com - Important: It is needed in order for your admin pages to work with the maps.

  • managemydirectory.com - Important: It is needed in order for your admin pages to work with the maps.

  • *.ilovebrilliant.com  (IMPORTANT: Replace "ilovebrilliant.com" with the final domain that YOUR website will be hosted on)
  • ilovebrilliant.com  (IMPORTANT: Replace "ilovebrilliant.com" with the final domain that YOUR website will be hosted on)



After you have completed the above, you should see the following:





(REMEMBER: You will not see "ilovebrilliant.com" in the list.  You will see the final domain of YOUR website in the list instead)




9

Select the option "Don't restrict key" and then click on "Save":





10 

Log in to the Admin of your website. 

Navigate to Settings >> General Settings >> Integrations:


Paste the API key in the "Google Maps Javascript API Key" field and save the changes.







11 

Click Save Changes!


Your Google Maps Javascript API Key is now setup and secured!