"For development purposes only" google map error

[Pete44131]

Google is showing your sample map as "for development purposes only" with the map area grayed out. I know this issue also popped up on our website only a week or two ago (from my knowledge). Research states that you/I need to use an API key for the map now. How is this fixed or where would the API key need to be added?

[crebelein]

Here is where I added the API key in my code. This is the in the HTML on the map page itself.

<script src="/js/agentlocator/js/libs/handlebars.min.js"></script>
<script src="https://maps.google.com/maps/api/js?key=MyAPIKeyHere"></script>
<script src="/js/agentlocator/js/plugins/storeLocator/jquery.storelocator.js"></script>
<script>
  $(function() {
    $('#bh-sl-map-container').storeLocator({ 'autoGeocode':   true,
                                             'slideMap':      false,
                                             'modal':         true,
                                             'openNearest':   true,
                                             'originMarker':  true,
                                             'mapSettings':   { zoom: 10 },
                                             'distanceAlert': 100,
                                             'dataLocation':  '/myData.json' });
  });
</script>

You will need to register with Google to obtain a key (of course). I hope that helps!

[Pete44131]

that seems super easy but how do you keep someone from "stealing" your API key that way?

[bjorn2404]

That is correct. As of July a valid credit card also needs to be on file with Google though most will be covered by the free pricing tier. I did a write-up on the details for the WordPress version of the plugin that would also be applicable for the JS version:

https://cardinalwp.com/important-upcoming-google-maps-api-billing-changes/

Restriction information can be found here:

https://cloud.google.com/docs/authentication/api-keys#api_key_restrictions

[crebelein]

bjorn2404 beat me to it. As he indicated in his link, you set various restrictions on your API key. I actually generated a couple of keys for my work, one for the website which requires a certain referrer header and another for some automated tasks that require certain source addresses. Google offers some pretty decent flexibility here.

[Pete44131]

Thank you crebelein and bjorn.... that was super simple and I think I added the API restrictions appropriately... time will tell haha.

I'm a bit of a novice and I forget a lot when I'm not in the heat of cobbling something together. I am at the point where I think an entire website revamp is in order and not sure I am up to that task (I code directly in notepad). But for now, I have the map working correctly again. Thanks!!

[crebelein]

No problem, Pete44131. Glad that I could help. When I first saw this come down the pike it caught me off guard as well. I was using a much much older version of the code and needed to upgrade the entire locator (including my dataLocation feed).

Don't feel bad about coding everything in Notepad either. I still do 95%+ of my development work in vi!

[Pete44131]

I have Dreamweaver... doesn't make much easier. and yes, my code for the map is way older than I can remember and no idea where I got it. I feel like it only has a couple files to run.