Sign up for email announcements to stay updated on the latest information about the GMB API.

JavaScript

Complete the steps on this page to create a browser application that makes OAuth2.0 requests to the Google My Business API for the accounts, admins, and locations associated with your account.

Prerequisites

To run this quickstart, you need the following:

  • Python 2.4 or greater (to provide a web server).
  • Access to the internet and a web browser.
  • For G Suite users, a Google My Business domain with API access enabled.
  • A Google Account in that domain with administrator privileges.

The Google My Business API requires CORS and XMLHttpRequests. The browser application sample that follows illustrates how both technologies are used. For more information, see How to use CORS to access Google APIs.

Turn on the Google My Business API

Use the following steps to turn on the Google My Business API:

  1. Use the linked wizard to automatically add the Google My Business API and activate it for your project. Click Continue, then click Go to credentials.
  2. On the "Configure your OAuth client" page, click the Cancel button.
  3. At the top of the page, select the "OAuth consent screen" tab and then select an Email address from the drop-down list. Enter a name into the Product name field if one is not already set, and click the Save button.
  4. Select the "Credentials" tab, click the Create credentials button, and select OAuth client ID.
  5. Select the application type Web application.
  6. In the Authorized JavaScript origins field, enter the URL http://localhost:8000. You can leave the Authorized redirect URIs field blank.
  7. Click the Create button. Take note of the client ID in the resulting dialog. You need it in a later step.
  8. Click OK to dismiss the resulting dialog.
  9. Click the Create credentials button and select API key. Take note of the API key in the resulting dialog. You need it in a later step.
  10. Click the Close button to create an unrestricted key. In production applications, you can restrict access to the API key to specific websites, IP addresses, or mobile apps.

Set up the sample

Create a file named quickstart.html and copy in the following code:

