JSFiddle - React, Tailwind, and code Playground

by tlavery

HTML

<!DOCTYPE html>
<title>Label points</title>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="infobox.js" type="text/javascript"></script>
<body>
    <div id="map"></div>
</body>

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#map {
    height: 100%;
}
.labels {
    font-family:"Lucida Grande", "Arial", sans-serif;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    width: 40px;
    white-space: nowrap;
}

JavaScript

var map;

        var mapOptions = {
            center: {
                lat: 49.5,
                lng: -126.5
            },
            zoom: 8,
            maxZoom: 15,
            minZoom: 7,
            scaleControl: true
        };

        var labelArray = [];

        //initMap initiates all the styles and listeners
        function initMap() {

            map = new google.maps.Map(document.getElementById('map'), mapOptions);

            var harvestPoints = new google.maps.Data();
            harvestPoints.loadGeoJson('https://api.myjson.com/bins/1d9u6');

            var harvestSubPoints = new google.maps.Data();
            harvestSubPoints.loadGeoJson('https://api.myjson.com/bins/3g2qm');

            var areaIcon = function (feature) {
                labelID = "lb" + feature.getProperty('MGNT_AREA').toString();
                var LatLong = feature.getGeometry().get();
                var labelID = new InfoBox({
                    content: feature.getProperty('MGNT_AREA'),
                    boxStyle: {
                        textAlign: "center",
                        fontSize: "8pt",
                        width: "50px"
                    },
                    disableAutoPan: true,
                    pixelOffset: new google.maps.Size(-25, -24),
                    position: LatLong,
                    closeBoxURL: "",
                    isHidden: false,
                    enableEventPropagation: true,
                });
                labelID.open(map);
                labelArray.push(labelID); //this does not work for some reason
                //there is a custom icon I use for the real page. I won't bother with it here.
                //return ({ icon: 'labels/num_icon.png' });
            };


            var vFalse = {
                visible: false
            };

            var styleFeatures = function (hp, hsp) {
                harvestPoints.setStyle(hp);
                harvestSubPoints.setStyle(hsp);
            };

...