This resource is intended to help you configure and troubleshoot issues with Google Maps. You can refer to the documentation for the Refoundry Google Maps block for insights on how to customize the Google Map settings. 

How do I configure the Google Maps block?

If your site has a Google Map in the designs, our team will configure that for you before launch and only ask you for a few specific details to complete the setup. But you may add another one later, or be using this resource to support pre-launch setup, so here’s the full process. 

Configure the Settings 

  1. Open your WordPress dashboard and visit Refoundry > Settings from the lefthand menu.
  2. Complete the steps in the “Add the API” section.
  3. Paste your API key into the designated field, and toggle on to enable Google Maps. 
  4. Click “Add Location” to create each location you need—this may only be one for a Contact page, or multiple if you have several locations in your design and they each have a map.
  5. Give the location a name and enter your latitude and longitude coordinates (you can get these from searching your business address on Google Maps).
  6. Add your thumbnail image.
  7. Save your changes.

Add the API Key

An API key is a unique, private string of characters used to help your website talk to Google Maps. It allows the API provider (Google Maps) to verify that the application (your website) has permission to access its services and data. You don’t need to know how it works, though, you just need to give it the details required to function. 

Here’s a walkthrough video, if you prefer to follow along by watching. Or use these instructions:

  1. Visit https://mapsplatform.google.com/ and create an account.
  2. Start a new project and give it a name (usually the name of your organization).
  3. Enable the API:
    • Once your project is created, you need to tell Google which specific services your website will use. 
    • From the Google Cloud Console, click the Navigation Menu (three horizontal lines) and select APIs & Services > Library. 
    • In the search bar, type “Maps JavaScript API” and click on it. 
    • Click the blue “Enable” button.
  4. Choose “Keys and Credentials” from the lefthand menu.
  5. Enter your billing information:
    • The Google Maps Platform charges based on “calls,” ie. times the platform is accessed by your map. 
    • Google Maps also provides a $200 monthly credit for Maps, Routes, and Places (see Billing Account Credits). 
    • With this monthly credit you may not ever be charged, as it covers you for over 50,000 calls per month and most SMB sites don’t need that many. 
    • Find out more on their pricing page.
  6. Copy your API key when it pops up on the screen, and complete steps 3-7 in the section above.

Secure Your API Key

Your API key is linked to your billing account, so it’s important to secure it to prevent other people from using your credits on their websites.

  1. Go to APIs & Services > Credentials.
  2. Click the Edit icon (pencil) next to your Google Maps API Key.
  3. Under “Set an application restriction,” select Websites.
  4. Under “Website restrictions” click Add.
  5. Enter your website’s URL using this format to cover all pages: *.yourdomain.com/*  (replace “yourdomain.com” with your own website URL)
  6. Under “API restrictions” select “Restrict key.”
  7. From the dropdown menu, check the box for “Maps JavaScript API.”
  8. Click Save. It may take up to 5 minutes for these security settings to take effect.

Configure the Google Maps Block on Your Site

  1. Open the editor view of the page that has a map
  2. Click to select the Google Maps Block from the list view on the left
  3. Select your location in the drop-down (this will display the name that you configured under Refoundry > Settings)
  4. That’s it! 

Troubleshooting errors

Most errors on the Google Maps Block are tied to billing not being set up correctly. 

You may also need to click “Activate” in the upper right corner of the screen. 

  1. Log into the Google API Console: https://console.cloud.google.com/apis 
  2. Open the lefthand “Navigation Menu” and select Billing. 
  3. Add or edit your payment method.