JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<title>Label points</title>
<div id="map"></div>

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
#map {
    height: 100%;
    width: 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 = [];
var labelArraySub = [];

//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');


    function newLabel(feature) {
        labelID = "lb" + feature.getProperty('MGNT_AREA').toString();
        var LatLong = feature.getGeometry().get();
        var label = 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
        });
        label.open(map);
        return label;
    }
    var areaIcon = function (feature) {
        labelArray.push(newLabel(feature)); //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: 'http://maps.google.com/mapfiles/ms/micons/blue.png'
        });
    };
    var areaIconS = function (feature) {
        labelArraySub.push(newLabel(feature)); //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);
       ...