<html>
  <head>
    <title> Google My Business API Demo </title>
    <style>
      html, body {
        height: 100%;
        margin: 10px;
        padding: 0;
      }
      button {
        background-color: #008CBA;
        border: none;
        color: white;
        padding: 15px 32px;
        font-size: 16px;
        margin: 10px;
      }
    </style>
    <meta charset='utf-8' />
  </head>
  <body>
    <h2> Google My Business API Web Demo </h2>

    This demonstration illustrates how to perform OAuth 2.0 authorization, sign in/out and call the
    Google My Business API using JavaScript and CORS. <p>
    The API Key and OAuth 2.0 Client ID values from Google APIs & Services must be added to the
    JavaScript source for this page. <p>

    <h3> OAuth2 Authorization and Sign Out </h3>

    Successful OAuth2 authorization grants this script access to the Google My Business API and
    enables you to view and manage business locations on Google. <p>
    A one-time acknowledgement is required to grant this script access to the Google account holding
    the API Key and OAuth 2.0 client ID credentials. <p>

    <div>
    <button id="authorize-button" style="display: none;"> Authorize </button>
    <button id="signout-button" style="display: none;"> Sign Out </button>
    </div> <p>

    You may verify current grant status and revoke active grants at any time using
    <a href="https://myaccount.google.com/permissions">My Account Permissions</a> (also available
    from <i>Settings</i> and <i>Sign-in & Security</i> when signed into your Google account). <p>

    <h3> API Requests </h3>

    <button id="accounts-button" style="display: none;"> Get Accounts </button>
    <button id="admins-button" style="display:none;"> Get Admins </button>
    <button id="locations-button" style="display:none;"> Get Locations </button>

    <h3> API Responses </h3>

    <div id="dynamic-content"> </div>

    <script type="text/javascript">

      // Enter an API key from the Google API Console:
      //   https://console.developers.google.com/apis/credentials
      var apiKey = 'YOUR_API_KEY_HERE';

      // Enter a client ID for a web application from the Google API Console:
      //   https://console.developers.google.com/apis/credentials?project=_
      // In your API Console project, add a JavaScript origin that corresponds
      // to the domain where you will be running the script.
      var clientId = 'YOUR_CLIENT_ID_HERE';

      // Use the latest Google My Business API version
      var gmb_api_version = 'https://mybusiness.googleapis.com/v4';

      // One or more authorization scopes. Additional scopes may be desired if
      // multiple APIs are used. Refer to the documentation for the API
      // or https://developers.google.com/people/v1/how-tos/authorizing
      // for details. At a minimum include the Google My Business authorization scope.
      var scopes = 'https://www.googleapis.com/auth/business.manage';

      var authorizeButton = document.getElementById('authorize-button');
      var signoutButton = document.getElementById('signout-button');
      var accountsButton = document.getElementById('accounts-button');
      var adminsButton = document.getElementById('admins-button');
      var locationsButton = document.getElementById('locations-button');

      var accounts = [];

      function handleClientLoad() {
        // Load the API client and auth2 library
        gapi.load('client:auth2', initClient);
      }

      function initClient() {
        gapi.client.init({
            apiKey: apiKey,
            clientId: clientId,
            scope: scopes
        }).then(function () {
          // Listen for sign-in state changes.
          gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

          // Handle the initial sign-in state.
          updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());

          authorizeButton.onclick = handleAuthClick;
          signoutButton.onclick = handleSignoutClick;
          accountsButton.onclick = handleAccountsClick;
          adminsButton.onclick = handleAdminsClick;
          locationsButton.onclick = handleLocationsClick;
        });
      }

      function updateSigninStatus(isSignedIn) {
        if (isSignedIn) {
          authorizeButton.style.display = 'none';
          signoutButton.style.display = 'inline-block';
          accountsButton.style.display = 'inline-block';
        } else {
          authorizeButton.style.display = 'inline-block';
          signoutButton.style.display = 'none';
          accountsButton.style.display = 'none';
          adminsButton.style.display = 'none';
          locationsButton.style.display = 'none';
        }
      }

      function handleAuthClick(event) {
        gapi.auth2.getAuthInstance().signIn();
      }

      function handleSignoutClick(event) {
        gapi.auth2.getAuthInstance().signOut();
      }

      function handleAccountsClick(event) {
        let user = gapi.auth2.getAuthInstance().currentUser.get();
        let oauthToken = user.getAuthResponse().access_token;
        let req = gmb_api_version + '/accounts';
        let xhr = new XMLHttpRequest();
        let p = document.createElement('p');

        p.appendChild(document.createTextNode('Accounts'));

        console.log(req);

        xhr.responseType = 'json';
        xhr.open('GET', req);
        xhr.setRequestHeader('Authorization', 'Bearer ' + oauthToken);

        xhr.onload = function() {

          if (xhr.status != 200) {
            return;
          }

          for (let i = 0; i < xhr.response.accounts.length; i++) {

            let account = xhr.response.accounts[i].name;

            if (accounts.indexOf(account) === -1) {
              accounts.push(account);
            }

            p.appendChild(document.createElement('br'));
            p.appendChild(document.createTextNode(account));
            p.appendChild(document.createTextNode(' accountName: ' + xhr.response.accounts[i].accountName));
            p.appendChild(document.createTextNode(' type: ' + xhr.response.accounts[i].type));
            p.appendChild(document.createTextNode(' role: ' + xhr.response.accounts[i].role));
            p.appendChild(document.createTextNode(' state.status: ' + xhr.response.accounts[i].state.status));

            adminsButton.style.display = 'inline-block';
            locationsButton.style.display = 'inline-block';
          }
        };
        xhr.send();
        document.getElementById('dynamic-content').appendChild(p);
      }

      function handleAdminsClick(event) {
        let p = document.createElement('p');

        p.appendChild(document.createTextNode('Admins'));

        for (let i = 0; i < accounts.length; i++) {

          let user = gapi.auth2.getAuthInstance().currentUser.get();
          let oauthToken = user.getAuthResponse().access_token;
          let xhr = new XMLHttpRequest();
          let req = gmb_api_version + '/' + accounts[i] + '/admins';

          console.log(req);

          xhr.responseType = 'json';
          xhr.open('GET', req);
          xhr.setRequestHeader('Authorization', 'Bearer ' + oauthToken);

          xhr.onload = function() {

            if (xhr.status != 200) {
              return;
            }

            for (let j = 0; j < xhr.response.admins.length; j++) {

              p.appendChild(document.createElement('br'));
              p.appendChild(document.createTextNode(xhr.response.admins[j].name));
              p.appendChild(document.createTextNode(' adminName: ' + xhr.response.admins[j].adminName));
              p.appendChild(document.createTextNode(' role: ' + xhr.response.admins[j].role));
            }
          };
          xhr.send();
        }
        document.getElementById('dynamic-content').appendChild(p);
      }

      function handleLocationsClick(event) {
        let p = document.createElement('p');

        p.appendChild(document.createTextNode('Locations'));

        for (let i = 0; i < accounts.length; i++) {

          let user = gapi.auth2.getAuthInstance().currentUser.get();
          let oauthToken = user.getAuthResponse().access_token;
          let xhr = new XMLHttpRequest();
          let req = gmb_api_version + '/' + accounts[i] + '/locations';

          xhr.responseType = 'json';
          xhr.open('GET', req);
          xhr.setRequestHeader('Authorization', 'Bearer ' + oauthToken);

          xhr.onload = function() {

            if (xhr.status != 200 || xhr.response.locations == undefined) {
              return;
            }

            for (let j = 0; j < xhr.response.locations.length; j++) {

              p.appendChild(document.createElement('br'));
              p.appendChild(document.createTextNode(xhr.response.locations[j].name));
              p.appendChild(document.createTextNode(' locationName: ' + xhr.response.locations[j].locationName));
              p.appendChild(document.createTextNode(' address.addressLines: ' + xhr.response.locations[j].address.addressLines));
              p.appendChild(document.createTextNode(' locationState isVerified: ' + xhr.response.locations[j].locationState.isVerified));
            }
          };
          xhr.send();
        }
        document.getElementById('dynamic-content').appendChild(p);
      }

    </script>

    <script async defer src="https://apis.google.com/js/api.js"
      onload="this.onload=function(){};handleClientLoad()"
      onreadystatechange="if (this.readyState === 'complete') this.onload()">
    </script>

  </body>
</html>

Replace YOUR_CLIENT_ID_HERE in the copied code with the client ID you created in step 7 of Turn on the Google My Business API. Replace YOUR_API_KEY_HERE with the API key you created in step 9.

Run the sample

Perform the following steps to run the sample:

  1. Start the web server with the following command from your working directory:

    Python 2.X

    python -m SimpleHTTPServer 8000

    Python 3.X

    python -m http.server 8000
  2. Load the following URL into your browser:

    http://localhost:8000/quickstart.html

    The first time you run the sample, it prompts you to authorize access:

    1. Click the Authorize button to open the authorization window.

      If you're not already signed in to your Google account, you're prompted to sign in. If you're logged into multiple Google Accounts, you're asked to select one account to use for the authorization.

    2. Click the Accept button.

Once authorized, you can sign in to see the accounts, admins, and locations associated with your project's client ID.

Further reading

Troubleshooting

Error: origin_mismatch

This error occurs during the authorization flow if the host and ports used to serve the webpage don't match an allowed JavaScript origin on your Google Developers Console project. Make sure that you've completed step 5 of Turn on the Google My Business API and that the URL in your browser matches the JavaScript origin.