Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share yourinput on your UI Kit experience.

Troubleshooting

  • To use the Google Maps JavaScript API, you must include an API key and enable billing for your project.

  • If you see a darkened map or a negative Street View image watermarked with "for development purposes only", you might have an issue with your API key or billing.

  • Troubleshooting steps involve verifying your API key implementation, checking billing account attachment, ensuring billing method validity, and reviewing daily usage limits and IP restrictions.

  • This page offers solutions to common billing and API errors, and links to resources for further assistance.

Reminder: To use the Maps JavaScript API:

API Key and Billing Errors

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 thekey 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.
  • Checkerrors in your browser. If you see the following messages, you are not using your API key correctly:

For web developers:

  • 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, substituteYOUR_API_KEY in the code below with your API key.
      <script async defer    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">  </script>
  • Check the network traffic generated by your website in the browser. In Chrome, this can be viewed using theDevToolsNetwork tab. Here you will see the network requests made by your website. Requests made using the Maps JavaScript API will be under the pathmaps/api/js. Here you can confirm if the requests are using thekey parameter. It may be helpful to filter your network traffic bymaps/api/js when viewing theNetwork tab.

No, I am not using an API key.

To get an API key, click the button below. If you do not see a guided setup, follow the full instructions atGet Started with Google Maps Platform.
Get Started

Yes, I am using an API key.

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:

  1. Go to theCredentials section, which can be accessed from the left side bar underGoogle Maps Platform > Credentials.
  2. 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.
  3. 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:
    1. Create a new project. This can be done by selectingNew Project from the projects list, or by selectingCreate Project via theResource Manager page.
    2. Create a new API key. This can be done on theCredentials page. Once there clickCreate credentials and then selectAPI key.

Once you have located your project in the Cloud console, check if a billing account is attached by navigating to theBilling section in the left side menu.

No, a billing account is not attached to my project.

Go to theEnable Billing page in the Cloud console and add a billing account to your project. For additional information, seeGet Started with Google Maps Platform.

Yes, a billing account is attached to my project.

Great! Let’s make sure the provided billing method is valid.

Is the provided billing method no longer valid (for example an expired credit card)?

You can add, remove, or update a payment method in the Cloud console.

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 byincreasing your daily limit.

You can check your daily limits by going to theAPIs & Services Dashboard in the Cloud console. Once there:

  1. Select a project if prompted.
  2. Select an API from the list, then click theQuotas tab.

Does your API key have an IP addresses restriction?

API keys with anIP addresses restriction can only be used with web services that are intended for use from the server side (such as theGeocoding API and otherWeb Service APIs). Most of these web services have equivalent services within the Maps JavaScript API (for example, see theGeocoding Service). To use the Maps JavaScript API client side services, you will need to create a separate API key which can be secured with anHTTP referrers restriction (seeGet, 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 thezoom andcenter 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.
    Refer to our examples for areference implementation.
  • Use a JavaScript debugger to help identify problems, like the one available in theChrome Developer Tools. Start by looking in the JavaScript console for errors.
  • Post questions toStack Overflow. Guidelines on how to post great questions are available on theSupport page.

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-12-11 UTC.