Login to the Google API Manager here: https://console.developers.google.com/apis/library


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


IMPORTANT NOTES

  • Google's interface for the steps below may not be compatible with all browsers - we recommend using the latest version of Google Chrome for the best results.

  • Google now requires that the "Google Maps Geocoding API" is also enabled in order for all of the locations functionality on your site to work as expected. Please make sure that steps 17 - 20 below are followed in order to enable this API as well.


Google updates the design of their API Manager often, so the screenshots below may not be exactly the same as it appears when you follow these steps.  It is important to make sure that all of the steps below are followed.  If they are not followed correctly, then you will see an error appear that looks something like this in all of the location search fields and Google Map areas on your website:




The way to resolve this error is to make sure the steps below are followed correctly.


To get your own free API Key, please follow theses steps:


  1. Navigate to https://accounts.google.com/Login and login to the Google account you will be using with your site

  2. After logging in, navigate to https://console.developers.google.com/apis/library

  3. Click on Project >> Create a project in the upper-left hand portion of the screen:




  4. Enter a name for your project into the "Project name" field.  You can use any name you wish for this, there are no specific requirements.  We used "Example Project Name" for the purposes of this tutorial.  

    If this is the first time setting up a project using this account, you will have to follow these steps as well:

    Select "Yes" or "No" for the first question - "Please email me updates regarding feature announcements, performance suggestions, feedback surveys and special offers." (it does not matter which is chosen for the purposes of this tutorial).

    Select "Yes" for the second question - "I agree that my use of any services and related APIs is subject to my compliance with the applicable Terms of Service":



    If you have created a project previously using this account, the "New Project" window will have fewer options:



  5. Click on "Create"

  6. It will take a few seconds for Google to create the project.  You should now be taken back to the API Manager page.  Click on "Credentials":




    Click on "Select a project":



    Click on your project's name and then click on "Open":




  7. Click on Create credentials >> API key:



  8. Click on "Restrict key":





  9. Enter a name for this API key into the "Name" field.  We are going to leave the default name "API key 1" for this tutorial, but you can use anything you like:




    Select HTTP referrers (web sites):




  10. The next step is to enter the proper domains into the "Accept requests from these HTTP referrers (web sites)" field:





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

    For the purposes of this tutorial, let's imagine that the domain 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 ENTER after typing in each domain to add it to the list:


    *.directoryup.com
    *.managemydirectory.com
    managemydirectory.com
    *.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)


  12. Click on "Save":





  13. Click on "Library":




  14. Click on “Google Maps JavaScript API”




  15. Click on "Enable":



  16. Once it is enabled, click on the Back button:



  17. Click on “More” under Google Maps APIs:





  18. Click on "Google Maps Geocoding API":




  19. If it is not already enabled, click on "Enable":



  20. Once it is enabled, click on the Back button:



  21. Click on “More” under Google Maps APIs:



  22. Click on “Google Places API Web Service”:




  23. Click on the “Enable” button:



  24. You can now find your API key by clicking on “Credentials” in the left sidebar:



  25. Copy the API key shown here to your clipboard:



  26. Login to the Admin area of your site

  27. Navigate to Settings >> Advanced Settings

  28. Type “maps api” into the Search field:




  29. Paste your API Key into the Google Maps Javascript API Key field:




  30. Click on the “Save Changes” button


Your Google Maps Javascript API Key is now setup!