JSFiddle - React, Tailwind, and code Playground

by justin_barber_arvig

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;dummy=.js"></script>
<div id="categories"></div>
<div id="map"></div>

CSS

#categories label {
    display: block;
}

#map {
    width: 500px;
    height: 300px;
}

JavaScript

$(function() {
    
    var div = $('#categories');
    
    var map = new google.maps.Map($('#map').get(0), {
        center: new google.maps.LatLng(0, -180),
        zoom: 3,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
    var categories = {
        rayon: [
            {
                coordinates: [
                    [37.772323, -122.214897],
                    [21.291982, -157.821856],
                    [-18.142599, 178.431],
                    [-27.46758, 153.027892]
                ],
                color: '#FF0000'
            }
        ]
    };
    
    $.each(categories, function(name) {
        
        var paths = [];new google.maps.LatLng
        
        $.each(this, function(i) {
            
            var path = [];
            
            $.each(this.coordinates, function(i) {
                
                path.push(new google.maps.LatLng(this[0], this[1]));
            
            });
    
            paths.push(new google.maps.Polyline({
                path: path,
                strokeColor: this.color,
                strokeOpacity: 1.0,
                strokeWeight: 2,
                visible: false,
                map: map
            }));
            
        });
        
        categories[name] = paths;
        
        div.append('<label><input type="checkbox" value="' + name + '"/> ' + name + '</label>');
    
    });
    
    div.on('change', 'input', function(event) {
        
        var checked = this.checked;
    
        $.each(categories[this.value], function(i) {
        
            this.setVisible(checked);
        
        });
    
    });
    
});