Google Maps is essential for many websites, providing visitors with interactive location information. However, loading issues can hinder this functionality, leading to a poor user experience.
Whether the map fails to load, displays incorrectly, or shows an error message, resolving these issues promptly is crucial.
This article will explore common causes of Google Maps loading problems and provide practical solutions to fix them, ensuring that your map works smoothly and effectively on your site.
The Map module requires a valid Google Maps API key. For more details regarding the Map module, please follow the Divi Map Module documentation.
Note:
When you copy the Google Maps API key and paste it into the Divi → Theme Options → General Tab → Google API Key, make sure there is no extra space at the start or end.
The following API libraries should be enabled in your Google API key settings:
Google Maps Geocoding API
Google Maps Javascript API
Google API (including Maps API) requires a valid Payment method to be added to your account.
Google offers $200 free credits each month. If that is exceeded, you will be charged. For more information on adding your payment details, please check the Add a Payment Method section in this article.
Enable the required API Libraries
Log in to your Google Developers Console
Click the APIs & Services quick link
Click on the Enable API and Services link
Use the Search box at the top to search for maps
Click on Maps JavaScript API
Click on the Enable button
Search for Geocoding API and Enable it
Note: The Google Maps API key may not work if the allowed referrer's domain name doesn't match your website's domain name.
Check for Allowed Referrers
Click on the Credentials button from the left sidebar
Click on the API Key used on the Divi website
Choose Website under Set an application restriction
Add Restrictions, for example
*example.com
*example.com/*
Notes:
Ensure that the example.com in step 4 is replaced with your own domain name;
It may take up to 5 minutes for settings to take effect;
Google has a limited free API usage quota. If the quota is exceeded, Google Maps will work in limited mode. This page provides more details about limits and pricing.
Add a Payment Method
To use Google's services, which include the Google MAPS API, you must add a valid form of payment to your account.
Log in to your Google Cloud Account
Click on your profile picture (upper right corner)
Click on the Google Account button
Click on the Payments & subscriptions option from the left sidebar
Click on Manage Payments methods under the Payment Methods cart
Click on the +Add Payment method option
Follow the steps to add your Credit card information.