Why is My Store Locator Map Missing on My Website, and How Can I Resolve It?
If your store locator map isn’t showing on your website, it’s likely caused by a misconfiguration of your Google Maps API key or compatibility settings. Below, we’ll break down the common causes, their solutions, and steps to restore full functionality.
Common Cause: "RefererNotAllowedMapError"
The "RefererNotAllowedMapError" occurs when the Google Maps API key is restricted in a way that doesn’t authorize requests from your website's domain. Google blocks the map from loading if your site URL, known as the HTTP referrer, is not listed as an allowed referrer in the API key restrictions.
Resolving "RefererNotAllowedMapError"
The solution involves updating the API key restrictions in Google Cloud Console to align with how you’re using Google Maps. Follow the appropriate steps below depending on your setup:
1. For Websites Using Client-Side Google Maps (Maps JavaScript API)
Open the Google Cloud Console and locate the API key your site uses.
Under Application restrictions, choose HTTP referrers (web sites).
Add your website’s allowed referrers, including all relevant versions: - For example: -
https://yourdomain.com/*-https://www.yourdomain.com/*Under API restrictions, only allow the APIs your site needs, such as: - Maps JavaScript API - Places API (if relevant)
Save the changes and redeploy/refresh your site.
2. For Server-Side Web Services Using Google Maps (e.g., Geocoding API)
If you’re using server-side requests to Google Maps (from your backend):
Open or create a server API key in Google Cloud Console.
Under Application restrictions, select IP addresses (web servers, etc.).
Add your server's outbound IP address(es).
Under API restrictions, limit the key’s usage to relevant APIs, like Geocoding API.
Save and redeploy your server.
Tip: If other applications or sources need access (e.g., imports from a trusted service), add their hostnames or IP addresses as additional entries.
Other Potential Issues with Displaying the Store Locator Map
Verify App Embed Settings
For store locator tools that integrate with website themes, ensure the app embed is enabled for the pages hosting the map:
Open your website’s theme settings or app embed settings.
Locate the Store Locator embed options for the relevant page.
Enable the Store Locator embed and save your changes.
Testing and Deployment Guidance
Refresh your site: After updating the API key settings or enabling embeds, reload the affected page to check if the map displays correctly.
Debugging: Use developer tools in your browser to check the console for any API-related errors.
Optional Support
If these steps don’t resolve your issue or if you encounter challenges with key configuration, consider reaching out to your technical support team or Google Cloud support for assistance. This may include delegating role access for troubleshooting (if applicable).
By following these steps, you should be able to fix common configuration issues and ensure your store locator map displays properly. Regularly review your Google Cloud API usage and restrictions to maintain optimal functionality.