Overview

You are trying to load Google Maps in your PWA (Private Web App), but the map is not displayed correctly and the following error is displayed: 'This page can't load Google Maps correctly'.

Solution

This error could be due to a billing issue related to your Google Cloud account.

All steps and prerequisites outlined in Getting Your Own Google Maps License API Key and its related Google counterpart (Get the API key) are followed prior to conducting the below steps.

To resolve the issue, you must ensure the right configuration for your API key, and then enable Billing on the Google Cloud Account associated with this key.

Configuring your API Key

1. In Google Play Console, open the console Navigation menu and select API & Services > Credentials 
   
2. Under the 'API Keys' section, delete any API keys that are not currently in use by clicking the 'Trash can' icon
   
   
3. Select the API key to use for the Maps feature and click on the 'Pencil' symbol to edit it
   
   
   
4. In this API, set the 'Application restrictions' to HTTP referrers (websites) 
   
   
   
5. Under the same API key, add the websites relevant to your app in the 'Website restrictions' field
   
   Note: It is recommended to add all relevant URLs - your root domain (e.g., example.com), subdomain (e.g., login.example.com), or any PWA custom domains that you wish to attribute to this key. 
   
   
6. In the same API key, set API restrictions to only enable 'Maps JavaScript API'
   
7. Click on the 'Save' button.

Enable Billing on the Google Cloud Account associated with this key

1. In Google Play Console, open the console Navigation menu and select Billing
   • If you have more than one Cloud Billing account, you'll be prompted to select Go to linked billing account to manage the current project's billing
     OR
   • If you do not have any Cloud Billing accounts, click on the 'Create Account' button. Once you fill in the payment and personal information, click on 'Submit and enable billing' to create your account
     
     
2. In the Billing navigation menu, click Account Management
   
   
3. Under Projects linked to this billing account, locate the name of the project that you want to change billing for, and then click the menu next to it.
   
   
4. Select Change billing, then choose the desired destination Cloud Billing account.
   
   
5. Click Set Account.

Testing

Open your PWA and try loading Google Maps again. If the issue persists, please open a support ticket.