In order to use the location search on your site, you will first need to get your own Google Maps 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!
NOTES
- Before completing this step, you must FIRST connect your live domain name.
Please See: How To Move A Site To A Live Domain - If at some point you 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 Started" button once more to continue the process.
Step 1 - Get Started
To get started, visit this link: https://cloud.google.com/maps-platform/
There may be a Terms of Services agreement that needs to be completed:
Step 2 - Account Setup
After clicking on the "Get Started" button... Click on "FINISH ACCOUNT SETUP":
- Fill out your billing information and click "Start Free":
Success!
Step 3 - Questionnaire
Now you will be prompted to answer a set of questions. Feel free to answer them based on your project:
Step 4 - Create Key
Now you can create the key:
Open the menu:
Go to "APIs & Services > Credentials":
Click on "Create Credentials > API Key":
Copy the API Key:
Step 5 - Key Restrictions
Adding the restriction type HTTP referrers (web sites) and add your domain as one of your referrers.
Open the Key:
Step 6 - HTTP Referrers
THIS STEP IS EXTREMELY IMPORTANT.
PLEASE BE SURE TO COMPLETE THIS CORRECTLY.
Select HTTP referrers (websites)
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)
Select the option "Don't restrict key" and then click on "Save":
Step 7 - APIs
Next it is necessary to enable 3 APIs and services, click on: APIs & Services:
+ENABLE APIS AND SERVICES
The three main APIs that need to be active are:
API Usage
Front End | API |
---|---|
Member Profile | Maps Javascript |
Detect Visitor Location Add-On | Geocoding |
Location Searches | Places and Geocoding |
Google Search Assist Add-On | Google Custom Search (free) |
Member Dashboard | API |
---|---|
Contact Details Form | Maps, Places and Geocoding |
Post Form | Maps, Places and Geocoding |
Multi-Location Add-On | Maps, Places and Geocoding |
Admin Dashboard | API |
---|---|
"Enable All Location Features For "Pretty URL" Search Results Pages" Advanced Setting | Geocoding |
Geocode Members | Geocoding |
Location Searches | Places and Geocoding |
Step 8 - Save
Click Save Changes!
Your Google Maps Javascript API Key is now set up and secured!
Step 9 - Add to Website
Add the key to your website in the Settings:
- General Settings
- Search for "google maps"
- Click on the Integrations tab
- Add your key
NOTE: If after completing this setup successfully, the Google Maps search by location shows an error message, follow these articles for troubleshooting:
- Google Maps Issues: Billing Errors
- Google Maps Issues: Missing an API
- Google Maps Issues: Editing HTTP Referrers