We are having almost exactly the same problem on our website. Some differences, though… we never opted to purchase Supermap, so we’re using the built-in map function in Version 2.1.4 of WP-Property. I’ve been avoiding upgrading to the current version for fear it might break something (we have a lot of custom code).
You can see the “development map” on our pages, for example, https://seadrift.com/properties/dp109/
Scroll down towards the bottom…
I did get Google Maps API key from Google today and entered it on the Property Settings page. When that didn’t fix the problem, I asked Google for help and they replied:
It seems like the issue is in your plugin. I have checked your website and can see here that the map does not have an API key even if you already added it in the plugin.
Please be informed that an API key is required to use Google Maps Platform products. Failure to use an API key will result in having the daily quota limited to 1. If you exceed this, the Javascript API will return a degraded map with “For development purposes only” error message. For server side requests, this will result to quota error.
Just to set the correct expectation, implementation through wordpress themes/plugins are out of scope for us. Although we would love to help, we lack the knowledge, access to the source code or tools to debug the issues that you encounter with that. Problems with themes/plugins are best to be reported to the ones who developed them.
To explain further on this, the plugin that you are using has a more user-friendly way of adding an API key since you will just put it in an input box and you don’t have to access the codes to add it on your map. However, since that is how the plugin is doing it, there is a possibility that it will not be added in an API key because it was programmed and not done manually.
In a normal JavaScript API implementation, we just add an API key manually in the HTML code like this (we just replace YOUR_API_KEY with our own API key):
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>
Then it will surely work because we added the key ourselves. That’s how it’s being done in a normal way. When I checked your website, the script tag looks like this:
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true&ver=4.4.2"></script>
——-
Any ideas?
Thanks.