How to add a South American Map to your Blog Post

In this video, I will show you how to add an interactive map of South America to your blog post. In the example below I took data from the International Coffee Organization (ico.org) to illustrate the top Coffee exporting countries in South America. Remember, you do not have to understand how the code works to use it on your blog.

Interactive Map and Code Snippet

Top Coffee Exporting Countries in South America for 2016


<code>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Thousand 60kg Bags'],
['Bolivia',1],
['Brazil',2520],
['Colombia',840],
['Ecuador',74],
['French Guiana',500],
['Peru',165],
]);
var options = {
region: '005', // South America
colorAxis: {colors: ['#FFF5EE', '#6F4E37']},
datalessRegionColor: '#FFFFFF',
defaultColor: '#000000',
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</code>

1928.us

Subscribe now and we will let you know when we post something cool!

Powered by ConvertKit