Show Hide Polylines Google Maps

When page loaded all polyline autoloaded on map. I m need to hide it and when i click chekcbox it will show on map. how can i do it? Polylines has categories.. like rayon.. i ca

Solution 1:

Do you mean something like this?

http://jsfiddle.net/NCZYW/9/

$(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);

        });

    });

});

The key is to group the polylines.