Google has recently made some policy changes to its maps. Using the Google Maps share function, or Google My Maps embed function would cause problems if you used another product or got something custom.
You can still have a map embedded into your website, but now you need to set up an account with Google Cloud, which requires your contact information and, most importantly, Credit Card details.
Don't worry, as they won't charge you for anything unless you
have over 20,000 people viewing your
Map each month.
If you don't create an account and provide your maps with the unique Google API that your account creation generated, you will encounter the 'For Development Purposes Only' error.
With that explained, here is a step-by-step instruction, solving the 'For Development Purposes Only' error.
The easiest way to do this is through Google's webpage linked here. Just click on
'Get Started' and follow the
Feel free to create one and name it whatever you like regarding' the Project.' It's a feature designed for organizations that use multiple google products for numerous projects like web and map builders.
If you followed the link provided in step one, it would generate an API Key at the end of the prompts, which you can copy. If you already have a Google Cloud Account, you can still follow the previous link, and it will skip through most of tthe prompts to generate a new key.
If you missed the popup or thought you had a key in the past, you can find your existing API Keys by going to the Google Cloud Platform Side Bar -> 'APIs & Services' ->' Credentials.
This step will vary quite a bit depending on how exactly your Map was embedded but will almost always require you to go to the backend of your website, be it WordPress or something else like Wix.
Once you are there, you will either need to find the plugin managing your maps and look for the section asking for the API key or if you don't have a plugin go to the page with the Map and look for the HTML code holding the Map.
Assuming you are using some HTML
there will be a section in the code that has <script src=
"http://somemapprodcutaddress.js"> </script> or some variant. Typically, there is a lot more what we call 'tags' than just an src=, for instance, width= or text=. You need to find the key= or googleapikey= and copy/paste the API key you got before right after it.
If the tag is not there, you will need to add it. So, for instance:
<script src=“http://somemapprodcutaddress.js”> </script>
<script src=“http://somemapprodcutaddress.js” key=“yourapikey”> </script>
Once the key is inserted and the page is saved, the Map should no longer show the "For Development Purposes Only" Error.