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"></div>

CSS

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

JavaScript

window.onload = function() {
  var myLatlng = new google.maps.LatLng(0, 0);

  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("mymap"), 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);
}