JSFiddle - React, Tailwind, and code Playground

by Boyke Ferdinandes

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="mymap_xx"></div>

CSS

#mymap {
  position: absolute;
  right: 316px;
  height: 100%;
  width: 100%;
}

JavaScript

require.config({
  paths: {
    "async": "https://static.klipfolio.com/static/js/require_async"
  }
});
require(["async!https://maps.google.com/maps/api/js?sensor=false"], function(ok) {
  var city = $("#map-city_xx li");
  var lat = $("#map-lat_xx li");
  var long = $("#map-long_xx li");
  var liveusers = $("#map-liveusers_xx li");
  var data = [];
  var infowindow;
  var infowindowClosed = true;

  function initialize() {
    var counter = 0;
    for (var i = 0; i < lat.length; i++) {
      data.push({
        center: new google.maps.LatLng($(lat[i]).text(), $(long[i]).text()),
        population: $(liveusers[i]).text(),
        city: $(city[i]).text()
      });
    }

    var mapOptions = {
      center: new google.maps.LatLng(46.82, 8.00),
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.HYBRID,
      mapTypeControl: true
    };
    var map = new google.maps.Map(document.getElementById("map_xx"), mapOptions);

    var layer = new google.maps.FusionTablesLayer({
      query: {
        select: 'kml_326',
        from: '420419'
      },
      styles: [{
        where: "name_0 <> 'Switzerland'",
        polygonOptions: {
          fillColor: "#000000",
          strokeColor: "#FFFFFF",
          strokeOpacity: 0.02,
          strokeWeight: 0,
          fillOpacity: 0.35
        }
      }, {
        where: "name_0 = 'Switzerland'",
        polygonOptions: {
          fillColor: "#96ff7c",
          strokeColor: "#000000",
          strokeWeight: 1,
          fillOpacity: 0.0
        }
      }]
    });
    layer.setMap(map);

    infowindow = new google.maps.InfoWindow();
    google.maps.event.addListener(infowindow, 'closeclick', function(e) {
      infowindowClosed = true;
    });



    for (var cityx in data) {
      var populationOptions = {
        strokeOpacity: 0.35,
        strokeWeight: 2,
        strokeColor: movingColour,
        fillColor: movingColour,
        fillOpacity: 0.35,
        map: map,
        clickable: true,
        center:...