JSFiddle - React, Tailwind, and code Playground

by Vadim Gremyachev

HTML

<script src="map.js"></script>
<button id="btnShow">Show</button>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

CSS

#map {
   width: 800px;
   height: 640px;
}

JavaScript

var area;
function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: 53.349248,
            lng: -6.255323
        },
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    });

    displayDataLayer(map);

    document.getElementById("btnShow").onclick = function() {
        var result = displayDataLayerBoundsArea(map);
    };
}


function displayDataLayer(map) {
    var dataLayer = map.data;
    dataLayer.loadGeoJson('https://gist.githubusercontent.com/vgrem/440708612b574764c309/raw/2a4e2feadc204806440c51a14c2ef1f54f4fc3d8/Census2011_Province_generalised20m.json');
    dataLayer.setMap(map);
}

function displayDataLayerBoundsArea(map) {
    var dataLayer = map.data;
    var layerBounds = new google.maps.LatLngBounds();
    //1.collect all coordinates from data layer
    dataLayer.forEach(function(f) {
        var geometry = f.getGeometry();
        processCoordinates(geometry, layerBounds.extend, layerBounds);
    });

    if (area != null) {
        area.setMap(null);
    }

    //2.determine whether map bounds are contained within a layer bounds
    if (layerBounds.contains(map.getBounds().getNorthEast()) && layerBounds.contains(map.getBounds().getSouthWest())) {
        //map.fitBounds(bounds);
        area = new google.maps.Rectangle({
            strokeColor: '#00FF00',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#00FF00',
            fillOpacity: 0.35,
            map: map,
            bounds: {
                north: layerBounds.getNorthEast().lat(),
                south: layerBounds.getSouthWest().lat(),
                east: layerBounds.getNorthEast().lng(),
                west: layerBounds.getSouthWest().lng()
            }
        });
    } else {
        //map.fitBounds(bounds);
        area = new google.maps.Rectangle({
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
           ...