Map Example

An example of a Google Map Chart.

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="map_div" style="height: 1vh; width: 640px"></div>
  <style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map {
    height: 100%;
  }
</style>

JavaScript

<html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    google.charts.load('upcoming', { 'packages': ['map'] });
    google.charts.setOnLoadCallback(drawMap);

    function drawMap() {
      var data = google.visualization.arrayToDataTable([
        ['University', 'Team name'],
["	Delft University of Technology	", " 	Taichi	"],
["	Democritus University of Thrace	", " 	greekteam KS-MID 	"],
["	Stellenbosch University	", " 	Stellenbosch University team	"],
["	Bandar Lampung University	", " 	Bandar Lampung University team	"],
["	Diponegoro University	", " 	SEBLAK, Garuda Diponegoro	"],
["	University of Rome Tor Vergata	", " 	wakemake! 2.0	"],
["	University of Belgrade	", " 	BelEng, GRF+/-	"],
["	HTWK Leipzig	", " 	HTWK Leipzig	"],
["	Muhammadiyah University of Surakarata	", " 	CUBE MEGATHRON	"],
["	Bandung Institute of Technology (ITB)	", " 	KUYA TEAM	"],
["	University of Southern Denmark	", " 	Greencrete Group	"]
      ]);

    var options = {'width':1000, 'height':1000, 
      showTooltip: true,
      showInfoWindow: true
    };

    var map = new google.visualization.Map(document.getElementById('chart_div'));

    map.draw(data, options);
  };
  </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>