JSFiddle - React, Tailwind, and code Playground

by Sitebase Mostmans

HTML

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

    function drawMap() {
      var data = google.visualization.arrayToDataTable([
        ['Lat', 'Long', 'Name'],
        // list generated by script
        [52.27297211, 4.72507, '#WiFi@Changi'],
        [31.74171066, 35.19660568, 'ADAHAN'],
        [40.41540909, -80.06012726, 'AMX'],
        [55.64355469, 12.63265705, 'AP7'],
        [44.87996674, -93.20000458, 'AWG-WiFi'],
        [37.77672958, -122.4229126, 'AbsinthePublic'],
        [41.89208221, 12.49322414, 'Appartamento_1'],
        [39.87558746, -75.24794769, 'BALoungeWiFi'],
        [51.31391144, 4.88086271, 'BVM-GASTEN'],
        [40.75588608, -73.98448181, 'BXLCafe-guest'],
      ]);

    var options = {
      showTooltip: true,
      showInfoWindow: true
    };

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

    map.draw(data, options);
  };
  </script>