If you’re trying to add Google Maps to your website and see the error “Google Maps JavaScript API Error RefererNotAllowedMapError”, don’t worry! This error is common, and fixing it is easier than you think. In this guide, we’ll explain what this error means, why it happens, and how to fix it step by step. By the end, you’ll have Google Maps working perfectly on your website.
What is the "RefererNotAllowedMapError"?
The “RefererNotAllowedMapError” is an error that happens when Google doesn’t recognize your website as an allowed source to use the Google Maps API. In simple terms, Google is saying, “I don’t know this website, so I can’t show the map here.”
This error occurs because Google requires you to tell it which websites are allowed to use your API key. If your website’s address isn’t on the list of allowed sites, Google will block the map from loading and show this error.
Why Does This Error Happen?
The main reason for this error is that your API key isn’t set up correctly. When you create an API key for Google Maps, you need to tell Google which websites can use it. This is done by adding your website’s address to a list called “HTTP Referrers” (allowed domains).
If you forget to add your website’s address to this list, or if you make a mistake while typing it, Google won’t allow the map to load, and you’ll see this error.
How to Fix the "RefererNotAllowedMapError"
Fixing this error is simple. You just need to update your API key settings in the Google Cloud Console. Follow these steps:
Step 1: Go to the Google Cloud Console
- Open your browser and go to the Google Cloud Console.
- Sign in with the Google account you used to create the API key.
Step 2: Select Your Project
- Click on the project dropdown at the top of the page.
- Choose the project linked to your Google Maps API key.
Step 3: Go to the API Credentials Page
- In the left-hand menu, click on “APIs & Services”.
- Then, click on “Credentials”.
Step 4: Edit Your API Key
- Find the API key you’re using for Google Maps and click on it to edit.
- Under “Application restrictions”, make sure the “HTTP referrers (web sites)” option is selected.
Step 5: Add Your Website to the Allowed List
- In the “Website restrictions” box, click on “Add an item”.
- Type in your website’s address. For example:
- If your website is https://www.example.com, add https://www.example.com/*.
- The * at the end means that all pages on your website are allowed to use the API key.
- If you have multiple domains or subdomains, add them one by one.
Step 6: Save Your Changes
- Click the “Save” button at the bottom of the page.
- Wait a few minutes for the changes to take effect.
Step 7: Test Your Website
- Go back to your website and refresh the page where the map is supposed to load.
- If everything is set up correctly, the map should now appear without any errors.
If you’re seeing a different error like "ApiNotActivatedMapError", it means the Google Maps JavaScript API is not enabled for your project. This is another common issue that can be fixed easily. To learn how to resolve it, check out our guide on How to Fix Google Maps JavaScript API Error: ApiNotActivatedMapError.
Flowchart: Fixing the RefererNotAllowedMapError
Subscribe to Our Daily Newsletter!
Don’t miss out on our latest blog posts, tips, and guides!
Join our community today and stay informed with all the latest content. Simply enter your email below and hit Subscribe!
👉 Subscribe Now
Still Having Trouble? Try These Tips
📌If you’ve followed the steps above and the error still appears, try these additional tips:
- Check for Typos: Double-check the website address you entered in the allowed referrers list.
- Clear Your Browser Cache: Sometimes, old data in your browser can cause issues. Clear your cache and reload the page.
- Verify Your API Key: Make sure the API key is being used correctly in your website’s code.
- Enable the Correct APIs: Ensure the Google Maps JavaScript API is enabled in your Google Cloud Console.
Common Mistakes to Avoid
🔧While fixing this error, watch out for these common mistakes:
- Forgetting to Add the Protocol: Always include http:// or https:// before your website’s address. For example, use https://www.example.com instead of just www.example.com.
- Using the Wrong Wildcard: Use * only at the end of the address (e.g., https://www.example.com/*). Don’t use it in the middle of the address.
- Not Saving Changes: Always click “Save” after updating your API key settings.
Common Causes and Solutions for "RefererNotAllowedMapError"
Cause | Solution |
Incorrectly configured HTTP referrers | Verify the website domain is correctly listed under “HTTP referrers” in the Google Cloud Console. |
Typos in domain name | Double-check the spelling of the domain name entered in the Google Cloud Console. |
Missing protocol (http:// or https://) | Ensure the correct protocol (http:// or https://) is included when adding the referrer. |
Wrong API restrictions selected | Confirm that “Maps JavaScript API” is enabled and selected under API restrictions for the key. |
Using IP address restrictions for web API | For website usage, “HTTP referrers” should be used instead of “IP addresses” restriction. |
Subdomain not included | Use a wildcard (*.yourdomain.com/*) or add specific entries for subdomains. |
Incorrect wildcard usage | Ensure wildcards are used correctly (e.g., yourdomain.com/* is correct, *.yourdomain.com/* for all subdomains). |
Final Thoughts
The “Google Maps JavaScript API Error RefererNotAllowedMapError” is a common issue, but it’s easy to fix with the right steps. By following this guide, you can configure your API key correctly and get your Google Maps working on your website. Remember to double-check your settings, avoid common mistakes, and test your website after making changes.
If you still have questions, refer to the Google Maps JavaScript API documentation for more help.