Geo Chart Example

An example of a Google Geo Chart.

by PhilQ

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>
       <div id="regions_div" style="width: 800px; height: 500px;"></div>

CSS

#regions_div path {
	stroke-width: 2; /* control the countries borders width */
	stroke:rgb(20,80,95); /* choose a color for the border */
	stroke:rgb(136,172,46); /* choose a color for the border */
}

JavaScript

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

      function drawRegionsMap() {

        var data = google.visualization.arrayToDataTable([
          ['Adres', 'Popularity'],
          ['NL', null]
        ]);

        var options = {
			region: 'NL',
			//displayMode: 'markers',
			backgroundColor: {
				fill: 'rgb(87,201,232)',
				//stroke: 'black',
				//strokeWidth: '0'
			},
			legend: null,
			tooltip: {
				trigger: 'none'
			},
			keepAspectRatio: true,
			defaultColor: 'rgb(166,206,57)',
			//colorAxis: {colors: ['rgb(166,206,57)', 'rgb(166,206,57)']},
			datalessRegionColor: 'rgb(136,172,46)',
		};

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

        chart.draw(data, options);
      }