Geo Chart Example

An example of a Google Geo Chart.

by mram888

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<select id="mapRegion" class="form-control input-sm pull-right mr5"  ng-model="mapRegion" name="mapRegion" onchange="drawRegionsMap()">
            <option value="world" selected="selected">World</option>
            <optgroup label="Americas">
            <option value="019">Americas</option>
            <option value="021">Northern America</option>
            <option value="US">United States of America</option>
            <option value="029">Caribbean</option>
            <option value="013">Central America</option>
            <option value="ME">Mexico</option>
            <option value="005">South America</option>
            </optgroup>
            <optgroup label="Europe">
            <option value="150">Europe</option>
            <option value="154">Northern Europe</option>
            <option value="GB">United Kingdom</option>
            <option value="155">Western Europe</option>
            <option value="DE">Germany</option>
            <option value="FR">France</option>
            <option value="151">Eastern Europe</option>
            <option value="039">Southern Europe</option>
            <option value="ES">Spain</option>
            </optgroup>
            <optgroup label="Asia">
            <option value="142">Asia</option>
            <option value="143">Central Asia</option>
            <option value="030">Eastern Asia</option>
            <option value="034">Southern Asia</option>
            <option value="035">South-Eastern Asia</option>
            <option value="145">Western Asia</option>
            </optgroup>
            <optgroup label="Africa">
            <option value="002">Africa</option>
            <option value="015">Northern Africa</option>
            <option value="011">Western Africa</option>
            <option value="017">Middle Africa</option>
           ...

JavaScript

var array = [["Spain",911],["Nigeria",54],["France",32],["United States",30],["United Kingdom",30],["Chile",21],["Ghana",13],["India",12],["Venezuela",12],["Kenya",11],["Italy",11],["Indonesia",11],["Brazil",10],["Turkey",9],["Netherlands",9],["Colombia",9],["Mexico",8],["Philippines",7],["Argentina",6],["Portugal",5],["Uganda",4],["Bangladesh",4],["Saudi Arabia",4],["South Africa",3],["Honduras",3],["Finland",2],["Ecuador",2],["Denmark",2],["Ukraine",2],["Tanzania",2],["Senegal",2],["Zimbabwe",2],["Armenia",2],["Belgium",2],["Romania",2],["Ireland",2],["Botswana",2],["Germany",2],["Nicaragua",2],["Pakistan",2],["Canada",2],["Australia",2],["Thailand",1],["Andorra",1],["Panama",1],["Lesotho",1],["Sweden",1],["China",1],["Gambia",1],["Austria",1],["Peru",1],["Afghanistan",1],["Gabon",1],["Haiti",1],["Cuba",1],["Egypt",1],["Hungary",1],["Slovakia",1],["Bulgaria",1],["Serbia",1],["Martinique",1],["Congo - Kinshasa",1],["Greece",1],["Uruguay",1],["Slovenia",1],["Laos",1],["Japan",1],["Poland",1],["Belarus",1],["Lebanon",1]];
      google.charts.load('current', {
        'packages': ['geochart']
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var e = document.getElementById('mapRegion');
      	var myRegion = e.options[e.selectedIndex].value;

        var data = google.visualization.arrayToDataTable([
          ['Country', 'Objects'],
          ...array,
        ]);

        var options = {
        colorAxis: {colors: ['#d9f2e6','#26734d']},
        region: myRegion,
        };

        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        chart.draw(data, options);
      }