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 NOTE: 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 on your site that looks like this:


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 Select a project >> Create a project in the upper-right 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:




  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":



  7. Click on Create credentials >> API key:



  8. Click on "Browser key":



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




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



    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)


  11. Click on "Create":



  12. You are now given an API key.  Copy this to your clipboard and then click on OK:



  13. Click on "Overview":



  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 Places API Web Service”:




  19. Click on the “Enable” button:



  20. If you do not have your API key copied to your clipboard as shown in step 12 above, you can find your API key again by clicking on “Credentials” in the left sidebar:




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



  22. Login to the Admin area of your site

  23. Navigate to Settings >> Advanced Settings

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




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




  26. Click on the “Save Changes” button


Your Google Maps Javascript API Key is now setup!