How to set an API key when using Google's script loader?

8.5k Views Asked by At

I registered my project and generated a browser key at https://code.google.com/apis/console/.

Now how do I use that key when using the Google Script Loader?

I've been doing this, which works (with or without the key parameter), but even after several weeks the API console shows no requests:

<script src=//www.google.com/jsapi?key=my_key"></script>
<script>
    google.load('maps', '3.10', { other_params : 'libraries=places&sensor=false', callback : ... })
</script>
2

There are 2 best solutions below

0
On BEST ANSWER

The key is useless for the jsapi, you must append it to other_params:

<script>
    google.load('maps', '3', {
        other_params: 'key=my_key',
        callback: function(){}
    });
</script>
0
On

When using charts/loader you have to do something like this:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', {
        'packages':['geochart'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
    });
    google.charts.setOnLoadCallback(drawRegionsMap);
    ...
</script>

Note the mapsApiKey property.

As described in https://developers.google.com/chart/interactive/docs/gallery/geochart