Google Maps API Key Free 2019

This Content package include a few templates which show Google Maps. Since 2019, Google requires all new domains using maps to first get a key. Because of this, the included maps include a demo-key which works, but you shouldn't use it in production (localhost).

API Key Review

To use the JavaScript API You must have an API key. The API key is a unique identifier used to authenticate the request associated with your project for the purposes of the use and billing purposes.

How To Replace the Key

You must include an API key with every Maps JavaScript API request. In the following example, replace YOUR_API_KEY with your API key.

First of all, you must get an API key for your site. This is annoying, but there is no real way around it. You can get it here or read the Googles instructions for getting a key.

Then, you must replace the test-key in the included JavaScript file with your key.

Open the [your portal root]/2sxc/Content/dist/google-maps.js, the file begins with this code:

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=your-new-API-key-here"></script>

Replace your key in here, as shown.

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=AIzaSyAUbRHtu3k_fg3jDGk_qAatE5jA4bC_ndE"></script>

That's it!

Consequences of not replacing the key

If you only disable the warning we added to the JS, then it would work for a short time, but will randomly fail some time in the future, when your site is live. So don't try that.

Why will it fail randomly? The included key can only generate a few thousand maps per day. If people start using it in production, then these maps will be added up. So every day a few thousand maps will work, and the rest will fail. This will feel very random, because all the maps generated on other sites are counted too.

So you must use your own maps API key

Advanced Options if You are Using Gulp

In case you are using gulp or SASS, you may want to re-run gulp and possibly minify/uglify the js file. At the moment we didn't do it, because it was important that people could change the API key without learning npm/gulp etc. If you do run gulp, then you should remember to also replace the API-key in the /src/ folder.