The Google Maps API key powers address lookup and map display on the Direct Ordering web and mobile ordering experiences. Two keys are used: one for the website, restricted to the restaurant's domain, and one for the mobile app, which remains unrestricted. This article explains how to create and configure both keys and where to enter them in the Direct Ordering Admin Panel.

Setting Up the Google Maps API Key (Web)

Step 1: Go to Google Maps Platform — Get Started.

Step 2: In the Quickstart section, select the Get Started button shown below.

Step 3: Follow the prompts to log in and set up a billing account. A billing account is required to verify the account; charges do not apply unless the account is manually upgraded to a paid plan.

Additional questions about the intended use of the account may appear. Answer them as appropriate.

Step 4: After submitting, a pop-up displays the Google Maps API key. Copy and save this key to later paste into the Google Maps API Key field under Settings > User Experience > Google Maps in the Direct Ordering Admin Panel.

Step 5: Protect the API key. To secure the key while allowing it to work on any subdomain of the website, restrict the Google Maps API key to the restaurant's website domain. Enter the website domain surrounded by asterisks. Follow the steps in Option 5A or Option 5B below, depending on the current screen.

Option 5A: From the "Go to Google Maps Platform" button. Select the Go to Google Maps Platform button from Step 4. In the pop-up, choose the following settings:

• Select restriction type: Select HTTP referrers (web sites).
• Restrict key usage requests to the specified website: Enter the domain to restrict the Google Maps API key to, surrounded by asterisks.
  • For example, if the restaurant's website is http://www.examplerestaurant.com, enter *.examplerestaurant.com/* in the indicated field.

Option 5B: From the "Keys & Credentials" tab. If the pop-up from Step 4 is no longer open, the same setting is available from the Keys & Credentials tab. Select the three dots at the end of the Maps API Key, then select Edit API Key.

Choose the following settings, shown on the screen below:

• Set an application restriction: Websites
• Add a website: Enter the domain to restrict the Google Maps API key to, surrounded by asterisks.
  • For example, if the restaurant's website is http://www.examplerestaurant.com, enter *.examplerestaurant.com/* in the indicated field.

Save the changes.

Step 6: Confirm a green checkmark appears next to the API key, as shown below.

Step 7: Confirm the product configurations. In the APIs & Services section, open the Maps, Places, and Routes tabs to ensure the following products are enabled.

Step 8: Test the maps functionality on the Direct Ordering website to confirm everything works as expected.

Setting Up the Google Maps API Key (Mobile App)

It is a security best practice to use a separate API key for each product. If a key is compromised, it can be regenerated without affecting the others. The steps below create a second Google Maps API key designated for the mobile app.

Step 1: In the Google Cloud Console, open the Keys & Credentials tab, select + Create Credentials, then select API key.

Step 2: A pop-up automatically displays the mobile API key. Copy and save this key to later paste into the Google Maps API Key for Mobile App field under Settings > User Experience > Google Maps in the Direct Ordering Admin Panel.

Step 3: The mobile API key does not display a green checkmark because it is unrestricted by default. The mobile API key should remain unrestricted, since an API key embedded in the app is difficult for malicious users to access, and restricting the mobile API key causes the maps feature to malfunction in the Direct Ordering mobile app.

Step 4: Update the name of the new mobile API key to distinguish it from the web API key. Select the three dots at the end of the Maps API Key, then select Edit API Key to update both the key's name and its restrictions.

• Name: Update the second API key's name to Google Maps API Key for Mobile App to distinguish it from the original API key.
• Set an application restriction: None

Save the changes.

After saving, the credentials dashboard appears as shown below.

Step 5: Test the maps functionality on the Direct Ordering mobile app to confirm everything works as expected.