Some countries like "Russian Federation" and "Côte d'Ivoire" ("Ivory Coast") doesn't show up when named as such.
Most show up when i use the country code instead, but that isn't useful for my project.
I imagine that there is some sort of list over recognizable country names? Or perhaps a way to access this through the API?
I have taken the country names straight from Wikipedias ISO 3166 list: https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes as specified on the page.
Right now I'm stuck guessing what Google Charts will accept as a country name.
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'
});
//Functional Version
(function() {
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Bolivia', 200],
['RU', 700]
]);
var chart = new google.visualization.GeoChart(document.getElementById('regions_2'));
chart.draw(data);
}
})();
//My Version
(function() {
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Bolivia', 200],
['Russian Federation', 700]
]);
var chart = new google.visualization.GeoChart(document.getElementById('regions_1'));
chart.draw(data);
}
})();
<script src="https://www.gstatic.com/charts/loader.js"></script>
<h1>My non-functional map</h1>
<div id="regions_1" style="width: 900px; height: 500px;"></div>
<h1>Functional map</h1>
<div id="regions_2" style="width: 900px; height: 500px;"></div>