Encountering the “RefererNotAllowedMapError” when using the Google Maps JavaScript API can disrupt the functionality of your map integration on your website. This error typically occurs due to incorrect API key settings or restrictions.
This article will guide you through troubleshooting and fixing this error, ensuring your Google Maps API works seamlessly and your maps display correctly.
Check the browser's Console for errors
Open the browser's Developer Tools
Switch to the Console Tab
Check for errors
Usually, the following error will be displayed:
Fix Google Maps JavaScript API Error: RefererNotAllowedMapError
Log in to your Google Developers Console account
Select the Project used for your Divi website
Click on the APIs & Services button
From the left Sidebar, click on the Credentials option
Click on the API key used on your Divi Website
Check if, under Set an application restriction, the Websites option is enabled
If it is checked, ensure that the Website restrictions are correctly added and there are no typos
In the example above, both URLs contain two typos. We need to fix those typos for the Google Maps API key to work correctly.
The correct values in this example are:
*.eduard.divi.support
*eduard.divi.support
Notes:
Changes may not appear instantly, and a delay could occur before Google updates the data. Usually, it takes a few minutes.
If you have trouble setting the correct values for the domain, you can also choose None in the Set an application restriction option
Having the Google Maps API correctly configured, there will be no errors displayed in the browser's Console tab, and the Map module will correctly display the Google Map:
