Markers won't appear on GeoChart, but the map displays just fine

Question

I'm having trouble getting Geochart Markers to load onto a map. The script provided by Google renders a blank map on my website, but the markers and map appear as they should on jsfiddle. Any help would be much appreciated.

Here's the code:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">

google.charts.load('current', {'packages': ['geochart']});
google.charts.setOnLoadCallback(drawMarkersMap);

  function drawMarkersMap() {
  var data = google.visualization.arrayToDataTable([
    ['City', 'Collaborator'],
    ['Detroit', "text here"],
    ['Cleveland', "text here"],
    ['Joondalup', "text here"],
    ['Wanaka', "text here"]
    ['Liverpool', "text here"],
    ['Styria', "text here"],
    ['Edwardsville', "text here"],
    ['Austin', "text here"],
    ['Houston', "text here"],
    ['Stockholm', "text here"],
    ]);

  var options = {
    region: 'world',
    displayMode: 'markers',
    backgroundColor: '#252426',
    colorAxis: {colors: ['blue']},
    magnifyingGlass: {enable: false},
    defaultColor: '#f1910e',
    enableRegionInteractivity: 'true',
     };

  var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
  chart.draw(data, options);
};
</script>

score 3 · Accepted Answer · answered Jul 08 '16 at 18:38

I figured it out! Apparently google now requires an API key to display markers on geocharts. Here's the modified, functional, script. The second line is the only change.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_GOES_HERE" async="" defer="defer"></script>

<script type="text/javascript">

google.charts.load('current', {'packages': ['geochart']});
google.charts.setOnLoadCallback(drawMarkersMap);

function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['City', 'Collaborator'],
['Detroit', "text here"],
['Cleveland', "text here"],
['Joondalup', "text here"],
['Wanaka', "text here"]
['Liverpool', "text here"],
['Styria', "text here"],
['Edwardsville', "text here"],
['Austin', "text here"],
['Houston', "text here"],
['Stockholm', "text here"],
]);

var options = {
region: 'world',
displayMode: 'markers',
backgroundColor: '#252426',
colorAxis: {colors: ['blue']},
magnifyingGlass: {enable: false},
defaultColor: '#f1910e',
enableRegionInteractivity: 'true',
};

var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>

API keys are free through google, provided your website isn't receiving too much traffic. You'll need to register a "browser key". Here's a link to get it set up: https://developers.google.com/maps/documentation/javascript/get-api-key

Any suggestions for enabling this to use an environment variable or something for the api key so that the api key isn't hard-coded (which is a security risk)? — Jack, Dec 14 '16 at 21:11
http://stackoverflow.com/questions/39625587/how-do-i-securely-use-google-api-keys — Alex B, Dec 15 '16 at 21:45

score 0 · Answer 2 · edited May 23 '17 at 12:22

0

Based from this forum, it seems like your network might be blocking the geocoding. The GeoChart needs to geocode the markers in order to know where to draw them.

Check this related SO thread and example from GitHub.

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['State', 'Foo Factor'],
    ['US-IL', 200],
    ['US-IN', 300],
    ['US-IA', 20],
    ['US-RI', 150]
  ]);

  var geochart = new google.visualization.GeoChart(
      document.getElementById('visualization'));
  geochart.draw(data, {width: 556, height: 347, region: "US", resolution: "provinces"});
}

Hope this helps!

edited May 23 '17 at 12:22

Community

1
1

answered Jul 06 '16 at 13:59

abielita

13,147
2
17
59

Thanks for the reply! I found a number of console errors which seemed to be a result of my adblocker. After disabling the adblocker, there was only one console error, which I think could be the problem: "Google Maps API Error: MissingKeyMapError" I generated an API key, but now I'm not sure how/where to insert it into the script. – Alex B Jul 07 '16 at 14:20

Markers won't appear on GeoChart, but the map displays just fine

2 Answers2