How to properly set up Google Maps
When configuring Google Maps for a Wordpress website, there is often a problem that Google Maps cannot be displayed. The specific prompt is Oops! something went wrong, as shown in the figure below. This problem occurs for the following reasons.
content hidden
1. The address is incorrect
The addresses of many companies cannot be found on Google Maps, and only the maps that can be found on Google Maps can be displayed. Writing the address on the website will basically be accurate to the house number, accurate to a specific road, which is often impossible to find. If you really want to show a certain road and a certain house number, it is recommended to add your address on Google Maps by yourself, so that you can search it. Most people will choose a more labor-saving method, that is, delete a specific road and house number, so that it can be displayed.
For example the following address:
Before modification: No.221 Weiershi Rd , Yueqing economic development zone , Wenzhou, China (cannot be displayed)
After modification: Yueqing economic development zone , Wenzhou, zhejiang China (can be displayed)
Another is that many people like to add postal code after the address, such as this: Yueqing economic development zone , Wenzhou, China 325600
In this way, Google cannot recognize it, and the zip code must be removed.
2. The API is not filled
If you want to use the Google Maps function, you must first fill in the API. If the API is not filled in, the Google Maps function cannot be used. To apply for an API, you need to go to the Google API Center to apply. It is also very simple. Make sure that your Google account has been logged in before applying.
Click here to enter the API application page, you can see the following page.
Click GET A KEY to enter the API acquisition page, select My project, and click ENABLE API.
Uploading...Re-upload and cancel, so that the API application is successful, just copy the following API to your website.
The general API settings are completed here. If you want to be more secure, you can specify that this API can only be used by your website. This needs to be set in the Google Api Console, click here to set the API .
As shown in the figure below, select My project and click Continue.
In the selection of adding credentials for the project below, don't move, just click which credentials I need, and the system will automatically pop up your credentials.
Here I set up two APIs, you don't need to worry about it, just click Finish.
In this way, the system will jump to the API Key management page. If you have multiple websites, you can create multiple API Keys. The API Key with an exclamation point is an API key that can only be used without setting up a specific website. You can click to modify it.
You can modify the API, select http referral source in the application limit, then enter your website domain name in the space below, click save, and your api setting is complete.
Generally, paid themes will provide the interface of google api. Here we take the avada theme as an example. Enter the theme setting area (theme option) of avada, search google in the search bar, and the function setting area of Google map will come out.
You just copy the API into it, and then fill in the address.
In this way, the setting is basically completed. Wherever you want to add the map function, just add it, and then enter the address to display it.
3. Plug-in conflicts
If there are no errors in the above two steps, then it may be that Google's JS conflicts with your plugins. Select all your plugins and disable them. Refresh the Google Maps page at this time, and the map will be displayed.
At this time, you can activate and use one plug-in one plug-in, and refresh the map page every time you activate a plug-in to see if the map can be used normally. When activated to a certain page, the map cannot be used, which proves that the plugin is not compatible with the map.
Generally, this kind of plug-in is a cache acceleration plug-in, so if the website displays abnormally, the first thing to consider is that the cache acceleration plug-in may conflict, and try to disable the cache plug-in.