MissingKeyMapError that just began occurring with Google Charts + displayMode = text

Question

Same problem as described in ERROR: Google Maps API error: MissingKeyMapError, except that:

this is with Google Charts instead of Google Maps
unlike for Google Maps, there seems to be no documentation on how to get a key or use a key when it comes to charts / visualization (e.g. var map = new google.visualization.GeoChart(...)Googling "google charts MissingKeyMapError" yields NOTHING.
this error does not seem to occur if the html+js is served from a web server running on localhost. It only occurs when that html+js is saved to file and then the file is opened in a browser
this error only seems to occur when setting displayMode = 'text' (maybe in doing so Charts is calling Maps and I need to somehow pass some Maps API key inside there?)

This problem did not occur a couple of days ago. Googling "MissingKeyMapError charts" yields NOTHING.

Here's the code snipped that seems to recreate the error:

    var map = new google.visualization.GeoChart(document.getElementById('map2-container')),
        map_options = {
          region: 'US',
          resolution: 'provinces',
          displayMode: 'text',
        };

    map.draw(stateText, map_options);

Any suggestions as to a workaround? Maybe some undocumented API options / hooks / etc?

========== UPDATE =============

I implemented the accepted answer as follows. There may be better ways than this:

<script>
  function init() {
    var script = document.createElement('script');
    script.src = 'http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=drawMap&key=my_key';
    document.body.appendChild(script);
    google.load("visualization", "1.1", { packages:["geochart"], callback: 'drawMap'});
  }

  function drawMap() {
    ...
    var map = new google.visualization.GeoChart(...)
    ...
  }
</script>

...

<body onload="init()">

I would suggest following the instructions on [getting an API key for Google Maps](https://developers.google.com/maps/documentation/javascript/get-api-key), enable the Google Charts API (if it is available to be enabled). — geocodezip, Jun 23 '16 at 21:11
that worked! thx. feel free to post and I will mark as answered with sample code solution — mwag, Jun 23 '16 at 21:35

Kazi Sabbir Ibna Ataur · Answer 1 · 2017-03-17T01:47:04.937

4

If you are doing it for chart API and loading the packages using google.charts.load(...), there is other way now. Set the version to '45' or 'upcoming' and also provide your API Key like this

  var myMapsApiKey = "some_apikey_you've_got_already";
  google.charts.load('45', { mapsApiKey: myMapsApiKey, packages: [ 'geochart'] });

I'm referring from here and tested this working.

edited Mar 17 '17 at 01:47

answered Sep 07 '16 at 03:23

Kazi Sabbir Ibna Ataur

1,328
1
9
9

score 1 · Accepted Answer · answered Jun 24 '16 at 00:22

1

Follow the instructions on getting an API key for Google Maps, enable the Google Charts API (if it is available to be enabled)

answered Jun 24 '16 at 00:22

geocodezip

158,664
13
220
245

MissingKeyMapError that just began occurring with Google Charts + displayMode = text

2 Answers2