Google Maps not displaying on the live site
Google Maps is an external service that lets you display your business's location in an interactive way. You can add a Map element to any block on your website. However, if it appears to be not working properly on the live site, this article will help you troubleshoot most common issues.
For the Map to work, you have to add a unique API key obtained from Google. This key basically authorizes your website to use the Map and lets your visitors interact with the Map properly. More on this — in our Adding the API key to Google Maps article.
Sometimes, even if the API key has been added properly, the Map still may not be working. This could be due to a billing issue on Google's end or missing authorization. Here's how you can check your issue.
Open the live site.
Open the Developer Tools in the browser you are using. If you are using Chrome, open the menu in the browser window, select the option "More Tools," and then "Developer Tools":
Navigate to the Console tab:
Find a message for the Google Maps error. Usually there is the error name and a link to the Google Maps Help Center that will give more clarifications on how to resolve the issue. For example, on the screenshot below you can see that the error is called ReferrerNotAllowedMapError. If you click on the link beneath that error, you'll get a clearer explanation: https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error.
Make sure to follow the guides from Google Maps to resolve any issues with displaying their service on your website.
If you are still struggling to resolve the error, contact us in chat.
1. Check that you added a Google Maps API key
For the Map to work, you have to add a unique API key obtained from Google. This key basically authorizes your website to use the Map and lets your visitors interact with the Map properly. More on this — in our Adding the API key to Google Maps article.
2. Check for the errors in the Console
Sometimes, even if the API key has been added properly, the Map still may not be working. This could be due to a billing issue on Google's end or missing authorization. Here's how you can check your issue.
Open the live site.
Open the Developer Tools in the browser you are using. If you are using Chrome, open the menu in the browser window, select the option "More Tools," and then "Developer Tools":
Navigate to the Console tab:
Find a message for the Google Maps error. Usually there is the error name and a link to the Google Maps Help Center that will give more clarifications on how to resolve the issue. For example, on the screenshot below you can see that the error is called ReferrerNotAllowedMapError. If you click on the link beneath that error, you'll get a clearer explanation: https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error.
Make sure to follow the guides from Google Maps to resolve any issues with displaying their service on your website.
If you are still struggling to resolve the error, contact us in chat.
Updated on: 12/05/2023
Thank you!