Troubleshooting Google Maps Platform Premium Plan URL Authorization

Where to manage your Client ID in the Google Cloud Console

The Premium Plan Client ID management functionality is migrating from the Support Portal to the Cloud Console on the Maps' Credentials page, under the Service Accounts section.

The new Client ID area on the Credentials page

Note: The Google Maps Platform Premium Plan is no longer available for sign up or new customers.

Google Maps Platform Premium Plan client IDs are restricted to specifically authorized URLs. If you try to use your client ID at a URL that has not been authorized, you will receive an error message.

This article is intended for Google Maps Platform Premium Plan customers who encounter this issue and need to find the exact URL that needs to be authorized.

Basics

In order to prevent third parties from using your client ID on their own website, the use of your client ID is restricted to a list of URLs that you need to authorize. Each URL can be as specific as a single web page or as generic as an entire domain.

To obtain a list of your authorized URLs or to authorize additional URLs, go to the Credentials page and scroll to the Client ID section.

You can add up to 100 URLs at a time. A client ID may be associated with up to 3000 authorized URLs. If you expect your application to host Google Maps content from more than 3000 locations, you should switch to using API keys instead.

More information about authorizing URLs is available in the developer's guide.

The Problem

An application that lives at a URL that has not been authorized for your client ID will not be able to use the Google Maps Platform with your client ID. A user trying to use such an application will receive an error message, depending on the specific API the application tries to load. Users will not be able to use features that depend on the Maps JavaScript API.

  • The Maps JavaScript API will display this message:

    This page was unable to display a Google Maps element. This URL is not authorized to use the provided Google Maps Client ID. Error Code: UnauthorizedURLForClientIdMapError

  • If you are using the Maps JavaScript API v3.18 or older this message will be displayed:

    Google has disabled use of the Google Maps Platform for this application. This site is not authorized to use the Google Maps client ID provided. If you are the owner of this application, you can learn more about registering URLs in the developer's guide.

Removing the client ID from the application is not a valid fix*. By doing so you will lose all the Google Maps Platform Premium Plan privileges for that application. This means you will not be entitled to:

  • A robust Service Level Agreement (SLA).
  • Customer support.
  • Increased limits on web services.
  • Commercial-grade terms and conditions.
  • Intranet application support within your workplace.

This means that applications that are internal-only or non-free and do not use a valid Google Maps Platform Premium Plan client ID correctly will not be compliant with the standard Google Maps Platform Terms of Service.

The Solution

The correct solution is to find and authorize the right URLs to use your client ID.

In most cases, you need to authorize an application to use your client ID. Applications often use multiple URLs that share a common pattern, e.g. a store locator can live at example.com/stores or at stores.example.com. You need to find a URL that will match all URLs your application uses.

Note: Authorizing www.example.com will not authorize stores.example.com or any other subdomain of example.com.

Each URL you authorize can be as specific as a single web page or as generic as an entire domain, including its subdomains. Please see the developer's guide for more information. We recommend authorizing URLs that match a fairly broad set or URLs, as long as you administer them.

Note: We recommend against authorizing a whole domain unless your organization has full control over all of that domain's content. For instance, authorizing the whole blogspot.com domain would enable everybody to use your client ID, at your expense, from that domain. Instead, you would want to authorize only a specific blog, e.g. googlegeodevelopers.blogspot.com or even a specific page in that blog.

How to find the correct URL

Normally you would find the URL in your browser location bar. On public web sites that do not use <iframe> tags, this is usually easy. If in doubt, you can use the approach below for verification.

Complex applications may load the Google Maps Platform from a URL other than the one in the user's location bar. This would be the case with <iframe> tags or when the URL of the page that loads the APIs is generated dynamically on the server and then sent down to the browser. Finding the correct URLs in these cases requires inspecting certain HTTP requests from the browser to Google servers.

The URL that needs to be authorized is the one in the Referer header for the requests the browser sends to Google to load the API. Each API is loaded from a different URL:

All requests to maps.googleapis.com may be sent to maps.google.com or maps-api-ssl.google.com depending on how the application is set up to load the API. Therefore, when looking for the above requests, it is usually the path (in bold) which is important.

From HTTP headers in your browser

Before you can inspect the Referer header in the above requests, you first need to capture them from your browser. Several tools are freely available to capture HTTP headers in all major browsers:

Note: You need to configure Fiddler2 in order to capture HTTPS traffic. Please see details here.

If you are unable to capture HTTP headers directly from the browser, you can try capturing HTTP traffic using a network protocol analyzer like Wireshark. This tool may be more complex to operate than the tools above, check some Wireshark tutorials on the web if you are not familiar with it.

Once you have your tool of choice, follow these steps to find the URL that needs to be authorized:

  1. Start the capturing tool. Make sure it is capturing HTTP requests from your browser.
  2. Point your browser to the application that is unable to load the Google Maps Platform using your client ID. You should receive one of the error messages described above.
  3. Stop capturing HTTP traffic. This makes it easier to inspect captured traffic.
  4. Find the request that tries to load the Google Maps Platform using your client ID. For instance, if your application tries to load the Maps JavaScript API, look for a request like: 
    GET /maps/api/js?client=gme-yourclientid HTTP/1.1
  5. HTTP request headers follow immediately after that line, with no line breaks. Find one like: 
    Referer: http://www.example.com/stores/find?zip=94043
  6. The URL in that line is the one that needs to be authorized to use your client ID.

From the JavaScript console in your browser

If you use your API key or client ID in a site which is not authorized, the Maps JavaScript API writes error messages in window.console. You can find the correct URL in the error message. In the console, search for error messages that look like this::

Google Maps Platform error: UnauthorizedURLForClientIdMapError ...
Your site URL to be authorized: http://www.example.com/stores/find?zip-94043

For help on finding the error messages, see the section on checking errors in your browser.

Finding the common pattern

To be sure that the whole application will be able to load the Google Maps Platform using your client ID, you need to find a common pattern across all the URLs the application uses and authorize a URL that represents this pattern, following the rules explained in the developer's guide.

This is often as simple as one directory (e.g. example.com/stores), or a subdomain (e.g. stores.example.com — these are often easy to deduce from just a couple of URLs.

When dealing with complex applications, you may need to repeat the steps above with a number of user-facing URLs that display a map. However, this may be too laborious and still result in an incomplete set of URLs. For such an application, its developers would likely be in the best position to provide the URL pattern.