Google Data Layer

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://www.decisionaid.systems/isobands.js"></script>
<!-- https://maps.googleapis.com/maps/api/js -->
<div id="map" style="height: 100%; min-height: 800px;"></div>
<div id="result"></div>

JavaScript

function styleMap() {
        map.data.setStyle(function(feature) {
            //default colors
            var fillColor = 'gray';
            var strokeColor = 'black';
            //if the color property of the feature is defined set as style
            if (feature.getProperty('color')) {
                fillColor = feature.getProperty('color');
                strokeColor = fillColor;
            }
            return ({
                fillColor: fillColor,
                fillOpacity: 0.4,
                strokeColor: strokeColor,
                strokeWeight: 1
            });
        });

        map.data.addListener('mouseover', function(event) {
            map.data.revertStyle();
            map.data.overrideStyle(event.feature, {
                strokeWeight: 4
            });
        }.bind(this));
        map.data.addListener('mouseout', function(event) {
            map.data.revertStyle();
        }.bind(this));

    }

    //init map
    var map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(81, 12),
        streetViewControl: false,
        mapTypeId: google.maps.MapTypeId.HYBRID,
        zoom: 6
    });

    //add the contour to the map
    map.data.addGeoJson(isobands);
    //set styles to the contour map
    styleMap();