How to add a European map to your Blog Post

The below video will show you a quick and easy way to add an interactive European map to your blog post. In this example, I used publicly available data from the website to build a map of North Atlantic Treaty Organization (NATO) Defense Expenditures by NATO member country. Remember, you do not have to understand how the code works to use it on your blog.

Interactive Map and Code Snippet

NATO Defense Expenditures by Member Country

<script type="text/javascript" src=""></script>
<script type="text/javascript">
      google.charts.load('current', {'packages':['geochart']});
      function drawRegionsMap() 
        var data = google.visualization.arrayToDataTable([
        ['Country', 'Expenditures'],
        ['Czech Republic',1.035],
        ['Slovak Republic',1.159],
        ['United Kingdom',2.209],
		var options = {
        region: '150', // Europe
        colorAxis: {colors: ['#F90909', '#F1F909']},
        datalessRegionColor: '#ffffff',
        defaultColor: '#000000',
        mapType: 'styledMap',
        zoomLevel: 15,
        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
        chart.draw(data, options);
<div id="regions_div" style="width: 900px; height: 500px;"></div>

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

Powered by ConvertKit