Skip to content

google maps api key

Jump to bottom
iJungleboy edited this page Mar 8, 2018 · 1 revision

Google Maps API Key Instructions

This Content package include a few templates which show Google Maps. Since 2016, 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.

How To Replace the 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:

(function ($) {
    // Change this GoogleApiKey. Get it on Google API Console (https://console.developers.google.com/apis/)
    // read instructions here: https://github.com/2sic/2sxc-content-app/wiki/google-maps-api-key
    var googleApiKey = "AIzaSyAUbRHtu3k_fg3jDGk_qAatE5jA4bC_ndE";

Replace your key in here, as shown.

(function ($) {
    // Change this GoogleApiKey. Get it on Google API Console (https://console.developers.google.com/apis/)
    // read instructions here: https://github.com/2sic/2sxc-content-app/wiki/google-maps-api-key
    var googleApiKey = "your-new-API-key-here";

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.

Clone this wiki locally