How to set up a Google Maps API Key for Web & Mobile App Ordering

To set up Google Maps API Key (for Web)

Step 1: Go to https://developers.google.com/maps/gmp-get-started

Step 2: In the Quickstart section, click on the Get Started button shown below:

Step 3: Follow the steps to log in and set up a billing account. The billing account is used to confirm you are not a robot; you will not be charged until you manually upgrade to a paid account.

You may also be asked some additional questions regarding your intentions for the account, which you may answer honestly.

Step 4: Upon Submit, you will see a popup that contains your Google Maps API Key. Copy and save this API Key so you can later paste it into the Google Maps API Key field under Settings > User Experience > Google Maps in your Direct Ordering Admin Panel:

Step 5: Protect your API Key. To secure your API key and allow it to be used on any subdomain of your website, we advise you to restrict your Google Maps API Key to your restaurant website’s domain only. To do this, enter your website domain surrounded by asterisks.

Follow the steps for 5A or 5B below, depending on your placement on the site:

→ 5A: To proceed via the “Go to Google Maps Platform” button
Click 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 you’d like to restrict your Google Maps API Key to, surrounded by asterisks.

  • For example, if your restaurant’s website is http://www.myrestaurant.com, enter *.myrestaurant.com/* in the indicated field.

→ 5B: To proceed via the “Keys & Credentials” tab
If you’ve already clicked away from the pop-up in Step 4, you can always access the same setting from your Keys & Credentials tab > click the 3 dots at the end of your Maps API Key > select Edit API Key.

Choose the following settings, shown on the screen below:

• Set an application restriction: Websites

• Add a website: Enter the domain you’d like to restrict your Google Maps API Key to, surrounded by asterisks.

  • For example, if your restaurant’s website is http://www.myrestaurant.com , enter *.myrestaurant.com/* in the indicated field.

Save your changes.

Step 6: Verify you see a green checkmark next to your API key on the screen below:

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

Step 8: That's it! You should test the maps functionality on your Direct Ordering website to verify that everything is working as expected.

To set up Google Maps API Key (for Mobile App)

It is API best practice to Use separate API Keys for each product in the event any key is compromised, you can regenerate the impacted key without needing to update them everywhere. To create a second Google Maps API Key designated for your Mobile App, follow the steps below.

Step 1: In your Google Cloud Console, click the Keys & Credentials tab > click + Create Credentials > API key.

Step 2: You will automatically see a popup with your Mobile API Key. Copy and save this API Key so you can later paste it into the Google Maps API Key for Mobile App field under Settings > User Experience > Google Maps in your Direct Ordering Admin Panel:

Step 3: Please note that your Mobile API Key does not display a green checkmark because it is unrestricted by default. It is recommended to keep your Mobile API Key unrestricted since it is difficult for malicious users to access an API Key within your app. Additionally, restricting the Mobile API Key will cause the maps feature to malfunction within the Direct Ordering Mobile App.

Step 4: We recommend updating the name of your new Mobile API Key to distinguish it from your Web API Key. To do this, click the 3 dots at the end of your Maps API Key, and then select Edit API Key to update both the key’s name and restrictions accordingly.

• Name: Update your second API Key’s name to Google Maps API Key for Mobile App to distinguish it from your original API Key.

• Set an application restriction: None

Save your changes.

Your credentials dashboard should look like this upon save:

Step 5: That’s it! The maps functionality on your Direct Ordering Mobile App should be tested to verify that everything is working as expected.