Security notice: We have become aware of a security issue that may be affecting websites using specific third-party libraries (including polyfill.io). This issue can sometimes redirect visitors away from the intended website without website owner knowledge or permission. Many of our JavaScript samples previously included a polyfill.io script declaration. We have removed this from our samples. If you have used our JavaScript samples that contain this declaration, we recommend removing the declaration.
Under certain circumstances, a darkened map, or 'negative' Street View image,
watermarked with the text "for development purposes only", may be displayed.
This behavior typically indicates issues with either an API key or billing.
In order to use Google Maps Platform products, billing must be enabled on your account,
and all requests must include a valid API key. The following flow will help troubleshoot this:
Are you using an API key?
I'm not sure. How can I check if I am using an API key?
An API key is passed as the key parameter in the URL that is used to load the
Maps JavaScript API. Here are a few options to check if you are using an API key:
Use the
Google Maps Platform API Checker Chrome extension. This allows you to determine if your
website is properly implementing Google’s licensed Maps APIs.
If you are using a library or plugin to load the Maps JavaScript API,
check the settings for that library and look for an API key option.
Check errors in your browser.
If you see the following messages, you are not using your API key correctly:
If you have access to the source code of your application, look for the
<script> tag which is used to load the Maps JavaScript API.
When loading the Maps JavaScript API, substitute YOUR_API_KEY
in the code below with your API key.
Check the network traffic generated by your website in the browser.
In Chrome, this can be viewed using the
DevToolsNetwork tab.
Here you will see the network requests made by your website. Requests made using the
Maps JavaScript API will be under the path maps/api/js.
Here you can confirm if the requests are using the key parameter.
It may be helpful to
filter your network traffic by maps/api/js when viewing the Network tab.
Great! Let’s move on and check if a billing account is attached to your project.
Is a billing account attached to your project?
I'm not sure. How can I check if billing account is attached to my project?
Go to the
Billing page in the Google Cloud Console and select the project under which your API key was created.
To confirm the key is associated with the project:
Go to the Credentials section, which can be accessed from the left side bar under
Google Maps Platform > Credentials.
Check that the API key you currently use on your website is listed.
If that's not the case, switch to a different project, and check the credentials there.
If you cannot locate the project for your API key, you may have lost access to this project.
Ask others in your organization for help. If the original project cannot be located, you should:
Create a new project. This can be done by selecting New Project
from the projects list, or by selecting Create Project via the
Resource Manager page.
Create a new API key. This can be done on the Credentials page.
Once there click Create credentials and then select API key.
Once you have located your project in the Cloud Console,
check if a billing account is attached by navigating to the Billing section in the left side menu.
No, a billing account is not attached to my project.
Is there an exceeded self-imposed daily limit on the API?
If you have set a daily limit on any of your APIs, which is common to prevent unexpected increases,
you can resolve this by increasing your daily limit.
You can check your daily limits by going to the
APIs & Services Dashboard in the
Cloud Console. Once there:
Select a project if prompted.
Select an API from the list, then click the Quotas tab.
Does your API key have an IP addresses restriction?
API keys with an IP addresses restriction can only be used with web services that are
intended for use from the server side (such as the
Geocoding API
and other Web Service APIs).
Most of these web services have equivalent services within the Maps JavaScript API (for example, see the
Geocoding Service).
To use the Maps JavaScript API client side services, you will need to create a separate API key which
can be secured with an HTTP referrers restriction (see
Get, add, and restrict an API key).
If your code isn't working:
To help you get your maps code up and running, Brendan Kenny and Mano Marks point out
some common mistakes and how to fix them in this video.
Look for typos. Remember that JavaScript is a case-sensitive
language.
Check the basics - some of the most common problems occur with the
initial map creation. Such as:
Confirm that you've specified the zoom
and center properties in your map
options.
Ensure that you have declared a div element in which the map will
appear on the screen.
Ensure that the div element for the map has a height. By default,
div elements are created with a height of 0, and are therefore
invisible.
Use a JavaScript debugger to help identify problems, like the one available
in the Chrome
Developer Tools. Start by looking in the JavaScript console for errors.
Post questions to Stack
Overflow. Guidelines on how to post great questions are available on
the Support page.